1. 介绍
传统开发模式下,
bootstrap
是一个配合jQuery
使用的前端UI框架。可以帮助我们快速的构建前端WEB项目。
主要提供了以下功能
- 全局的CSS样式
- web项目中常见的组件
- 提供了常用的插件
bootstrap官网: Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网
2. 引入bootstrap
bootstrap 是依赖于 jQuery的,所以也需要引入 jQuery。
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
3. 全局 CSS 样式
其实就是 bootstrap 预先定义了很多类(class),并对这些类赋予了特定样式,我们可以使用这些类,制作想要的页面效果。我们所学习的也无非就是 了解每个类的特定样式是什么。
3.1 样式初始化 Normalize.css
为了增强跨浏览器渲染的一致性,使用了
Normalize.css
,进行页面样式的初始化。Normalize.css
是一个 CSS 重置样式库
3.2 布局容器
.container
类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
3.3 栅格化系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,系统会自动将每一行分为12列,使用特定的类,让网页布局随着屏幕或视口(viewport)尺寸的变化而变化。
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,
行(row
)必须包含在.container
中,只有列(column)
可以作为行(row)
的直接子元素,你的内容应当放置于列(column)内
。
/*col-xs-6 代表在视口宽度(<768px)时, 该元素占据6列(也就是 50%)*/
/*col-md-4 代表在视口宽度(992px--1200px)时, 该元素占据4列(也就是 33.3%)*/
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
</div>
3.3.1 屏幕尺寸划分
- xs:超小屏幕 手机 小于768px
- sm:小屏幕 平板 (≥768px)
- md:中等屏幕 桌面显示器 (≥992px)
- lg:大屏幕 大桌面显示器 (≥1200px)
3.4 表格
-
.table-striped
条纹状表格 -
.table-bordered
带边框表格 -
.table-hover
鼠标悬停效果
<table class="table">
...
</table>
3.5 表单
单独的表单控件会被自动赋予一些全局样式。
所有设置了.form-control
类的<input>
、<textarea>
和<select>
元素都将被默认设置宽度属性为width: 100%;
。
将label
元素和前面提到的控件包裹在.form-group
中可以获得最好的排列。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
3.6 其他
除此之外,还提供了很多的类,用于控制样式,可以参考官方文档。
4. 组件
Bootstrap 自带了大量可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
常用组件其实就是 bootstrap 利用标签和类,为我们实现了网页当中常见的效果,比如下拉菜单、导航、警告框等,供我们参考使用。
4.1 字体图标
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
4.2 导航
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
4.3 分页
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
5. 插件
jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以认为就是具备了交互能力的组件。
5.1 模态框
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>