布局容器和栅网格系统

布局容器

1
2
3
4
5
6
7
8


<div class="container">
    ...
</div>
// container用于固定宽度(两侧留白)并支持响应式
<div class="container-fluid">
    ...
</div>
// 用于100%宽度，占据窗口全部宽度 

栅网格系统

row(行)、xs(超小屏)、sm(小屏)、md(中屏)、lg(大屏)、xl(大屏)、xxl(超大屏)

列组合

行(.row)必须包含在容器(.container)中，在行(.row)中可以添加列(.column)，只有列可以作为行容器的直接子元素，列把屏幕水平分成12份，如果列数总和不能超过12。如果大于，则自动换行。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<div class="container">
    <div class="pow">
        <div class="col-md-4 col-sm-4">4列</div> <!-- 可以根据设备屏幕大小写多个 col-xx-x的值 会自动判断 -->
        <div class="col-md-8">8列</div> 
    </div>
    <div class="pow">
        <div class="col-md-2">2列</div>
        <div class="col-md-10">10列</div> 
    </div>
</div>

列偏移

如果不想相邻的两个列靠在一起，但又不想新建列或者使用其他方法，这个时候就可以使用列偏移（offset）来实现。在列元素上添加（col-md-offset-8），8表示该列向右移8个列的宽度。列偏移会使在此列之后的列也跟着偏移。

1
2
3
4
5
6
7


<div class="container">
    <div class="pow">
        <div class="col-md-1">1列</div>
        <div class="col-md-1">2列</div>
        <div class="col-md-1 col-md-offset-9">12列</div> 
    </div>
</div>

列排序

列排序就是改变列的方向，设置其左右浮动和浮动的距离。通过（col-md-push-*\col-md-pull-*) *号表示移动的列数，push表示往右，pull表示往左。列排序只会移动当前列，如果设定的位置存在列那么后面的列会覆盖前面的列。

1
2
3
4
5
6
7
8


<div class="container">
    <div class="pow">
        <div class="col-md-1 col-md-push-2">1列</div> <!-- 往右移两个列 会被原来的列覆盖 -->
        <div class="col-md-1">2列</div>
        <div class="col-md-1 col-md-pull-1">3列</div> <!-- 往左移一个列 会把原来存在的列覆盖掉 -->
        <div class="col-md-1">4列</div> 
    </div>
</div>

列嵌套

栅网格系统支持列的嵌套，可以在一个列中嵌入一个或多个行，再在行中插入列。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<div class="container">
    <div class="pow">
        <div class="col-md-6">6</div>
            <div class="row"> <!-- 嵌套在第一列的行 -->
               <div class="col-md-4">4</div>
               <div class="col-md-8">8</div>  
            </div>
        <div class="col-md-6">6</div>
    </div>
</div>

常用样式

排版

标题

对h1-h6的标题进行了覆盖，同时提供了（.h1-.h6）的类元素。副标题（samll标签或者.small）。

1
2


<h1>标题1<small>副标题</small></h1>
<div class=".h1">标题1<span class="small">副标题</small></div> 

段落

通过.lead来突出显示段落（增大字号，加粗文本）

1

<p class="lead">这是一个段落<small>小号字</small><strong>加粗</strong><em>斜体</em></p>

强调

定义了一套类名，通过颜色来进行强调，可以更换text来支持其他元素。

.text-muted //提示，使用浅灰色
.text-primary //主要，使用蓝色
.text-success //成功，使用浅绿色
.text-info //通知颜色，使用浅蓝色
.text-warning //警告，使用黄色
.text-danger //危险，使用褐色

1
2
3
4
5
6


<div class="text-muted">提示</div>
<div class="text-primary">主要</div>
<div class="text-success">成功</div>
<div class="text-info">通知</div>
<div class="text-warning">警告</div>
<div class="text-danger">危险</div>

对齐效果

1
2
3
4


<p class="text-left">左对齐</p>
<p class="text-right">右对齐</p>
<p class="text-center">居中</p>
<p class="text-justify">两端对齐</p>

列表

在HTML文档中，列表主要有三种

无序列表（<ul><li></li></ul>）
有序列表（<ol><li></li></ul>）
定义列表（<dl><dt></dt><dd></dd></dl>）

去点列表

去除列表前面的标识符

1
2
3
4


<ul class="list-unstyled">
    <li>无序列表1</li>
    <li>无序列表2</li>
</ul>

内联列表

