Bootstrap学习笔记2

蒙才

2023-12-01

1. 表单

1.1 表单提示信息

在Bootstrap中使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部，另外让一般提示信息显示在控件的后面，也就是同一水平显示，需要使用Bootstrap的网格系统

<div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态" >
    <span class="help-block">你输入的信息是错误的</span>
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
</div>
<form role="form">
  <div class="form-group">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <div class="row">
      <div class="col-xs-6">
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
      </div>
       <span class="col-xs-6 help-block">你输入的信息是正确的</span>
    </div>
  </div> 
</form> 
// 或者在样式中加一个类 help-inline
.help-inline{
  display:inline-block;
  padding-left:5px;
  color: #737373;
}

1.2 按钮

   <button class="btn" type="button">基础按钮.btn</button>  
   <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
   <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
   <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
   <button class="btn btn-info" type="button">信息按钮.btn-info</button> 
   <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
   <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
   <button class="btn btn-link" type="button">链接按钮.btn-link</button>

1.2.1 多标签支持

// 唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”
<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

1.2.2 按钮大小

// 唯一一点不能缺少“.btn”类名
<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>

1.2.3 块状按钮

Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值

<button class="btnbtn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btnbtn-primary btn-block" type="button">正常按钮</button>
<button class="btnbtn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

1.2.4 按钮状态

Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）

活动状态

当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于<button>元素是通过“:active”伪类实现，而对于<a>这样的标签元素则是通过添加类名“.active”来实现。
禁用状态

方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名“disabled”

两者的主要区别是：“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> 
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>

1.3 图像

img-responsive：响应式图片，主要针对于响应式设计
img-rounded：圆角图片
img-circle：圆形图片
img-thumbnail：缩略图片

使用方法：使用方法非常简单，只需要在<img>标签上添加对应的类名

设置图片大小：由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <img   alt="140x140" src="http://placehold.it/140x140">
        <div>默认图片</div>
    </div>
    <div class="col-sm-4">
      <img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> 
        <div>圆角图片</div>
    </div>
    <div class="col-sm-4">
      <img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
        <div>圆形图片</div>
    </div>
      <div class="row">
        <div class="col-sm-6">
          <img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> 
            <div>缩略图</div>
        </div>
        <div class="col-sm-6">
          <img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140" /> 
          <div>响应式图片</div>
        </div>
      </div>
  </div>
</div>

1.4 图标

在Bootstrap框架中有一个fonts的目录，这个目录中提供的字体文件就是用于制作icon的字体文件。自定义完字体之后，需要对icon设置一个默认样式，在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码。所有icon都是以”glyphicon-”前缀的类名开始，然后后缀表示图标的名称

查询图标网站：http://getbootstrap.com/components/#glyphicons
所有字体图标：https://how2j.cn/k/boostrap/boostrap-font/484.html 示例5

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

2. 网络系统

2.1 工作原理

数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)
在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12
具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

2.2 基本用法

列组合

列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
</div>

列偏移

