Bootstrap总结

                                                                                                                          Bootstrap主要应用总结

<p>

    文件说明：

   Bootstrap.less文件：设置全局的排版和链接显示风格，但是其中去掉Body的margin属性，使用@baseFontFamily,@baseFontStyle,@linkColor等变量来控制基本排版

    布局（layout）:创建页面基础模板的布局：分为固定式布局（Fixed）和流式布局（Fluid）

       排版（Typography）,t表格（Table）, 表单（Forms）,按钮（Buttons）四大内容

    自定义网格系统：通过修改variabless.less的参数值来定义网格系统 。参数包括：@gridColumns(列数)：默认值：12;@gridColumnWidth(每列的宽度):默认值：60px; @gridGutterWidth(列间距)：默认值20px

    获得更多设备兼容：通过修改responsive.less

    网格系统：默认的Bootstrap网格系统提供了一个宽940px和12列的网格分布，更好的适应各种终端设备

    第一行：分为 12 ：共12个网格 940/12px,每个网格的宽度

    第二行：分为宽度均为 4 的三列：共3个网格

    第三行：分为宽度为 4 和宽度为 8 的两列： 共2个网格

    第四行：分为宽度均为 6 的两列：共两个网格

    第五行：宽度为 12 的一列： 共一个网格

    实例：实现第三行宽度为4和宽度为8的两个div

</p>

 

<div class="row">

   <div class="span4">这是第三行宽度为4的div布局样式</div>

   <div class="span8">这是第三行宽度为8的div布局样式</div>

</div>

<p>

   Bootstrap:需要偏移时提供了offset属性来操作

    实例：offset

</p>

<div class="row">

   <div class="span4">这是第三行宽度为4的div布局样式</div>

   <div class="span4 offset4">这是第三行宽度为4的需要偏移的div布局样式</div>

</div>

<p>

   Bootstrap：嵌套列实现页面更复杂的布局，只需要在原有的div中加入row和相应的长度的span*div

    注意：嵌套的div长度之和不能大于他的父div的长度，否则会出现益处叠加，父div的长度值可以修改

    实例：嵌套

</p>

<div class="row">

   <div class="span12">这是第一层是父元素

       <div class="row">

           <div class="span6">这是在嵌套中的两个长度均为6的div</div>

           <divclass="span6">这是在嵌套中的两个长度均为6的div</div>

       </div>

   </div>

</div>

   <p>

   Bootstrap：流式格网系统（Fluid grid system）

    注意：流式格网系统使用的‘%’而不是固定的‘px’来确定页面要素的宽度，只需要简单的将row改为row-fluid 就可以将fixed 行改为流式（fluid）

    嵌套的流式网格和固定的网格不同，不需要匹配父元素的宽度，子元素要用100%来表示占满父元素的页面宽度

    实例：流式格网系统

</p>

   <div class="row-fluid">

       <div class="span4">这是不同宽度为4的流式格网系统</div>

       <div class="span8">这是不同宽度为8的流式格网系统</div>

   </div>

   <p>

       Bootstrap：固定布局（fixed）和流式布局（Fluid）

       实例：固定布局和流式布局

   </p>

   <div class="container">

       这是固定是布局

   </div>

   <div class="container-fluid">

       <div class="row-fluid">

           <div class="span2">

                这是左边导航栏内容    流式布局

           </div>

           <div class="span10">

                这是右边内容          流式布局

           </div>

       </div>

   </div>

 

<p>

   排版（Typography）包括：标题（Headings）,段落（paragraphs）,列表（lists）以及其他内联元素，通过修改variables.less的两个变量：@baseFontSize和@baseLineHeight

    注意：'<strong>和<em>两个标签：都是强调文本，缩写：<abbr>。引用文字：<blockquote>:引用的文字内容和<small>是可选的元素'

    实例：

</p>

<div calss="row">

   <div class="span6">

       <blockquote class="pull-right">

           <p>凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。

           </p> 守夜人军团总司令.<small>蒙奇.D.<cite title="">张三</cite></small>

       </blockquote>

   </div>

   <div class="span6">

       <blockquote class="pull-right">

           <p>凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。

           </p> 守夜人军团总司令.<small>蒙奇.D.<cite title="">张三</cite></small>

       </blockquote>

   </div>

</div>

<p>

    列表（Lists）：提供了三种标签来表现不同类型的列表。"<ul>":表示无需列表，<ulcalss="unstyled">表示无样式的无需列表，<ol>：表示有序列表M<dl>表示描述列表

   <dl class="dl-horizontal">:表示竖排描述列表

</p>