把列表由水平样式改变为垂直样式，并去点标识符，用于制作水平导航栏。

1
2
3
4


<ul class="list-inline">
    <li>首页</li>
    <li>关于</li>
</ul>

定义列表

在原有基础上加入一些样式，可使用`class=“dl-horizontal"变成水平列表;标题宽度超过160px时，会显示三个省略号。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<dl>
    <dt>HTML</dt> <!-- <dt>表示标题 -->
    <dd>超文本标记语言</dd> <!-- <dd>表示内容 -->
</dl>
<dl class="dl-horizontal">
    <dt>HTML 超文本标记语言</dt>
    <dd>超文本标记语言，是一种标识语言</dd>
    <dt>测试标题不能超过160px</dt>
    <dd>水平定义列表,水平定义列表</dd> <!-- 内容过长会用...代替 -->
</dl>

代码

Bootstrap提供了三种代码风格

单行代码（内嵌式）

1

<code>这是代码</code>

多行代码（代码块）

多行代码里的内容会被完整保留空格和样式，可以使用pre-scrollable为代码块添加滚动条。

1
2
3
4
5
6
7


<pre class="pre=scrollable">
    public class Demo{
        public static void main(String[] args){
            System.out.println("Hello World");
        }
    }
</pre>

快捷键

为自定义的快捷键添加特殊显示效果。

1

<span>使用<kbd>ctrl+s</kbd>保存</span> <!-- <kbd>标签内写入快捷键 -->

表格

表格样式

Bootstrap为表格提供了1中基础样式和4中附加样式，使用的时候只需要添加不同或多个类名即可获得不同的风格。

.table //基础样式
.table-striped //斑马线风格表格
.table-bordered //带边框的表格
.table-hover //鼠标悬停表格高亮
.table-condensed //表格内间距小或者没间距的表格

tr、th、td 样式

用户表格中行的类

5个类名对象5个背景颜色
.active //将悬停的颜色应用在行或单元格上
.success //表示成功的操作
.info //表示信息出现变化的操作
.warning //表示一个警告的操作
.danger //表示一个危险的操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<table class="table table-border table hover">
    <tr class="souccess">
        <th>Java</th>
        <th>数据库</th>
        <th>JavaScript</th>
    </tr>
    <tr class="info">
        <td>面向对象</td>
        <td>mariaDB</td>
        <td>json</td>
    </tr>
</table>

表单

表单中的常见元素有：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

表单控件

.form-control .input-lg(较大) .input-sm(较小)

输入框

1
2
3
4
5


<div class="col-md-3"> <!-- 定义div盒子占3列宽度 -->
    <input type="text" name="" id="" class="form-control">
    <input type="text" name="" id="" class="form-control input-lg">
    <input type="text" name="" id="" class="form-control input-sm">
</div>

下拉选择框

多行选择在<select>标签中设置属性`multiple=“multiple”

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<div class="col-md-3">
    <select class="form-control">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</div>
<div class="col-md-3">
    <select class="form-control" muluiple="multiple"> <!-- 这是多行选择 -->
        <option>北京</option>
        <option>上海</option>
    </select>
</div>

文本域

文本框只有一行，文本域用来接收用户输入的大量文字。

1
2
3
4
5


<div class="col-md-3">
    <textarea class="form-control">
    
    </textarea>
</div>

复选框

垂直显示 .checkbox
水平显示 .checkbox-inline

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<div class="row">
    <div class="col-md-1">
        <!-- 垂直显示 -->
        <!-- 复选框返回的值是 value 属性中的值 -->
        <div class="checkbox">
            <label><input type="checkbox" name="habby" value="游戏">游戏</label>
        </div>
        <div class="checkbox">
            <label><input yype="checkbox" name="habby" value="学习">学习</label>
        </div>
        <!-- 水平显示 -->
        <label class="checkbox">
            <input type="cheakbox" name="habby" value="游戏">游戏
        </label>
        <label class="checkbox">
            <input type="checkbox" name="habby" value="学习">学习
        </label>
    </div>
</div>

单选框

垂直显示 .radio
水平显示 .radio-inline

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<div class="row">
    <div class="col-md-1">
        <!-- 垂直显示 -->
        <!-- 单选框返回的值是 value 属性中的值 -->
        <div class="radio">
            <label><input type="radio" name="habby" value="游戏">游戏</label>
        </div>
        <div class="radio">
            <label><input yype="radio" name="habby" value="学习">学习</label>
        </div>
        <!-- 水平显示 -->
        <label class="radio">
            <input type="radio" name="habby" value="游戏">游戏
        </label>
        <label class="radio">
            <input type="radio" name="habby" value="学习">学习
        </label>
    </div>
