以下内容均可在bootstrap官网 css内找到。菜鸟教程

学习视频引用地址：https://www.bilibili.com/video/BV1TU4y1p7zU?p=1

一、了解bootstrap

1.栅格系统

2.布局容器

container :容器

响应式布局：根据设备的分辨率自动调整布局

两个不能嵌套

container 类 用于固定宽度并支持响应式布局的容器

.container-fluid 完整宽度

3.栅格参数

4.列组合

将一行分成几份

根据栅格系统，将一行分为12等份，一行的总和超过12等份，就会自动移动到下一行

    <div class="container">
        <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-2">2</div>

        </div>

5.列偏移

将某一列偏移几个格子，一行不能超过12。超过12就到下一行了

 <div class="col-md-1 col-md-offset-1" >2</div>

6.列排序

col-md-push-* ：向后移动几个格子，如果后面有格子，就会被后面的格子覆盖，显示不出来

col-md-pull-* ：向前移动几个格子，如果前面有格子，就会覆盖前面的格子。

        <div class="row">
            <div class="col-md-1" style="background-color: black;">1</div>
            <div class="col-md-1 col-md-push-3" style="background-color: orange;">2</div>
            <div class="col-md-1" style="background-color: blue;">3</div>
            <div class="col-md-1" style="background-color: skyblue;">4</div>


        </div>

7.列嵌套

每一列可以继续嵌套12列

        <div class="row">
            <div class="col-md-1" style="background-color: black;">1</div>
            <div class="col-md-1" style="background-color: orange;">2</div>
            <div class="col-md-1" style="background-color: blue;">3</div>
            <div class="col-md-1" style="background-color: skyblue;">4
                <div class="row">
                    <div class="col-md-1">4-1</div>
                    <div class="col-md-1">4-1</div>
                    <div class="col-md-1">4-1</div>
                    <div class="col-md-1">4-1</div>
                    <div class="col-md-1">4-1</div>
                    <div class="col-md-1">4-1</div>
                    <div class="col-md-1">4-1</div>
                    <div class="col-md-1">4-1</div>
                    <div class="col-md-1">4-1</div>

                </div>
            </div>
            
            <div class="col-md-1"></div>
        </div>

二、常用样式

1.标题

h1-h6都可以用，加了bootstrap后不如原来的粗 黑

small标签可以增加副标题

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

2.段落

普通的段落离边界会有一段空白，加bootstrap后没有空白间距。

也可以加

.lead

来增大增粗

<p class="lead">...</p>

3.强调-情景

根据使用场景选择不同的颜色

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

4.强调背景颜色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

5.对齐效果

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

6.列表操作 list


.dl-horizontal

横向排版 dl 列表 且 dt 的宽度为160px，当内容超过宽度 显示为省略号

    <!-- 普通样式 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <dl>
        <dt>title</dt>
        <dd>content</dd>
    </dl>

    <!-- bootstrap样式 -->
    <ul class="list-unstyled">  无样式列表
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol class="list-inline">   内联样式
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <dl class="dl-horizontal">  横向排版
        <dt>title</dt>
        <dd>content</dd>
        <dt>111111111111111111111111111111111111111111111</dt>
        <dd>22222222222222222222222222222222222222222222</dd>
    </dl>

7.代码

    <code>saad</code>
    <kbd>ctrl</kbd>
    <pre>
        显示文本代码
        显示标签代码需要转义字符
        &nbsp; &lt;h2&gt;
    </pre>
    <pre class="pre-scrollable">
        <ol>代码超过长度就会出现滚动条
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </pre>

8.表格

<table class="table">基础样式
  ...
</table>
<table class="table table-striped">斑马表格
  ...
</table>
<table class="table table-hover">鼠标悬停
  ...
</table>
<!-- On rows -->  样式
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

9.表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

bootstarp给表单里的标签都设置了

.form-control

每个标签直接使用会有不一样的样式

不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

<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>

   <input type="text" />
   <select class="form-control" multiple> 下拉框  multiple多选
       <option >河北</option>
       <option >上海</option>
       <option >北京</option>
   </select>
   <textarea rows="" cols="" class="form-control"> 文本框
       
   </textarea>

复选框

  <!-- 普通多选checkbox 单选 radio -->
   <label>1</label><input type="checkbox" class="checkbox"/>选项1
   <label>2</label><input type="radio" />男
   <label>3</label><input type="radio" />女
   <!-- bootstrap 单选和多选 -->
   <div class="checkbox"">
       <label>
        <input type="checkbox" name="" id="" value="" />
        多选
       </label>
      
   </div>
   <div class="radio">
       <label>
        <input type="radio" />
        单选
       </label>
       
   </div>   

   <!-- 内联多选和单选 -->
   <label class="checkbox-inline">
       <input type="checkbox" name="" id="" value="" />多选
   </label>
   <label class="radio-inlie">
       <input type="radio" name="" id="" value="" />单选
   </label>

10.按钮

用bootstrap 可以 改变按钮颜色和大小。还可以把不是按钮的标签变成按钮

改变颜色

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

按钮大小

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

按钮禁用


禁用后不可选。直接添加disabled 按钮不可用，点击也没用

给样式添加disabled 看着禁用，但还可以用

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

11.表单布局

水平排列

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

内联表单


.form-inline

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

12.图片

响应式图片

<img src="..." class="img-responsive" alt="Responsive image">

图片形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

13.导航

navigation:导航

container：容器

role: 角色

brand: 品牌 商标

默认导航栏

默认样式：

.navbar

、

navbar-default

、

role=" navigation"

这三个添加给 nav 标签，是使用的基本样式

导航标题：

.navbar-header

添加给div标签 ， 标题还包含一个带有

.navbar-brand

的 a 标签

导航栏链接小标题：

.nav

、

.navbar-nav

添加给无序列表即可

下拉菜单：在无序列表里的 li 标签中 添加

.dropdown

即可。里面包含本菜单的标题，

.dropdown-toggle

、

data-toggle="dropdown"

添加a标签，作为下拉菜单名字。 下拉菜单的内容放在

.dropdown-menu

的无序列表里

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">默认导航</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

响应式导航栏

给导航栏添加响应式特性，需要折叠的内容，需要放在 div 中，div 含有

.collapse

、

.navbar-collapse

, 剩下的和默认导航栏一样。

折叠起来的导航栏实际上是一个带有 class

.navbar-toggle

及两个 data- 元素的按钮。

第一个是

data-toggle

，用于告诉 JavaScript 需要对按钮做什么，

第二个是

data-target

，指示要切换到哪一个元素。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">响应式导航</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

14.分页导航

pagination :页码

默认分页

含有

.pagination

的无序列表

<ul class="pagination">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

分页的状态


.disabled

的 li 标签，禁止选择的页数


.active

的 li 标签，选中分页的样式

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><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>

分页的大小

<ul class="pagination pagination-lg">
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul><br>
<ul class="pagination">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul><br>
<ul class="pagination pagination-sm">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

翻页

<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

翻页的状态

<ul class="pager">
    <li class="previous disabled"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

15. 下拉菜单

和导航的下拉菜单一样

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

16.模态框

模态框是个隐藏的内容，需要通过指定的属性打开模态框 对应的id。因为模态框有时候会很多，无法确定哪个对应哪个，需要匹配id。

第一种打开模态框：

通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target=”#identifier” 或 href=”#identifier” 来指定要切换的特定的模态框（带有 id=“identifier”）。

第二种打开模态框：

通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框：

$(’#identifier’).modal(options)

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>