Bootstrap学习

Bootstrap–前端框架
第一部分 全局样式
1.表格
1》基本表格

<table class="table">
      <thead>
          <tr>
              <td>#</td>
              <td>a</td>
              <td>b</td>
              <td>c</td>
          </tr>
      </thead>
      <tbody>
            <tr>
              <td>1</td>
              <td>a</td>
              <td>b</td>
              <td>c</td>
            </tr>
            <tr>
              <td>2</td>
              <td>a</td>
              <td>b</td>
              <td>c</td>
            </tr>
            <tr>
              <td>3</td>
              <td>a</td>
              <td>b</td>
              <td>c</td>
            </tr>
            <tr>
              <td>4</td>
              <td>a</td>
              <td>b</td>
              <td>c</td>
            </tr>
      </tbody>
</table>

2》.table-striped ———————–斑马线
.table-bordered ———————– 添加边框
.table-hover ——————————鼠标悬停响应
3》响应式表格
添加父容器 —————————- .table-responsive

2.表单
1》基本样式
.form-control ——————– width:100%

<form>
    <div class="from-group">
         <label for="a">name : </label>
         <input type="text" class="form-control" id="a" placeholder="名字">
    </div>
</form>

2》内联表单 ———————- .form-inline

<form class="form-inline">
    <div class="form-group">
         <label for="a" >name : </label>
         <input type="text" class="form-control" id="a" placeholder="名字">
    </div>
    <div class="form-group">
         <label for="b" >password : </label>
         <input type="password" class="form-control" id="b" placeholder="密码">
    </div>
</form>

3》水平表单

<form class="form-horizontal">
    <div class="form-group">
         <label for="a" class="col-lg-2 control-label">name : </label>
         <div class="col-lg-10">
             <input type="text" class="form-control" id="a" placeholder="名字">
         </div>
    </div>
</form>

二、第二部分 组件
1.布局–栅格系统
1》容器
-container-fluid – 流体布局
-container –固定布局 width:1170px 970px 750px auto –(移动优先)
注意：最好不要让容器嵌套，同一个页面可以有不同个容器，比如头尾流动，内容固定。假如不想让容器宽度变化，可以给其加一个宽度，赋予其优先级(!important)
2.栅格系统
1》包裹— .row
子元素— .col-lg-* —12格 —浮动布局
.col-lg-*
.col-md-*
.col-sm-*
.col-xs-* —–规定了垂直排列的阈值

注意使用组合方式—可以实现过多效果

      <div class="row">
            <div class="col-lg-3 col-md-6 "><p></p></div>
            <div class="col-lg-3 col-md-6 "><p></p></div>
            <div class="col-lg-3 col-md-6 "><p></p></div>
            <div class="col-lg-3 col-md-6 "><p></p></div>
      </div>

2》列偏移— col-lg-offset-* 向右偏移

排序— col-lg-push-*
col-lg-pull-*

   <div class="row">
        <div class="col-lg-3 col-lg-push-9 "><p></p></div>
        <div class="col-lg-9 col-lg-pull-3"><p></p></div>
   </div>

3》清除浮动

 <div class="row">
      <div class="col-lg-6">lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll!</div>
       <div class="col-lg-3">fffffffffffffffffffff</div>
       <div class="col-lg-3">ffffffffffffffffffff</div>
       <div class="col-lg-3">fffffffffffffffffffff</div>
</div>

<div class="row">
            <div class="col-lg-6">llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</div>
            <div class="col-lg-3">fffffffffffffffffffff</div>
            <div class="col-lg-3">ffffffffffffffffffff</div>
            <div class="clearfix"></div>
            <div class="col-lg-3">fffffffffffffffffffff</div>
</div>

3.响应式工具
1》visible
visible-lg-block
-md-block
-lg-inline-block —在此分辨之上是显示的

2》hidden-sm —-在此分辨率之下隐藏

4.字体图标

  <div class="glyphicon glyphicon-search"></div>

5.按钮
1》 基类 btn
btn-link btn-default btn-success………. —-颜色
btn-lg btn-sm btn-xs —-大小
active disabled —-状态
btn-block —块级

 <input type="button" class="btn btn-block btn-success" value="按钮">

2》按钮组
添加父容器 ——. btn-group

    <div class="btn-group">
         <button class="btn btn-primary">btn</button>
         <button class="btn btn-primary">btn</button>
         <button class="btn btn-primary">btn</button>
    </div>

btn-group-justified ———————-自适应对齐（注意：仅适用于a标签，如果button\input需要添加父容器.btn-group）

<div class="btn-group btn-group-justified">
         <a class="btn btn-primary">btn</a>
         <a class="btn btn-primary">btn</a>
         <a class="btn btn-primary">btn</a>
</div>

垂直排列 ———-btn-group-vertical（注意此时不要添加btn-group）

    <div class="btn-group-vertical">
         <a class="btn btn-primary">btn</a>
         <a class="btn btn-primary">btn</a>
         <a class="btn btn-primary">btn</a>
    </div>

3》添加箭头 —–.caret （尽量使用a\button标签）

<a class="btn btn-primary">btn<span class="caret"></span></a>
<a class="btn btn-primary dropup">btn<span class="caret"></span></a>

4》下拉菜单
data-* ——-js触发器