</div>

按钮

按钮使用<button>标签，BootStrap定义了1个基础按钮样式和7个附加样式。
按钮样式支持其他标签，如<a>,<div>,<span>标签等。
按钮样式可以调节大小，有三个尺寸。另还有一个禁用样式（仅在视觉效果上禁用）。

基础样式 .btn
附加样式：

.btn-dafault //默认颜色
.btn-primary //主要，使用蓝色
.btn-success //成功，使用浅绿色
.btn-info //通知颜色，使用浅蓝色
.btn-warning //警告，使用黄色
.btn-danger //危险，使用褐色 .btn-link //超链接样式

.btn-lg //大尺寸
.btn-sm //标准尺寸
.btn-xs //小尺寸

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<!-- 基础样式 -->
<button class=".btn">按钮</button> 
<!-- 附加样式 -->
<button class=".btn btn-info">按钮</button>
<!-- 多标签支持 -->
<a href="www.baidu.com" class="btn btn-success">百度</a>
<div class="btn btn-link">div标签</div>
<!-- 按钮大小 -->
<button class="btn btn-danger btn-lg">按钮</button>  <!-- 大尺寸按钮 -->
<!-- 按钮禁用 -->
<!-- 属性禁用（真的禁用 无法点击） -->
<button class="btn btn-primary" disabled="disabled" onlick="alert('1')">按钮</button>
<!-- 样式禁用（可以点击） -->
<button class="btn btn-primary disabled" onlick="alert('1')">按钮</button>

表单布局

基本的表单结构是Bootstrap自带的，创建基本表单的步骤为

向父<form>元素中添加role="form"的属性。
把标签和控件放在一个带有form-group类属性的div盒子里面。
向所有的表单元素添加class="form-control"属性，如<input>,<textarea>,<select>。

水平表单

在<form>标签中添加类 .form-horizontal
在不超过12列的前提下，所有表单元素显示在同以行里面，需配合Bootstrap的网格系统使用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<form action="#" class="form-horizontal" role="form">
        <p class="h2" align="center">用户信息</p>
        <div class="form-group">
            <label for="uname" class="col-md-2 control-label">账号</label>
            <div class="col-md-8">
                <input type="text" id="uname" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="psd" class="col-md-2 control-label">密码</label>
            <div class="col-md-8">
                <input type="passwd" id="psd" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">爱好</label>
            <div class="col-md-8">
                <label class="checkbox-inline">
                    <input type="checkbox" name="habby">游戏
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="habby">学习
                </label>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-2 col-md-offset-5">
                <button class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>

内联表单

在<form>标签中添加类 .form-inline
让所有表单控件显示在一行上面。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<form action="#" class="form-inline" role="form">
    <div class="form-group">
        <label for="userName">用户名</label>
        <input type="text" name="" id="userName"class="form-control">
    </div>
    <div class="form-group">
        <label for="userPasswd">密码</label>
        <input type="password" name="" id="userPasswd" class="form-control">
    </div>
    <div class="form-group">
        <button class="btn btn-default">登录</button>
    </div>
</form>

缩略图

最常用的地方是产品列表页面，缩略图的实现要配合网格系统一起使用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


 <div class="container"> <!-- 旁边留白 -->
    <div class="row"> <!-- 定义一行 -->
        <div class="col-md-3"> <!-- 一个缩略图占3列 -->
            <div class="thumbnail">
                <img src="img/1.jpg" alt="">
                <h3>测试</h3>
                <p>这是一张图片</p>
                <button class="btn btn-default">
                    <!-- 字体图标 -->
                    <span class="glyphicon glyphicon-heart"></span> 喜欢
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span> 评论
                </button>
            </div>           
        </div>
    </div>
</div>

面板

.panel //基本样式
.panel-default //默认样式
.panel-heading //头部面板
.panel-body //主体面板
默认的.panel基本样式只是设置了基本的边框和内部边距来显示内容。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!-- 面板也有7种颜色可以设置 -->
<div class="panel panel-info">
    <!-- 头部面板 -->
    <div class="panel-heading">
        ······
    </div>
    <!-- 主体面板 -->
    <div class="panel-body">
        ······
    </div>
</div>