Bootstrap

• Bootstrap必须在HTML5中使用

• Bootstrap对标题进行了优化部署

  
  标题

h1~h3的margin为20px；h4-h6的margin为10px
定义了6个类名。h1 h2 h3 h4 h5 h6
大小：h1为36px，依次减6

• 副标题的使用 副标题

1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、由于<small>内的文本字体在h1_{h3内，其大小都设置为当前字号的65%；而在h4}h6内的字号都设置为当前字号的75%；

• 段落可以通过“.lead”突出文本
• 强调相关的类

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

强调文本类

• text-justify是两端对齐

• “.list-unstyled”去除无序列表前面的点，同时去除边距

  
  去点列表
• 内联列表 “.list-inline”,将垂直列表换成水平列表，用于制作导航栏
• 水平定义列表通过“.dl-horizontal”实现，但只有屏幕大与768px的时候才有效果
• 代码的显示

1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

• 通过在pre标签添上类名".pre.scrollable"使代码区域最高为340px，超出这个高度时出现滚动条

• table

☑ .table：基础表格
☑ .table-striped：斑马线表格
☑ .table-bordered：带边框的表格
☑ .table-hover：鼠标悬停高亮的表格
☑ .table-condensed：紧凑型表格
☑ .table-responsive：响应式表格

• Bootstrap的表单默认是垂直的，要使用水平的表单需要添加“.form-horizontal”

  
  .form-horizontal
• ".form-inlline"将表单元素设置成内联元素，在一行显示
• 关于表单输入框，要使输入框不出错，需要添加类名“.form-control”
  -单选复选按钮想要水平显示，添加类名“.checkbox-inline”,".radio-inline"

• button

  
  button
• 表单控制大小

可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
这两个类适用于表单中的input，textarea和select控件

• 设置焦点状态
  焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果
  要让控件在焦点状态下有下面样式效果，需要给控件添加类名“.form-control”

  
  右为焦点状态
• 表单禁用状态
  Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是，Bootstrap框架做了一些样式风格的处理
  示例:在需要禁用的表单控件上加上“disabled”即可

<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>

对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的

<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
    …
</fieldset>
</form>

• 表单验证
  在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
  1、.has-warning:警告状态（黄色）
  2、.has-error：错误状态（红色）
  3、.has-success：成功状态（绿色）
  使用的时候只需要在form-group容器上对应添加状态类名。
• 按钮大小
  .btn-lg 变大
  .btn-sm 变小
  .btn-xs 超小
• 使用.btn-block使得按钮宽度充满整个容器
• 图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

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

• 图标定制网站

• 网格系统
  列偏移 col-md-offset-* col-xs-不支持列偏移
  列排序 col-md-pull-
  列嵌套

-下拉菜单 必须引入1.90版本以上的jQuery和bootstrap.js才能使用
添加分割线

<li role="presentation" class="divider"></li>

菜单头

<li role="presentation" class="dropdown-header">菜单头</li>

• 按钮组的写法

<div class="btn-toolbar">
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
</div>

• 使用"btn-group-vertical"使按钮组垂直排列
• 使用“btn-group-justified”使按钮等分父容器

导航

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

默认是水平导航，通过active和disabled来设置默认选中和不可选

默认样式

-胶囊型导航,ul添加类“.nav-pills”

胶囊型导航

-设置垂直导航，ul添加类“.nav-stacked”

垂直导航

• 自适应导航，ul添加类".nav-justified"，自适应宽度

  
  自适应导航
• 二级导航，添加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><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
      </ul>
  </li>

二级导航

• 面包屑导航，主要用于提醒用户现在所在页面位置

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>

面包屑导航

导航条

• 基础导航条

<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
      <li class="dropdown">
        <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
        </ul>
     </li>
      <li><a href="##">名师介绍</a></li>
      <li><a href="##">成功案例</a></li>
      <li><a href="##">关于我们</a></li>
     </ul>
  <form action="##" class="navbar-form navbar-left" rol="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="请输入关键词" />
    </div>
     <button type="submit" class="btn btn-default">搜索</button>
   </form>
</div>

基础导航条

• 添加二级菜单和状态与上面相同
• 添加表单

<form action="##" class="navbar-form navbar-left" rol="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="请输入关键词" />
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
</form>

• 固定导航条

.navbar-fixed-top：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom：导航条固定在浏览器窗口底部

• 响应式导航条

• 反色导向条，外部div添加类".navbar-inverse"
  

  反色导向条

• 分页导航

<ul class="pagination pagination">
  <li><a href="#">&laquo;第一页</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最后一页&raquo;</a></li>
</ul>   

可通过类“.pagination-lg”和类“.pagination-sm”来控制按键的大小

分页导航

• 翻页

<!--代码-->
<ul class="pager">
  <li><a href="#">&laquo;上一页</a></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul> 
<!--左右对齐-->
<ul class="pager">
  <li class="previous"><a href="#">&laquo;上一页</a></li>
  <li class="next"><a href="#">下一页&raquo;</a></li>
</ul> 
<!--禁止状态-->
<ul class="pager">
  <li class="disabled"><span>&laquo;上一页</span></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul>  

翻页

• 标签

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span> 

标签

• 徽章

<span class="badge">3</span>

靠右对齐

<span class="badge pull-right">3</span>

徽章

其他控件

• 缩略图

<a href="#" class="thumbnail">
    <img alt="100%x180" src="" style="height: 180px; width: 100%; display: block;" >
</a>

• 警示框
  默认

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div> 

默认

可关闭的警示框

<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    恭喜您操作成功！
</div>

可关闭

带链接的警示框

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> 
    You successfully read 
    <a href="#" class="alert-link">this important alert message</a>
</div>

带链接

• 进度条

<h2>基本进度条</h2>
<div class="progress">
     <div class="progress-bar" style="width:40%">
    </div>
</div> 
<h2>彩色进度条</h2>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div> 
<h2>条纹进度条</h2>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<h2>动态条纹进度条</h2>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div> 
<h2>带Label的进度条</h2>
<h5>进度条1</h5>
<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>  
</div>  
<h5>进度条2</h5> 
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

进度条
带数字进度条

• 媒体对象

• 列表组

• 面板
  (见示例代码)