从零开始学java记录（Bootstrap）——2019年6月1日

今天又是一个学习JAVA的好日子！
Bootstrap 特点
1、简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让
web 开发更迅速、简单。
2、基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，
卓越的兼容性，响应式设计，12 列格网，样式向导文档。
3、自定义 JQuery 插件，完整的类库，bootstrap3 基于 Less，bootstrap4
基于 Sass 的 CSS 预处理技术
4、Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。
Bootstrap 响应式布局设计，给用户提供更好的视觉使用体验。
5、丰富的组件
布局容器
1、.container 类用于固定宽度并支持响应式布局的容器。
< div class=“container”>
…

2、.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容
器。
< div class=“container-fluid”>
…

栅格网格系统(Grid System)
1、列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超 12，大于
12,则自动换到下一行。），有点类似于表格的 colspan 属性。
< div class=“container”>
< div class=“row”>
< div class=“col-md-4”>4 列
< div class=“col-md-8”>8 列

< div class=“row”>
< div class=“col-md-2”>2 列
< div class=“col-md-10”>10 列
< /div>

2、列偏移、列排序
（1）列偏移
如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其他
的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏
移也非常简单，只需要在列元素上添加类名“col-md-offset-”(其中星号代表
要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素
上添加“col-md-offset-8”，表示该列向右移动 8 个列的宽度(要保证列与偏移
列的总数不超过 12，不然会致列断行|换行显示)。
（2）列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
在 Bootstrap 框架的网格系统中是通过添加类名 ”col-md-push-” 和
“col-md-pull-*” (其中星号代表移动的列组合数)。往前 pull，往后 push。
（3）案例
< div class=“container”>
< div class=“row”>
< div class=“col-md-1”>1 列
< div class=“col-md-1”>2 列
< div class=“col-md-1 col-md-offset-8”>11 列
< div class=“col-md-1”>12 列

< div class=“row”>
< div class=“col-md-1 col-md-push-10”>1 列< /div>
< div class=“col-md-1 col-md-pull-1”>2 列


3、列嵌套
Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或
者多个行（row）容器，然后在这个行容器中插入列.
< div class=“container”>
< div class=“row”>
< div class=“col-md-2”>
我的里面嵌套了一个网格
< div class=“row”>
< div class=“col-md-9”>9
< div class=“col-md-3”>3


< div class=“col-md-10”>我的里面嵌套了一个网格
< div class=“row”>
< div class=“col-md-10”>10
< div class=“col-md-2”>2



表格
（1）样式:
Bootstrap 为表格提供了 1 种基础样式和 4 种附加样式以及 1 个支持响应式
的表格。在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到
不同的表格风格：
基础样式
1）.table：基础表格
附加样式

1. .table-striped：斑马线表格
2. .table-bordered：带边框的表格
3. .table-hover：鼠标悬停高亮的表格
   4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格
   的内距更小