<p>

    表格（Table）:<table><tr><th><td>等标签来表现表格，主要提供了四个css的类来控制表格的边和结构。参数如下：

    名字        类名      描述

   Default    :None      :没有样式，只有行和列

   Basic      table       只有在行间有竖线

   Bordered   table-bordered    圆角和添加外边框

   Zebra-stripe  table-striped   为奇数行添加灰色的背景色

   Condensed     table-condensed   将横向的padding对切

    实例：表格制作

    注意：.control-group:控制表单输入，错误等状态

</p>

<div class="span8">

   <form class="form-horizontal">

       <fieldset>

           <div class="control-group">

                <labelclass="control-label" for="focusedInput" >FocusedInput</label>

                <div class="controls">

                    <inputclass="input-xlarge focused" id="focusedInput"type="text" value="This is focused"/>

                </div>

           </div>

           <div class="control-group success">

                <label class="control-label"for="selectError">Select with success</label>

                <divclass="controls">

                    <selectid="selectError">

                       <option>1</option>

                       <o
4000
ption>2</option>

                        <option>4</option>

                       <option>1</option>

                       <option>1</option>

                    </select>

                    <spanclass="help-inline">Woohoo!</span>

                </div>

           </div>

           <div class="form-actions">

                <buttontype="submit" class="btn btn-primary">Savechange</button>

                <buttonclass="btn">Cancel</button>

           </div>

       </fieldset>

   </form>

</div>

<p>

    表单（Forms）:

    名字       类名      描述

   Vertical   .form-vertical  堆放式，可控制的左对齐标签

   Inline     .form-inline     左对齐标签和简约的内联控制块

   Search     .form-search     方大圆角

   Horizontal  .form-horizontal  左漂浮，右对齐标签

 

</p>

 

<p>

    按钮（Buttons）:样式包括多种形式：btn,btn-primary,btn-info,btn-success等不同颜色的按钮，也可以通过.btn-large .btn-mini等css的class 控制按钮的大小

    能够同时用在标签：a,button, input 上

</p>

 

<p>

   Bootstrap:内建大量的组件，包括：按钮（buttons）导航（Navigation）,标签（Labels）,徽章（Badges）,排版（Typography）,缩略图（thumbnails）,提醒（Alert）

    进度条（progressbar）,杂项（Miscellaneous）

    按钮组（buttongroup）:只需要使用：btn-group类和一系列的<a>或者一系列的<button>标签可以生成一个按钮或者按钮工具条

    实例：按钮式下拉菜单

</p>

<div class="span4 wellpricehover">

   <h2>按钮组</h2>

   <div class="btn-group" style="margin: 9px 0">

       <button class="btn btn-largeben-primary">Left</button>

       <button class="btn btn-largeben-primary">Middle</button>

       <button class="btn btn-largeben-primary">Right</button>

   </div>

</div>

<div class="span4 wellpricehover">

   <h2>按钮工具条</h2>

   <div class="btn-toolbar">

       <div class="btn-group">

            <button class="btn">11这是第一组</button>

           <button class="btn">2</button>

           <button class="btn">3</button>

       </div>

       <div class="btn-group">

           <button class="btn">1这是第二组</button>

           <button class="btn">2</button>

           <button class="btn">3</button>

       </div>

   </div>

</div>

<div class="span8 wellpricehover">

   <h3>按钮下拉菜单</h3>

   <p></p>

   <div class="btn-toolbar">

       <div class="btn-group">

           <button class="btn btn-primary  dropdown-toggle"data-toggle="dropdown">Action<spanclass="caret"></span></button>

           <ul class="dropdown-menu">

                <li><ahref="#">Active</a></li>

                <li><ahref="#">Another</a></li>

                <li><ahref="#">Something else here</a></li>

                <liclass="divider"></li>

                <li><ahref="#">Separated link</a></li>

           </ul>

       </div><!--btn-group这是一个按钮下拉菜单组 不同分组样式有：btn-primary;btn-danger; btn-warning; btn-success; btn-info; btn-inverse-->

   </div>

</div>

 

<p>

    轻量单行（Nav,tab,and pills):所有的导航组件包括tabs,pills,lists等标签，都必须使用 .nav的类实现基础的导航标签。还可以利用.nav-stacked类来实现堆叠式---就是竖式导航条

    实例：四种导航条形式

</p>

