Bootstrap-06(/2019/6/2)

Bootstrap

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

一.使用Bootstrap

html 中模板为

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!--使用 X-UA-Compatible 来设置 IE 浏览器兼容模式 最新的渲染模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--
             viewport 表示用户是否可以缩放页面；
             width 指定视区的逻辑宽度；
             device-width 指示视区宽度应为设备的屏幕宽度；
             initial-scale 指令用于设置 Web 页面的初始缩放比例
             initial-scale=1 则将显示未经缩放的 Web 文档
         -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 的 HTML 标准模板</title>
        <!--引入BootStrap的核心css文件-->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    </head>
    <body>
        
        <h1>Hello, world!</h1>
        
    </body>
    <!--注：如果需要使用Bootstrap的组件或插件，则需要引入Jquery和bootstrap的js文件，且jquery必须在bootstrap之前引入-->
    <!--引入Jquery的核心js文件-->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <!--引入BootStrap的核心js文件-->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

</html>

说明：
（1） ViewPort <meta>标记用于指定用户是否可以缩放 Web 页面
（2） width 和 height 指令分别指定视区的逻辑宽度和高度。他们的值
要么是以像素为单位的数字，要么是一个特殊的标记符号。
（3） width 指令使用 device-width 标记可以指示视区宽度应为设备
的屏幕宽度。
（4） height 指令使用 device-height 标记指示视区高度为设备的屏
幕高度。
（5） initial-scale 指令用于设置 Web 页面的初始缩放比例。默认的
初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在
浏览器中呈现出整个 Web 页面，设为 1.0 则将显示未经缩放的 Web 文档。

二、布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们
提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器
类不能互相嵌套。
1、 .container 类用于固定宽度并支持响应式布局的容器。

2、 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>布局容器</title>
        <!--引入BootStrap的核心css文件-->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    </head>
    <body>
        <!--
            布局容器
                Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
                1、.container 类用于固定宽度并支持响应式布局的容器。
                    <div class="container">
                     ...
                    </div>
                2、.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
                    <div class="container-fluid">
                     ...
                    </div>
            
            
        -->
        
        <!--默认的DIV-->
        <div style="background-color: pink;height: 30px;"></div>
        
        <!--1、.container 类用于固定宽度并支持响应式布局的容器。 -->
        <div class="container" style="background-color: cyan;height: 30px;"> </div>
        
        <!--2、 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。-->
        <div class="container-fluid" style="background-color: cyan;height: 30px;"> </div>
        
    </body>

</html>

