bootstrap的简单笔记

浏览器支持：所有主流浏览器都支持Bootstrap。
容易上手：只要有html、css的基础，就可以开始学习。
响应式设计：Bootstrap的响应式css能够自适应台式机、平板电脑和手机。
简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
自定义JQuery插件，完整的类库，基于Less等。
三个必要文件：

 <link href="css/bootstrap.min.css" rel="stylesheet">
 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src=js/bootstrap.min.js "></script>

文本

1、标题
class=“h1”，class=“h2”。。。。

<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

2、内联子标题

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>

3、强调段落
class=“lead”

<p class="lead">
这是一个演示引导主体副本用法的实例。
</p>

4、强调内容

 <small>（设置文本为父文本大小的 85%）、、<em>或<i>来实现文本斜体
 <b>和<strong>标签让文本直接加粗。

<p>平台<small>你值得拥有</small></p>
<p>平台<strong>学习</strong>学习</p>
<p>平台<em>学习</em>平台</p>

class=“text-muted”、class=“text-waring”…

<p class="text-muted">博思智能学习平台</p>
<p class="text-warning">博思智能学习平台</p>
<p class="text-danger">博思智能学习平台</p>
<p class="text-info">博思智能学习平台</p>
<p class="text-success">博思智能学习平台</p>

文本对齐

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>

特别声明：目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。

列表

有序列表：有序列表是指以数字或其他有序字符开头的列表
无序列表：没有特定顺序的列表，着重号开头的列表
定义列表：在这种类型的列表中，每个列表可以包含

<dt>和<dd>元素

<h4>有序列表</h4>
	<ol>
		<li>item1</li><li>item2</li><li>item3</li><li>item4</li>
	</ol>
	<h4>无序列表</h4>
	<ul>
		<li>item1</li><li>item2</li><li>item3</li><li>item4</li>
	</ul>
	<h4>未定义样式列表</h4>
	<ul class="list-unstyled">
		<li>item1</li><li>item2</li><li>item3</li><li>item4</li>
	</ul>
	<h4>内联列表</h4>
	<ul class="list-inline">
		<li>item1</li><li>item2</li><li>item3</li><li>item4</li>
	</ul>
	<h4>定义列表</h4>
	<dl>
	    <dt>demo1</dt><dd>我是demo1</dd><dt>demo2</dt><dd>我是demo2</dd>
	</dl>
	<h4>水平定义列表</h4>
	<dl class="dl-horizontal">
	    <dt>demo1</dt><dd>我是demo1</dd><dt>demo2</dt><dd>我是demo2</dd>
	</dl>

表格

class=“table” 、class=“table table-striped”( 内的行上看到条纹)、class=“table table-bordered”(到每个元素周围都有边框，且占整个表格是圆角的)、class=“table table-hover”(指针悬停在行上时会出现浅灰色背景)、class=“table table-condensed”(行内边距（padding）被切为两半，让表看起来更紧凑)
为表格添加颜色：

<table class="table">
   <caption>上下文表格布局</caption>
   <thead>
      <tr>
         <th>产品</th>
         <th>付款日期</th>
         <th>状态</th>
      </tr>
   </thead>
   <tbody>
      <tr class="info">
         <td>产品1</td>
         <td>23/11/2015</td>
         <td>待发货</td>
      </tr>
      <tr class="success">
         <td>产品2</td>
         <td>10/11/2015</td>
         <td>发货中</td>
      </tr>
      <tr  class="warning">
         <td>产品3</td>
         <td>20/10/2015</td>
         <td>待确认</td>
      </tr>
      <tr  class="danger">
         <td>产品4</td>
         <td>20/10/2015</td>
         <td>已退货</td>
      </tr>
   </tbody>
</table>

自适应表格，加上<div class="table-responsive"></div>

<div class="table-responsive">
   <table class="table">
 </div>

属性可以多个：

<table class="table table-bordered table-striped table-hover">

表单

搜索表单
行内表单
水平表单

按钮