基本样式

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

6.选项卡
1》
头部 ———–.nav .nav-tabs
自适应 ——-.nav-justified
线条自适应 ——-.nav-tabs-justified
药丸 ——-.nav-pills
垂直 ——-.nav-stacked

 <ul class="nav nav-pills nav-justified">
         <li class="active dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home<span class="caret"></span></a>
              <ul class="dropdown-menu btn-block">
                   <li class="text-center"><a href="#">Home</a></li>
                   <li class="text-center"><a href="#">Home</a></li>
              </ul>
         </li>
         <li ><a href="#">Home</a></li>
         <li ><a href="#">Home</a></li>
</ul>

2》主体
类名 ———————- .tab-content

<ul class="nav nav-pills nav-justified">
         <li class="active dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home<span class="caret"></span></a>
              <ul class="dropdown-menu btn-block">
                   <li class="text-center"><a href="#a" data-toggle="tab">Home</a></li>
                   <li class="text-center"><a href="#b" data-toggle="tab">Home33</a></li>
              </ul>
         </li>
         <li ><a href="#c" data-toggle="tab">Home</a></li>
         <li ><a href="#d" data-toggle="tab">Home</a></li>
</ul>
<ul class="tab-content">
         <li id="a" class="tab-pane active">aaaaaaaaa</li>
         <li id="b" class="tab-pane ">bbbbbbbbb</li>
         <li id="c" class="tab-pane ">ccccccccc</li>
         <li id="d" class="tab-pane ">ddddddddd</li>
</ul>

7.导航条
1》基类 ————— .nav .navbar
logo —————添加父容器 .navbar-header
导航 ————— .navbar-nav

 <nav class="nav navbar-default mystyle">
            <div class="container">
                  <div class="navbar-header">
                      <a class="navbar-brand" href="#"><img src="img/new_logo.ede2316d.png" /></a>
                  </div>
                  <form class="navbar-form navbar-left">
                      <div class="input-group">
                        <input type="text" class="form-control" id="exampleInputAmount" placeholder="搜索">
                        <a class="input-group-addon btn"><span class="glyphicon glyphicon-search"></span></a>
                      </div>
                  </form>
                  <ul class="nav navbar-nav navbar-left">
                      <li><a href="#">首页</a></li>
                      <li><a href="#">话题</a></li>
                      <li><a href="#">发现</a></li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                      <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册知乎</a></li>
                      <li><a href="#">登录</a></li>
                  </ul>
                  <button class="btn btn-success navbar-btn navbar-right">提问</button>
            </div>
</nav>

2》响应式
注意：需要给需要折叠的内容加父容器 class=”collapse navbar-collapse”

 <nav class="nav navbar-inverse">
            <div class="container">
                  <div class="navbar-header">
                      <button class="navbar-toggle" data-toggle="collapse" data-target="#myNav" >
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">logo</a>
                  </div>
                  <div id="myNav" class="collapse navbar-collapse">
                      <ul class="nav navbar-nav">
                           <li class="active"><a href="#">猫</a></li>
                           <li><a href="#">狗</a></li>
                           <li><a href="#">兔</a></li>
                      </ul>
                  </div>
            </div>
</nav>

8.路径导航
标签 ——————————- ol
类名 ——————————– .breadcrumb（面包屑效果）

     <ol class="breadcrumb">
         <li><a href="">世界</a></li>
         <li><a href="">动物</a></li>
         <li class="active">猫</li>   //最后一项没必要再加链接
     </ol>  

9.分页
1》标签 —————————–ul
类名 —————————– .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>

2》翻页

<ul class="pager">
    <li class="previous"><a href="#">pre</a></li>
    <li class="next"><a href="#">next</a></li>
</ul>

10.徽章

11.巨幕

<div class="jumbotron">
     <div class="container">
          <h1>巨幕</h1>
          <p>10.1  相约青岛</p>
          <button type="button" class="btn btn-primary">了解详情</button>
     </div>
</div>

12.警告框
1》普通警告框

     <div class="alert alert-warning">警告！</div>
     <div class="alert alert-info">信息</div>

2》可关闭的警告框

<div class="alert alert-warning">警告！</div>
<div class="alert alert-info alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" >&times;</button>
        <p>关闭</p>
</div>

13.进度条
有两层组成 容器————— .progresee
包裹————– .progress-bar

<div class="container">
     <div class="progress">
          <div class="progress-bar progress-bar-success" style="width:60%" >60%</div>
     </div>
</div>

14.媒体对象

     <div class="media">
          <div class="media-left media-middle">
                <a href="#"><img src="img/new_logo.ede2316d.png"></a>
          </div>
          <div class="media-body">
                <h3 class="media-heading">描述</h3>
                <div class="media">
                      <div class="media-left">
                           <a href="#"><img src="img/new_logo.ede2316d.png"></a>
                      </div>
                      <div class="media-body">
                           <p>媒体列表的层叠</p>
                      </div>
                </div>
          </div>
     </div>

15.面板

      <div class="panel panel-primary">
           <div class="panel-heading">
                <h3>标题</h3>
           </div>
           <div class="panel-body">
                <p>llllllllllllllllllllllllllll</p>
           </div>
           <div class="panel-footer">
                 <p>这是页脚</p>
           </div>
      </div>