三、栅格网格系统(Grid System)

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份(也有平分成 24 份或 32 份，但 12 份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。 Bootstrap 框架中的网格系统就是将容器平分成 12 份。

注意: 网格系统必须使用到 css
container、 row 、 xs (xsmall phones), sm (small tablets), md
(middle desktops) lg (larger desktops) 即: 超小屏(自动)，小屏
(750px)，中屏(970px)和大屏(1170px)
数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对
齐方式和内距(padding)。
在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容
器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于
12,则自动换到下一行。
具体内容应当放置在列容器（column）之内

image.png

1、列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超 12，大于
12,则自动换到下一行。），有点类似于表格的 colspan 属性。

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

3、列嵌套
Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或
者多个行（row）容器，然后在这个行容器中插入列.

<!DOCTYPE html>
<html>
    <head>
        <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>栅格网格系统</title>
        <!--引入BootStrap的核心css文件-->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    </head>
    <body>
        <!--
            注意: 网格系统必须使用到 css 
                container、row 、xs (xsmall phones), sm (small tablets), md (middle desktops) lg (larger desktops) 即: 超小屏(自动)，小屏(750px)，中屏(970px)和大屏(1170px) 
                数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
                在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于 12,则自动换到下一行。
                具体内容应当放置在列容器（column）之内
                
                
            1、列组合
                列组合简单理解就是更改数字来合并列（原则：列总和数不能超 12，大于12,则自动换到下一行。），有点类似于表格的 colspan 属性。
        
            2、列偏移、列排序
                （1）列偏移
                如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏
                移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表
                要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素
                上添加“col-md-offset-8”，表示该列向右移动 8 个列的宽度(要保证列与偏移
                列的总数不超过 12，不然会致列断行|换行显示)。
                （2）列排序
                列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
                在 Bootstrap 框架的网格系统中是通过添加类名 ”col-md-push-*” 和
                “col-md-pull-*” (其中星号代表移动的列组合数)。往前 pull，往后 push。
                
            3、列嵌套
                Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.
        
        
        -->
        <!--容器布局-->
        <div class="container" >
            
            <!--列组合-->
            <!--定义数据行 row-->
            <div class="row">
                <!--设置栅格网格系统-->
                <div class="col-md-1 col-sm-1 col-xs-1" style="background-color: rosybrown;">1</div>
                <div class="col-md-2 col-sm-2 col-xs-2" style="background-color: azure;">2</div>
                <div class="col-md-8 col-sm-8 col-xs-8" style="background-color: tomato;">8</div>
                <div class="col-md-2 col-sm-2 col-xs-2" style="background-color: brown;">2</div>
            </div>
            <div class="row">
                <!--设置栅格网格系统-->
                <div class="col-md-1 col-sm-1 col-xs-1" style="background-color: blanchedalmond;">1</div>
                <div class="col-md-2 col-sm-2 col-xs-2" style="background-color: cornflowerblue;">2</div>
                <div class="col-md-8 col-sm-8 col-xs-8" style="background-color: khaki;">8</div>
                <div class="col-md-1 col-sm-1 col-xs-1" style="background-color: lawngreen;">2</div>
            </div>
            <!--列组合-->
            
            <div style="height: 20px;"></div>
            
            <!--列偏移-->
            <div class="row">
                <div class="col-md-4" style="background-color: blanchedalmond;">4</div>
                <div class="col-md-2 col-md-offset-1" style="background-color: cornflowerblue;">2</div>
                <div class="col-md-1" style="background-color: blueviolet;">1</div>
            </div>
            <div class="row">
                <div class="col-md-4" style="background-color: burlywood;">4</div>
                <div class="col-md-2 col-md-offset-10" style="background-color: cadetblue;">2</div>
                <div class="col-md-1" style="background-color: indianred;">1</div>
            </div>
            <!--列偏移-->
            
            <div style="height: 20px;"></div>
            
            <!--列排序-->
            <div class="row">
                <div class="col-md-4" style="background-color: blanchedalmond;">4</div>
                <div class="col-md-2" style="background-color: cornflowerblue;">2</div>
                <div class="col-md-1 col-md-pull-3" style="background-color: blueviolet;">1</div>
            </div>
            <div class="row">
                <div class="col-md-4" style="background-color: rosybrown;">4</div>
                <div class="col-md-2 col-md-push-3" style="background-color: bisque;">2</div>
                <div class="col-md-1" style="background-color: tomato;">1</div>
            </div>
            <!--列排序-->
            
            <div style="height: 20px;"></div>
            
            <!--列嵌套-->
            <div class="row">
                <div class="col-md-6" style="background-color: rosybrown;">
                    6
                    <div class="row">
                        <div class="col-md-4" style="background-color: burlywood;">4</div>
                        <div class="col-md-4" style="background-color: sandybrown;">4</div>
                        <div class="col-md-4" >4</div>
                    </div>
                </div>
                <div class="col-md-6" style="background-color: thistle;">
                    6
                </div>
            </div>
            <!--列嵌套-->
            
            
        </div>
        
    </body>
</html>

四、排版
1、标题
Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签<h1>到<h6>,
只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一
样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6
六个类名。
同时后面可以紧跟着一行小的副标题<small></small>或使用.small

2、段落
段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就
是增大文本字号，加粗文本，而且对行高和 margin 也做相应的处理。可以使用
以下标签给文本做突出样式处理：
<small>:小号字
<b><strong>:加粗
<i><em>:斜体

3、引用
<blockquote>：标签定义摘自另一个源的块引用，
使用.blockquote-reverse，实现右对齐。
<footer>:脚注
<cite>：表示对某个参考文献的引用

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>排版</title>
        <!--引入BootStrap的核心css文件-->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    </head>
    <body>
        <!--
            排版
                标签
                    h1-h6:bootstrap定义了样式覆盖了原来的标题效果
                    其他 标签使用.h1-.h6样式，也可以有h1-h6的效果
                    <small></small>:小号字体，或者设置.small属性
                    
                段落
                    段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和 margin 也做相应的处理。可以使用
                    以下标签给文本做突出样式处理：
                        <small>:小号字
                        <b><strong>:加粗
                        <i><em>:斜体
                引用
                    <blockquote>：标签定义摘自另一个源的块引用，
                    使用.blockquote-reverse，实现右对齐。
                    <footer>:脚注
                    <cite>：表示对某个参考文献的引用
        -->
        
        <!--标题-->
        <h1>标题1<small>副标题</small></h1>
        <h2>标题2<span class="small">副标题</span></h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>
        <p class="h2">标签</p>
        
        <hr />
        <!--段落-->
        <p>以后的你会感谢现在的自己</p>
        <p class="lead">以后的你会感谢现在的自己</p>
        <p class="lead"><b>以后</b><em>的</em><small>你</small>会<i>感谢</i>现在的<strong>自己</strong></p>
        
        
        <hr />
        
        <blockquote class="blockquote">
            好好学习 Java！
            <footer>本文出自大师之手</footer> 
            <cite>thinking in java</cite> 
        </blockquote>
        
    </body>
</html>

4、强调
定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强
调，具本说明如下：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

5、文本对齐
在 CSS 中常常使用 text-align 来实现文本的对齐风格的设置。
其中主要有四种风格：
左对齐，取值 left ;
居中对齐，取值 center;
右对齐，取值 right ;
两端对齐，取值 justify。
为了简化操作，方便使用， Bootstrap 通过定义四个类名来控制文本的对齐
风格： .text-left：左对齐 .text-center：居中对齐 .text-right：右对
齐 .text-justify：两端对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>强调文本对齐</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<!--
         排版
            强调
                .text-muted：提示，使用浅灰色（#999）
                .text-primary：主要，使用蓝色（#428bca）
                .text-success：成功，使用浅绿色(#3c763d)
                .text-info：通知信息，使用浅蓝色（#31708f）
                .text-warning：警告，使用黄色（#8a6d3b）
                .text-danger：危险，使用褐色（#a94442）
            文本对齐
               使用 text-align 来实现文本的对齐风格的设置。
                  其中主要有四种风格：
                  左对齐，取值 left ;
                  居中对齐，取值 center;
                  右对齐，取值 right ;
                  两端对齐，取值 justify。
                  为了简化操作，方便使用，Bootstrap 通过定义四个类名来控制文本的对齐
                  风格： .text-left：左对齐
                      .text-center：居中对齐
                      .text-right：右对齐
                      .text-justify：两端对齐。
      -->
<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>

<hr />
<div>
    Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
</div>
<div style="text-align: center;">
    Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷
</div>
<hr />
<div style="text-align: justify;">
    Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
</div>

<hr />
<div class="text-justify">
    Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
</div>
</body>

</html>

6. 列表
在 HTML 文档中，列表结构主要有三种：
无序列表(<ul><li>...</li></ul>)、
有序列表(<ol><li>...</li></ol>)、
定义列表(<dl><dt>...</dt><dd>...</dd></dl>)。
bootstrap 根据平时的使用情形提供了六种形式的列表:( 普通列表、有序
列表、去点列表、内联列表、描述列表、水平描述列表）。在样式方面
Bootstrap
只是在原有的基础上做了一些细微的优化(margin 调整),其他差别不大，加入
了一些样式:
（1）去点列表:
class="list-unstyled"

<ul class="list-unstyled">
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ul>

（2）内联列表:
class=" list-inline" 简单点说就是把垂直列表换成水平列表，而且去
掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

（3）定义列表:
在原有的基础加入了一些样式，使用样式
class=".dl-horizontal"制作水平定义列表 : 当标题宽度超过
160px时，将会显示三个省略号 bootstrap4
貌似有问题，看样子还是不稳定， bootstrap3 中的 css 没有问题。

7、代码
一般在个人博客上使用的较为频繁，用于显示代码的风格。在 Bootstrap
主要提供了三种代码风格：
（1）使用<code></code>来显示单行内联代码
（2）使用 <pre></pre>来显示多行块代码，样式 :
pre-scrollable
(height,max-height 高度固定,为 340px,超过存在滚动条)
（3）使用<kbd></kbd>来显示用户输入代码,如快捷键
不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码"<"来
替代，大于号(>)使用">"来替代。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>列表代码</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<!--
         排版
            列表
               在 HTML 文档中，列表结构主要有三种：
                  无序列表(<ul><li>…</li></ul>)、
                  有序列表(<ol><li>…</li></ol>)、
                  定义列表(<dl><dt>…</dt><dd>…</dd></dl>)。
                  bootstrap 根据平时的使用情形提供了六种形式的列表:( 普通列表、有序
                  列表、去点列表、内联列表、描述列表、水平描述列表）。在样式方面 Bootstrap
                  只是在原有的基础上做了一些细微的优化(margin 调整),其他差别不大，加入
                  了一些样式:
                  （1）去点列表:
                     class="list-unstyled"
                  （2）内联列表:
                     class=” list-inline” 简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。
                  （3）定义列表:
                     在原有的基础加入了一些样式，使用样式 class=“.dl-horizontal”制作
                     水平定义列表 : 当标题宽度超过160px时，将会显示三个省略号 bootstrap4
                     貌似有问题，看样子还是不稳定，bootstrap3 中的 css 没有问题

            代码
               主要提供了三种代码风格：
                  （1）使用<code></code>来显示单行内联代码
                  （ 2 ） 使 用 <pre></pre> 来 显 示 多 行 块 代 码 ， 样 式 : pre-scrollable
                  (height,max-height 高度固定,为 340px,超过存在滚动条)
                  （3）使用<kbd></kbd>来显示用户输入代码,如快捷键
                  不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“&lt;”来
                  替代，大于号(>)使用“&gt;”来替代。

      -->
<body>
<ul>
    <li>等你下课</li>
    <li>我不配</li>
</ul>
<ul class="list-unstyled">
    <li>等你下课</li>
    <li>我不配</li>
</ul>
<ul class="list-inline">
    <li>等你下课</li>
    <li>我不配</li>
</ul>
<br />
<dl>
    <dt>尚学堂</dt>
    <dd>中国最有良心的培训机构</dd>
    <dd>中国最有良心的培训机构</dd>
    <dt>速学堂</dt>
    <dd>o2o 在线学习平台</dd>
    <dd>o2o 在线学习平台</dd>
</dl>
<dl >
    <dt>尚学堂 使用 bootstrap3 的 css 哦</dt>
    <dd>中国最有良心的一站式的 o2o 培训机构</dd>
    <dt>测试标题不能超过 160px 的宽度,否则 2 个点</dt>
    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl>

<dl class="dl-horizontal">
    <dt>尚学堂 使用 bootstrap3 的 css 哦</dt>
    <dd>中国最有良心的一站式的 o2o 培训机构</dd>
    <dt>测试标题不能超过 160px 的宽度,否则 2 个点</dt>
    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl>

<br />
<hr />

<code>
    private void test() {
    System.out.println("Hello");
    }
</code>

<pre>
   private void test() {
      System.out.println("Hello");
   }
</pre>

<pre class="pre-scrollable">
   private void test() {
      System.out.println("Hello");
   }
   private void test() {
      System.out.println("Hello");
   }
   private void test() {
      System.out.println("Hello");
   }
   private void test() {
      System.out.println("Hello");
   }
   private void test() {
      System.out.println("Hello");
   }
   private void test() {
      System.out.println("Hello");
   }

   &lt;h2&gt;NIHAO&lt;/h2&gt;
</pre>

<div>使用<kbd>ctrl</kbd> + <kbd>s</kbd> 快捷键保存</div>

<div style="height: 100px;background-color: #1b6d85"></div>

</body>
</html>


  --------------------------------------------------------------------------------------------------------------------------------------------

8、表格

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

.table-striped：斑马线表格\
.table-bordered：带边框的表格\
.table-hover：鼠标悬停高亮的表格
4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格
的内距更小
（2） <tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表格</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<table style="width: 800px;" class="table table-striped table-hover table-bordered table-condensed" >
    <tr >
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr class="active">
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr class="info">
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr class="danger">
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr class="success">
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr class="warning">
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>


<div style="height: 100px;"></div>

</body>
</html>

五、表单
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让
网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、
单选按钮、复选按钮、文本域和按钮等。
1、表单控件
.form-control .input-lg（较大） .input-sm（较小）
（1）输入框
.form-control
（2）下拉选择框 select
多行选择设置： multiple="multiple"
（3）文本域 textarea

<textarea class="form-control" rows="3"></textarea>
（4）复选框 checkbox
.checkbox，水平显示： .checkbox-inline

（5）单选择按钮
.radio，水平显示： .radio-inline

（6）按钮
1）使用 button 实现
基础样式: btn
附加样式： btn-primary btn-info btn-success btn-warning
btn-danger btn-link btn-default
2）多标签支持:使用 a div 等制作按钮

3）按钮大小
使用 .btn-lg、 .btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

4）按钮禁用
方法 1：在标签中添加 disabled 属性
方法 2：在元素标签中添加类名"disabled"
在 class 属性中添加 disabled 只是样式上禁用了，并不是真正的禁用
了此按钮！

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表单1</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<!--布局容器-->
<div class="container">
    <!--文本框-->
    <div class="row">
        <div class="col-md-4">
            <label for="uname">姓名：</label>
            <input type="text" id="uname" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">姓名：</label>
            <input type="text" id="uname" class="form-control" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">姓名：</label>
            <input type="text" id="uname" class="form-control input-lg" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">姓名：</label>
            <input type="text" id="uname" class="form-control input-sm" />
        </div>
    </div>
    <hr />
    <!--下拉框-->
    <div class="row">
        <div class="col-md-4">
            <label for="uname">城市：</label>
            <select>
                <option>-请选择-</option>
                <option>北京</option>
                <option>上海</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">城市：</label>
            <select class="form-control">
                <option>-请选择-</option>
                <option>北京</option>
                <option>上海</option>
            </select>
        </div>
    </div>

    <hr />
    <!--文本域-->
    <div class="row">
        <div class="col-md-4">
            <label for="uname">简介：</label>
            <textarea  rows="5" cols="40"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">简介：</label>
            <textarea class="form-control"  rows="5" cols="40"></textarea>
        </div>
    </div>
    <hr />

    <!--复选框-->
    <div class="row">
        <div class="col-md-4">
            <label for="uname">爱好：</label>
            <input type="checkbox" name="hobby" /> 唱歌
            <input type="checkbox" name="hobby"  /> 跳舞
            <input type="checkbox" name="hobby"  /> Rap
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">爱好：</label>
            <div class="checkbox">
                <label><input type="checkbox" >游戏1</label>
                <label><input type="checkbox" >游戏2</label>
            </div>
            <div>
                <label class="checkbox-inline">
                    <input type="checkbox" >游戏1
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" >游戏2
                </label>
            </div>
        </div>
    </div>
    <hr />

    <!--单选框-->
    <div class="row">
        <div class="col-md-4">
            <label for="usex">性别：</label>
            <input type="radio" name="usex" /> 男
            <input type="radio" name="usex"  /> 女
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">性别：</label>
            <div class="radio">
                <label><input type="radio" >男</label>
                <label><input type="radio" >女</label>
            </div>
            <div>
                <label class="radio-inline">
                    <input type="radio" >男
                </label>
                <label class="radio-inline">
                    <input type="radio" >女
                </label>
            </div>
        </div>
    </div>
    <hr />

    <!--按钮-->
    <div class="row">
        <div class="col-md-4">
            <input type="button" value="按钮1" />
            <button>按钮2</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <input type="button" value="按钮2" class="btn" />
            <button class="btn">按钮2</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <input type="button" value="按钮1" class="btn btn-default" />
            <button class="btn btn-primary">按钮2</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <input type="button" value="按钮1" class="btn btn-default btn-xs" />
            <button class="btn btn-primary btn-lg">按钮2</button>
            <button class="btn btn-danger btn-sm">按钮2</button>
            <button class="btn btn-success btn-sm">按钮2</button>
            <button class="btn btn-info btn-sm">按钮2</button>
            <button class="btn btn-warning btn-sm">按钮2</button>
            <button class="btn btn-link btn-sm">按钮2</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="btn btn-info">按钮</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <button class="btn btn-danger" onclick="alert(1);" disabled="disabled">按钮</button>
            <button class="btn btn-warning disabled" onclick="alert(1);" >按钮</button>
        </div>
    </div>
    
</div>

<div style="height: 100px;"></div>
</body>
</html>

2. 表单案例

（1）水平表单:

同一行显示 form-horizontal

配合 Bootstrap 框架的网格系统

（2）内联表单：将表单的控件都在一行内显示 form-inline

注意 label 不会显示，存在的意义: 如果没有为输入控件设置 label 标签，

屏幕阅读器将无法正确识别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表单</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<!--水平表单-->
<form class="form-horizontal">
    <div class="form-group">
        <label for="email" class="control-label col-sm-2">邮箱</label>
        <div class="col-sm-2">
            <input type="email" class="form-control" placeholder="请输入邮箱" />
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="control-label col-sm-2">密码</label>
        <div class="col-sm-2">
            <input type="password" class="form-control" placeholder="请输入密码" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2">
            <div class=" checkbox">
                <label> <input type="checkbox" />记住密码 </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-4">
            <button class="btn btn-default">提交</button>
        </div>
    </div>
</form>

<hr />

<!--内联表单-->
<form class="form-inline">
    <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" class="form-control" placeholder="请输入邮箱" />
    </div>
    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" placeholder="请输入密码" />
    </div>
    <div class="form-group checkbox">
        <label><input type="checkbox" />记住密码</label>
    </div>
    <div class="form-group">
        <button class="btn btn-default">提交</button>
    </div>
</form>
</body>
</html>

六、下拉菜单
在使用 Bootstrap 框架的下拉菜单时，必须使用两个 js

要点:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>下拉菜单</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <!--引入Jquery的核心js文件-->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <!--引入BootStrap的核心js文件-->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<!--
         下拉菜单
            1、 使用一个类名为 dropdown 或 btn-group 的 div 包裹整个下拉框:
             <div class="dropdown"></div>
            2、 默认向下 dropdown，向上弹起加入 . dropup 即可
            3、 使用 button 作为父菜单，使用类名: dropdown-toggle 和自定义 data-toggle 属性
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            4、 在 button 中 使用 font 制作下拉箭头
               <span class="caret"></span>
            5、 下拉菜单项使用一个 ul 列表，并且定义一个类名为“dropdown-menu
            6、 分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
            7、 分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
            8、 对齐方式:
            1)、dropdown-menu-left 左对齐 默认样式
            2)、dropdown-menu-right 右对齐
            8、激活状态（.active）和禁用状态（.disabled）
      -->
<body>
<div class="dropdown">
    <!--2、 使用 button 作为父菜单，使用类名: dropdown-toggle 和自定义 data-toggle 属性-->
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        歌曲
        <!--3、在 button 中 使用 font 制作下拉箭头-->
        <font class="caret"></font>
    </button>
    <!--4、下拉菜单项使用一个 ul 列表，并且定义一个类名为“dropdown-menu”-->
    <ul class="dropdown-menu">
        <!--分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
        <li class="dropdown-header">----周杰伦----</li>
        <li class="active"><a href="#">等你下课</a></li>
        <li><a href="#">龙卷风</a></li>
        <li><a href="#">夜曲</a></li>
        <!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
        <li class="divider"></li>
        <li class="dropdown-header">----林俊杰----</li>
        <li><a href="#">江南</a></li>
        <li><a href="#">可惜没如果</a></li>
        <li><a href="#">醉赤壁</a></li>
        <!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
        <li class="divider"></li>
        <li class="dropdown-header">----陈奕迅----</li>
        <li><a href="#">十年</a></li>
        <li><a href="#">好久不见</a></li>
        <li class="disabled"><a href="#">你的背包</a></li>
    </ul>
</div>
</body>
</html>

七按钮组

同上引入 js，需要引入 bootstrap 的 fonts 文件夹。
要点:

1、使用一个类名为 btn-group 的 div 包裹整个按钮组
2、使用标签 button 、 a、 span 制作按钮，需要指定类名.btn
3、使用 span 制作图标
4、大小分类: btn-group-lg btn-group btn-group-sm btn-group-xs
5、等分按钮: 自适应分组按钮 btn-group-justified
6、默认为水平，使用 btn-group-vertical 制作垂直按钮组
7、按钮工具栏: 在外层套用 .btn-toolbar 即可
8、注意： btn-group-lg 仅仅是放大按钮，不能将所有的按钮作为连接在一起的按钮组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>按钮组</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <!--引入Jquery的核心js文件-->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <!--引入BootStrap的核心js文件-->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
         按钮组
            1、 使用一个类名为 btn-group 的 div 包裹整个按钮组
            2、 使用标签 button 、a、span 制作按钮，需要指定类名.btn
            3、 使用 span 制作图标
            4、 大小分类: btn-group-lg btn-group btn-group-sm btn-group-xs
            5、 等分按钮: 自适应分组按钮 btn-group-justified
            6、 默认为水平，使用 btn-group-vertical 制作垂直按钮组
            7、 按钮工具栏: 在外层套用 .btn-toolbar 即可
            8、 注意：btn-group-lg 仅仅是放大按钮，不能将所有的按钮作为连接在一起的按钮组
      -->
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">下拉链接 1</a></li>
            <li><a href="#">下拉链接 2</a></li>
        </ul>
    </div>
</div>

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">下拉链接 1</a></li>
            <li><a href="#">下拉链接 2</a></li>
        </ul>
    </div>
</div>

</body>
</html>

八、导航
使用下拉与按钮组合可以制作导航
要点:

1、基本样式: .nav 与 "nav-tabs"、 "nav-pills"组合制作导航
2、分类:
1)、标签型 (nav-tabs)导航
2)、胶囊形(nav-pills)导航
3)、堆栈(nav-stacked)导航
4)、自适应(nav-justified)导航
5)、面包屑式(breadcrumb)导航，单独使用样式，不与 nav 一起使用,直接加入到 ol、 ul 中即可，
一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）
3、状态:
1)、选中状态 active 样式
2)、禁用状态: disable
4、二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>导航</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <!--引入Jquery的核心js文件-->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <!--引入BootStrap的核心js文件-->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
         1、 基本样式: .nav 与 “nav-tabs”、“nav-pills”组合制作导航
         2、 分类:
            1)、标签型 (nav-tabs)导航
            2)、胶囊形(nav-pills)导航
            3)、堆栈(nav-stacked)导航
            4)、自适应(nav-justified)导航
            5)、面包屑式(breadcrumb)导航 ，单独使用样式，不与 nav 一起使用,直接加入到 ol、ul 中即可，
            一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）
         3、状态:
            1)、选中状态 active 样式
            2)、禁用状态: disable
         4、二级菜单


         面包屑式导航

         分页导航
            页码导航:ul 标签上加 pagination [pagination-lg | pagination-sm]
            翻页导航: ul 标签上加 pager

      -->

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>
<hr />
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>
<hr />
<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>
<hr />
<p>面包屑式导航</p>
<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ul>