按钮样式：
class=“btn btn-default(primary/success/info/warning/danger)”
按钮尺寸
class=“btn lg(sm/xs/block)”
禁止按钮
class=“btn disabled”

   <button type="button" class="btn btn-defalut btn-lg">默认按钮(大)</button>
    <button type="button" class="btn btn-primary btn-sm">原始按钮(小)</button>
    <button type="button" class="btn btn-success btn-xs">成功按钮(特别小)</button>
    <button type="button" class="btn btn-info btn-block">信息按钮(块级)</button>
    <button type="button" class="btn btn-warning">警告按钮</button>
    <button type="button" class="btn btn-danger disabled">危险按钮</button>
    <button type="button" class="btn btn-link disabled">链接按钮(禁止按钮)</button>

  <a class="btn btn-default" href="#" role="button">链接</a>

建议在button元素使用class,避免跨浏览器的不一致问题

图片

class=“img-rounded”
class=“img-circle”
class=“img-polaroid”:添加一些内边距和一个灰色的边框

图标

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

小结：
css样式，基本上都是定义好的类，例如：标题怎么设置，列表的样式，几种不同表格的样式，表单的样式，还有块状按钮，按钮状态分别用什么类，以及最后的图片和图标。只要熟记得就行

组件

下拉菜单
第一步：使用一个名为“dropdown”的容器包裹了整个下拉菜单元素：<div class=”dropdown”></div>。

第二步：使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，例如：data-toggle=“dropdown”。

第三步：下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:

用于展示可切换、有关联的一系列链接。与下拉菜单JavaScript插件配合使用。

<div class="dropdown"></div>

 <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" 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="#">逛街</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">吃饭</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">下棋</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">游泳</a>
            </li>
        </ul>
    </div>

  <li role="presentation" class="divider"></li>
  下拉分割线

class=“disabled”、class=“hover(active)”，使得下拉菜单的一些状态
下拉菜单的子菜单
通过添加一些简单的标记，可以给下拉菜单增加一个二级菜单，这个二级菜单会在鼠标悬停时自动展现。在现有的下拉菜单中，给任意的li添加.dropdown-submenu即可自动赋予一个二级菜单。
按钮组
等分按钮尽量使用<a>来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不太友好

 <div class="btn-wrap">
        <div class="btn-group btn-group-justified btn-group-vertical">
            <a class="btn btn-default" href="#">首页</a>
            <a class="btn btn-default" href="#">产品展示</a>
            <a class="btn btn-default" href="#">案例分析</a>
            <a class="btn btn-default" href="#">联系我们</a>
        </div>
    </div>

导航元素
class=“nav nav-tabs”(标签式)
class=“nav nav-pills”( 胶囊)
class=“nav nav-pills nav-stacked”(垂直堆叠)
加上这个class="btn-group-justified"使得变成自适应按钮组，现在导航元素 加上class=“nav-justified”，让它自适应
导航菜单添加下拉菜单
带有下拉菜单的标签
向标签添加下拉菜单的步骤如下：
以一个带有 class=“nav” 的无序列表开始。
添加class=“nav nav-table”
添加带有class=“dropdown-men” 的无序列表。

<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
         Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
         <li><a href="#">Swing</a></li>
         <li><a href="#">jMeter</a></li>
         <li><a href="#">EJB</a></li>
         <li class="divider"></li>
         <li><a href="#">分离的链接</a></li>
      </ul>
   </li>
   <li><a href="#">PHP</a></li>
</ul>

导航列表：
class=“nav nav-list”

<ul class="nav nav-list">
  <li class="nav-header">List header</li>
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">java</a></li>
  <li><a href="#">php</a></li>
  <li><a href="#">bootstrap</a></li>
</ul>

可切换的标签导航栏
为了让标签页可切换，需要在class="tab-content"中创建一个带有唯一ID的class=“tab-pane”。

<div class="tabbable"> 
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">php</a></li>
    <li><a href="#tab2" data-toggle="tab">bootstrap</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>like php</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>like bootstrap</p>
    </div>
  </div>
</div&