<div class="row">

   <div class="span5 well pricehover">

        <h2>基础tabs导航条(横排)</h2>

       <ul class="nav nav-tabs">

           <li class="active"><ahref="#">Home</a></li>

           <li><a href="#">Profile</a></li>

           <li><a href="#">Messages</a></li>

       </ul>

   </div>

   <div class="span5 well pricehover">

       <h3>基础pills导航条(横排)</h3>

       <ul class="nav nav-pills">

           <li class="active"><ahref="#">Home</a></li>

           <<li><a href="#">Profile</a></li>

           <li><a href="#">Messages</a></li>

        </ul>

   </div>

   <div class="row">

       <div class="span5 well pricehover">

           <h3>竖排tabs导航条(竖排)</h3>

           <ul class="nav nav-tabs nav-stacked">

                <liclass="active"><ahref="#">Home</a></li>

                <<li><a href="#">Profile</a></li>

                <li><ahref="#">Messages</a></li>

           </ul>

       </div>

       <div class="span5 well pricehover">

           <h3>竖排pills导航条(竖排)</h3>

           <ul class="nav nav-pills nav-stacked">

                <liclass="active"><ahref="#">Home</a></li>

                <<li><ahref="#">Profile</a></li>

                <li><ahref="#">Messages</a></li>

           </ul>

       </div>

   </div>

</div>

<p>

    导航的下拉列表：就是列表与导航双向组合：

    实例：导航下拉列表

</p>

<div class="span5 wellpricehover">

   <h2>基础Nav List</h2>

   <ul class="nav nav-list">

       <li class="nav-header">List header</li>

       <li class="active"><ahref="#">Home</a></li>

       <li><a href="#">Library</a></li>

       <li><a href="#">Application</a></li>

       <li class="nav-header">Another list header</li>

       <li><a href="#">Setting</a></li>

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

       <li><a href="#">Help</a></li>

   </ul>

</div>

 

<div class="span5 wellpricehover">

   <h2>图标List</h2>

   <ul class="nav nav-list">

       <li class="nav-header">List header</li>

       <li class="active"><a href="#"><iclass="icon-white icon-home"></i>Home</a></li>

       <li><a href="#"><iclass="icon-book"></i>Library</a></li>

       <li><a href="#"><iclass="icon-pencil"></i>Application</a></li>

       <li class="nav-header">Another list header</li>

       <li><a href="#">Setting</a></li>

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

       <li><a href="#">Help</a></li>

   </ul>

</div>

<div class="row">

   <div class="span5 well pricehover">

       <h3>pills式的下拉菜单</h3>

       <ul class="nav nav-pills">       <!--还有tabs式的下拉菜单：nav-tabs-->

           <li class="active"><ahref="#">Home</a></li>

           <li><a href="#">Help</a></li>

           <li class="dropdown"><aclass="dropdown-toggle" data-toggle="dropdown"href="#">Dropdown<bclass="caret"></b></a>

                <ulclass="dropdown-menu">

                    <li><ahref="#">Active</a></li>

                    <li><ahref="#">Another</a></li>

                    <li><ahref="#">Something else here</a></li>

                    <liclass="divider"></li>

                    <li><ahref="#">Separated link</a></li>

                </ul>

           </li>

       </ul>

   </div>

</div>

<p>

    导航条（Navbar）：基础类是：navbar-fixed-top(置顶)或者navbar-fixed-bottom(置底)，navbar中还可以使用form要素：比如：navbar-form,还支持响应式操作，通过

   .nav-collapse或者直接是.collapse类实现

    实例：导航条总结：包括下拉菜单，排列，搜索框等

</p>

<div class="span10 wellpricehover">

   <div class="navbar">

       <div class="nav-bar-inner">

           <div class="container">

                <a class="btnbtn-navbar" data-toggle="collapse"data-target=".nav-collapse" href="#">

                    <spanclass="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <spanclass="icon-bar"></span>

                </a>

                <a class="brand"href="#">Project name</a>

                <divclass="nav-collapse">

                    <ulclass="nav">

                        <li class="active"><ahref="#">Home</a></li>

                        <li><ahref="#">Link</a></li>

                        <li><ahref="#">Link</a></li>

                        <li><ahref="#">Link</a></li>

                        <liclass="dropdown"><a href="#" class="dropdown-toggle"data-toggle="dropdown">Dropdown<bclass="caret"></b></a>

                            <ulclass="dropdown-menu">

                                <li><ahref="#">Action</a></li>

                                <li><ahref="#">Another</a></li>

                                <li><ahref="#">Anotherwww</a></li>

                                <liclass="divider"></li>

                                <liclass="nav-header"> Nav header</li>

                                <li><ahref="#">afadfadfa</a></li>

                                <li><ahref="#">argrgggg</a></li>

                            </ul>

                        </li>

                    </ul>

                   <!-------------------------------搜索样式------------------------>

                    <formclass="navbar-search pull-left" action="">

                        <inputclass="search-query span2" type="text"placeholder="Search"/>

                    </form>

                    <!--导航右半部分-->

                    <ul class="navpull-right">

                        <li><ahref="#">Link</a></li>

                        <liclass="divider-vertical"></li>

                        <liclass="dropdown"><a href="#"class="dropdown-toggle"data-toggle="dropdown">Dropdown<b class="caret"></b></a>

                            <ulclass="dropdown-menu">

                                <li><ahref="#">Active</a></li>

                                <li><ahref="#">Another active</a></li>

                                <li><ahref="#"> Something else here</a></li>

                                <liclass="divider"></li>

                                <li><ahref="#">Separated link</a></li>

                            </ul>

                        </li>

                    </ul>

                </div>

           </div>

       </div>

   </div>