<hr />
<p>分页导航</p>
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><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="#">&raquo;</a></li>
</ul>
<hr />
<p>翻页导航</p>
<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

</body>
</html>

九、缩略图: thumbnail

**
**缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的
实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容，按钮等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>缩略图</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <!--引入Jquery的核心js文件-->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <!--引入BootStrap的核心js文件-->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/gyy.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 class="col-md-3">
            <div class="thumbnail">
                <img src="img/gyy.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 class="col-md-3">
            <div class="thumbnail">
                <img src="img/gyy.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 class="col-md-3">
            <div class="thumbnail">
                <img src="img/gyy.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>


</body>
</html>

十、面板

默认的 .panel 组件所做的只是设置基本的边框（border）和内补
（padding）来包含内容。
.panel-default：默认样式
.panel-heading：面板头
.panel-body：面板主体内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>面板</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>

<!--
    默认的 .panel 组件所做的只是设置基本的边框（border）和内补 （padding）来包含内容。
    .panel-default：默认样式
    .panel-heading：面板头
    .panel-body：面板主体内容
-->
<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">
            带有 title 的面板标题
        </h3>
    </div>
    <div class="panel-body">
        <div style="height: 300px;">
            我是内容
            <ul class="list-group">
                <li class="list-group-item">免费域名注册</li>
                <li class="list-group-item active">免费 Window 空间托管</li>
                <li class="list-group-item">图像的数量</li>
                <li class="list-group-item">24*7 支持</li>
                <li class="list-group-item">每年更新成本</li>
            </ul>
        </div>

    </div>
</div>


</body>
</html>

最后编辑于：2019.06.03 23:28:46

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 201,681评论 5赞 474
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,710评论 2赞 377
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 148,623评论 0赞 334
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,202评论 1赞 272
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,232评论 5赞 363
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,368评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,795评论 3赞 393
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,461评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,647评论 1赞 295
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,476评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,525评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,226评论 3赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,785评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,857评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,090评论 1赞 258
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,647评论 2赞 348
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,215评论 2赞 341

Bootstrap-06(/2019/6/2)

Bootstrap

三、 栅格网格系统(Grid System)

推荐阅读更多精彩内容

三、栅格网格系统(Grid System)