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>