</div>

 

<p>

    页码（Pagination）：包括两种翻页组件，六种样式,在此只列举了四种

</p>

<div class="span10 wellpricehover">

   <ul class="breadcrumb">

       <li class="active">Home</li>

   </ul>

   <ul class="breadcrumb">

       <li><a href="#">Home</a> <spanclass="divider">/</span></li>

       <li class="active">Library</li>

   </ul>

   <ul class="breadcrumb">

       <li><a href="#">
b3b4
Home</a><spanclass="divider">/</span></li>

       <li><a href="#">Library</a><spanclass="divider">/</span></li>

       <li class="active">Data</li>

   </ul>

</div>

 

<div class="span5 wellpricehover">

   <div class="pagination">

       <ul>

           <li class="disabled"><ahref="#">«</a></li>

           <!--或者<li class="disabled"><ahref="#">.....</a></li>-->

           <li class="active"><ahref="#">1</a></li>

           <li><a href="">2</a></li>

           <li><a href="">3</a></li>

           <li><a href="">4</a></li>

           <li><a href="">»</a></li>

       </ul>

   </div>

</div>

<!--第三种：-->

<div class="span5 wellpricehover">

       <ul class="pager">

           <li><a href="#">Previous</a></li>

           <li><a href="#">Next</a></li>

       </ul>

   <!--或者-->

   <ul class="pager">

       <li class="previous"><ahref="">← Older</a></li>

       <li class="next"><a href="">Newer&rarr</a></li>

   </ul>

</div>

 

<p>

    标签（Label）,徽章（Badges）, 排版（Typographic）,缩略图（Thumbnails）

    参数类：.label  .badge  .label-success   .badge-success   .label-warning   .label-important|info|inverse   等这几种类，组成标签和相应的徽章

    实例：

</p>

 

<div>

<span class="badgebadge-info">10</span>

</div>

 

<p>

    排版（Typographic）:涉及到两个组件：Hero-unit,Page-header.Hero-unit是一个轻量级可扩展的组件

    实例：

</p>

<divclass="container-fliud">

   <div class="row-fliud">

       <div class="span5 pricehover hero-unit">

           <h1>Hello World!</h1>

           <p>简单的hero unit</p>

       </div>

   </div>

   <div class="row-flliud">

       <div class="span5 well pricehover">

           <h1>Hello World!<small>小蚊子</small></h1>

           <div>

                排版（Typographic）:涉及到两个组件：Hero-unit,Page-header.Hero-unit是一个轻量级可扩展的组件

           </div>

       </div>

   </div>

</div>

 

<p>

    缩略图（Thumbnails）:是作为图片，视频，文字的格网结构展示，只需要thumbnails标签可实现

    缩略图包括：默认缩略图，可定制缩略图，环绕式缩略图

    实例：

</p>

<div class="span6">

   <h2>环绕式缩略图</h2>

   <ul class="thumbnails">

       <li class="span4"><a class="thumbnail"href="#">

           <img src="http://placehold.it/360x286"alt=""/>

       </a></li>

       <li class="span2"><a class="thumbnail"href="#">

           <img src="http://placehold.it/160x120"alt=""/>

       </a></li>

   </ul>

</div>

<div class="span6">

   <h2>可定制缩略图</h2>

   <ul class="thumbnails">

       <li class="span3">

           <div class="thumbnail">

                <imgsrc="http://placehold.it/260x180" alt=""/>

                <divclass="caption">

                   <h5>saregseryw5</h5>

                </div>

           </div>

       </li>

   </ul>

</div>

<p>

    提醒区域（Alerts）,进度条（ProgressingBar）

    实例：

</p>

<div class="span3 wellpricehover">

   <h3>alert例子</h3>

   <div class="alert">

       <button class="close"data-dismiss="alert">×</button>

       <strong>测试</strong>这是alert info 提醒区

   </div>

</div>

<div class="span3 wellpricehover">

   <div class="progress"></div>

</div>