只需要在列元素上添加类名col-md-offset-*(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。但使用col-md-offset-*对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示

<div class="container">
<h4>列向右移动四列的间距</h4>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
    <div class="col-md-2">.col-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
  </div>
</div>
<br />
<h4>发生行断裂</h4>
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
    <div class="col-md-2">.col-md-3</div>
  </div>
</div>

列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名col-md-push-*和col-md-pull-*(其中星号代表移动的列组合数)。

<div class="container">
  <div class="row">
 <!-- .col-md-8原本位置在左侧，所以向右移动4列-->
      <div class="col-md-8 col-md-push-4">.col-md-8</div>
     <!-- .col-md-4原本位置在右侧，向左移动8列-->
      <div class="col-md-4 col-md-pull-8">.col-md-4</div>
  </div>
</div>

列的嵌套

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

<div class="container">
  <div class="row">
    <div class="col-md-8">
      我的里面嵌套了一个网格
      <div class="row">
        <div class="col-md-8">col-md-8</div>
        <div class="col-md-4">col-md-4</div>
      </div>
    </div>
    <div class="col-md-4">
        我的里面嵌套了一个网格
         <div class="row">
        <div class="col-md-9">col-md-9</div>
        <div class="col-md-3">col-md-3</div>
      </div>
    </div>
  </div>
</div>

3. 菜单、按钮及导航

3.1 下拉菜单

注意：在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件，并且因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果

3.1.1 基本用法

使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:<div class="dropdown"></div>
使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:data-toggle="dropdown"

下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:<ul class="dropdown-menu">

 <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" 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="#">下拉菜单项1</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项2</a></li>
  </ul>
</div> 
  <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

3.1.2 下拉分隔线

在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能

<li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

3.1.3 菜单标题

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">第一部分菜单头部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">第二部分菜单头部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>

3.1.4 对齐方式

Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名。与此同时，还有一个类名刚好与“dropdown-menu-right”相反的类名“dropdown-menu-left”，其效果就是让下拉菜单与父容器左边对齐，其实就是默认效果

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
   …
  </ul>
</div>

3.1.5 菜单项状态

下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）；还有当前状态（.active）和禁用状态（.disabled），这两种状态使用方法只需要在对应的菜单项上添加对应的类名

<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

3.2 按钮

3.2.1 按钮组

按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行，使用一个名为“btn-group”的容器，把多个按钮放到这个容器中

<div class="btn-group">
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-backward"></span>
  </button>
   …
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-forward"></span>
  </button>
</div>

注意：除了可以使用<button>元素之外，还可以使用其他标签元素，唯一要保证的是：不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”

3.2.2 按钮工具栏

将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，就可以实现复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组等。另外按钮组大小只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组（ .btn-group-lg:大按钮组；.btn-group-sm:小按钮组；.btn-group-xs:超小按钮组）

3.2.3 嵌套分组

把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果：只需要把当初制作下拉菜单的“dropdown”的容器换成btn-group，并且和普通的按钮放在同一级

<div class="btn-group">
    <button class="btn btn-default" type="button">首页</button>
    <button class="btn btn-default" type="button">产品展示</button>
    <div class="btn-group">
       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
       <ul class="dropdown-menu">
             <li><a href="##">公司简介</a></li>
             <li><a href="##">企业文化</a></li>
        </ul>
    </div>
</div>

3.2.4 垂直分组

只需要把水平分组的“btn-group”类名换成btn-group-vertical即可

<div class="btn-group-vertical">
    <button class="btnbtn-default" type="button">首页</button>
    <div class="btn-group">
       <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
       <ul class="dropdown-menu">
          <li><a href="##">公司简介</a></li>
       </ul>
    </div>
</div>

3.2.5 等分按钮

等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个btn-group-justified类名

<div class="btn-group btn-group-justified">
    ...
</div>

3.2.6 按钮下拉菜单

按钮下拉菜单其实就是普通的下拉菜单，只不过把<a>标签元素换成了<button>标签元素。唯一不同的是外部容器“div.dropdown”换成了div.btn-group

<div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单
        <span class="caret"></span></button>
    <ul class="dropdown-menu">
    	<li><a href="##">按钮下拉菜单项</a></li>
    </ul>
  </div>

3.2.7 按钮的向下向上三角形

是通过在<button>标签中添加一个<span>标签元素，并且命名为“caret”，有时三角方向需要朝上显示，实现方法：需要在“.btn-group”类上追加“dropup”类名

<div class="btn-group">
    button..
      <span class="caret"></span></button>
    ul..
</div>

3.3 导航

3.3.1 标签形tab导航

标签形导航，也称为选项卡导航，标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名。另外有的选项卡还带有禁用状态，实现这样的效果，只需要在标签项上添加“class=“disabled””即可

<ul class="nav nav-tabs">
     <li><a href="##">Home</a></li>
     <li class="disabled"><a href="##">CSS3</a></li>
    <li class="active"><a href="##">Sass</a></li>
</ul>

3.3.2 胶囊形(pills)导航

胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”即可

3.3.3 垂直堆叠的导航

制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可
垂直堆叠导航与胶囊形导航相比，主要是让导航项不浮动，让其垂直排列，然后给相邻导航项留有一定的间距
下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果，只需要添加在导航项之间添加<li class="nav-divider"></li>

3.3.4 自适应导航

自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。在制作自适应导航时使用类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用

3.3.5 导航加下拉菜单（二级导航）

只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul

<ul class="nav nav-pills">
  <li class="active"><a href="##">首页</a></li>
  <li class="dropdown">
      <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="##">CSS3</a></li>
        <li class="nav-divider"></li>
        <li><a href="##">jQuery</a></li>
      </ul>
  </li>
 <li><a href="##">关于我们</a></li>
</ul>

3.3.6 面包屑式导航

面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。在Bootstrap框架中面包屑也是一个独立模块组件：

LESS版本：对应源文件breadcrumbs.less
Sass版本：对应源文件_breadcrumbs.scss
编译出来的版本：源码对应bootstrap.css文件第4112行～第4129行

使用方法：使用方式就很简单，为ol加入breadcrumb类：