bootstrap 学习笔记(部分)

这个课程中的boostrap是3.0+版本的。（2.0与3.0有区别）

bootstrap中的JS是依赖于jquery的，所以需要事先引用jquery（1.9.0版本以上）。

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Bootstrap的HTML标准模板</title>

        <!-- Bootstrap -->

        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!--你自己的样式文件 -->

        <link href="css/your-style.css" rel="stylesheet">

        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->

        <!--[if lt IE 9]>

        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

        <![endif]-->

    </head>

    <body>

        <h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->

        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->

        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    </body>

</html>

bootstrap基本的HTML模板

使用h1类~h6类

<div class="h1">Bootstrap标题一</div>

在boostrap中使用标题（h1）

使用b或者strong来加粗字体

<p>我是一个段落，这个段落中“<strong>强调</strong>”一词将会加粗显示。</p>

使用strong来加粗字体

效果：我是一个段落，这个段落中“强调”一词将会加粗显示。

使用i或者em来使文字斜体

<p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>

使用i和em使文字斜体

效果：我在慕课网上跟大漠一起学习Bootstrap的使用。我一定要学会Bootstrap。

使用强调类名，通过改变文本的颜色，来起到强调的作用

<div class="text-muted">.text-muted 效果</div>

<div class="text-primary">.text-primary效果</div>

<div class="text-success">.text-success效果</div>

<div class="text-info">.text-info效果</div>

<div class="text-warning">.text-warning效果</div>

<div class="text-danger">.text-danger效果</div>

强调类名

效果：　.text-muted 效果

　　　　.text-primary效果

　　　　.text-success效果

　　　　.text-info效果

　　　　.text-warning效果

　　　　.text-danger效果

文本对齐

<p class="text-left">我居左</p>

<p class="text-center">我居中</p>

<p class="text-right">我居右</p>

<p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>

文本对齐

效果：

网格系统：

<div class="container">

  <div class="row">

    <div class="col-xs-3">.col-xs-3</div>

    <div class="col-xs-6">.col-xs-6</div>

    <div class="col-xs-3">.col-xs-3</div>

  </div>

    <div class="row">

    <div class="col-sm-3">.col-sm-3</div>

    <div class="col-sm-6">.col-sm-6</div>

    <div class="col-sm-3">.col-sm-3</div>

  </div>

</div>

xs和sm、md、lg的区别

列偏移（效果等同于margin-left或者margin-right）

<div class="container">

<div class="row">

<div class="col-md-4">.col-md-4</div>

<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>

<div class="col-md-2">.col-md-3</div>

</div>

<div class="row">

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>

</div>

</div>

列偏移

效果：

不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示

<div class="row">

  <div class="col-md-3">.col-md-3</div>

  <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>

  <div class="col-md-4">col-md-4</div>

</div>

列断行

效果：

列排序：

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。

<div class="container">

  <div class="row">

    <div class="col-sm-4 ">.col-sm-4</div>

    <div class="col-sm-8 ">.col-sm-8</div>

  </div>

  <div class="row">

    <div class="col-sm-4 col-sm-push-8">.col-sm-4</div>

    <div class="col-sm-8 col-sm-pull-4">.col-sm-8</div>

  </div>

</div>

列排序

效果图：（将左右两列调换了一下位置）

列嵌套：（在一列中，嵌套多行，实现整个页面的布局）

  <div class="row">

    <div class="col-xs-8">

      我的里面嵌套了一个网格

      <div class="row">

        <div class="col-xs-6">col-md-6</div>

        <div class="col-xs-6">col-md-6</div>

      </div>

    </div>

    <div class="col-xs-4">col-md-4</div>

  </div>

列嵌套

表单：

　　水平表单（表单元素纵向排列）

水平表单的要求

1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。

<form class="form-horizontal" role="form">

  <div class="form-group">

    <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">

    </div>

  </div>

  /*label的for属性对应的值是input的id*/

  /*label的for属性对应的值是input的id*/

  /*label的for属性对应的值是input的id*/

  <div class="form-group">

    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox"> 记住密码

        </label>

      </div>

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default">进入邮箱</button>

    </div>

  </div>

</form>

水平表单

效果：

内联表单：（横向排列）

<form class="form-inline" role="form">

  <div class="form-group">

    <label class="sr-only" for="exampleInputEmail2">邮箱</label>

    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">

  </div>

  <div class="form-group">

    <label class="sr-only" for="exampleInputPassword2">密码</label>

    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">

  </div>

  <div class="checkbox">

    <label>

      <input type="checkbox"> 记住密码

    </label>

  </div>

  <button type="submit" class="btn btn-default">进入邮箱</button>

</form>

内联表单

效果：

表单元素的使用：

input(输入框)

　1、在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式

2、为了让控件在各种表单风格中样式不出错，需要添加类名“form-control

<form role="form">

  <div class="form-group">

    <input type="email" class="form-control" placeholder="Enter email">

    <input type="text" class="form-control" placeholder="Enter Username">

  </div>

</form>

input(输入框)

下拉菜单（与原始的html元素用法一致）

<form role="form">

  <div class="form-group">

    <select class="form-control">

      <option>1</option>

      <option>2</option>

      <option>3</option>

      <option>4</option>

      <option>5</option>

      </select>

  </div>

  <div class="form-group">

      <select multiple class="form-control">

        <option>1</option>

        <option>2</option>

        <option>3</option>

        <option>4</option>

        <option>5</option>

      </select>

  </div>

下拉菜单

文本域（textarea）(与原始html元素用法一致，只是cols属性不需要设置值了。（bootstrap宽度自适应~~~）)

<form role="form">

  <div class="form-group">

    <textarea class="form-control" rows="3"></textarea>

  </div>

</form>

文本域（textarea）

单、复选框

　　1、不管是checkbox还是radio都使用label包起来了
　　2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
　　3、radio连同label标签放置在一个名为“.radio”的容器内
　　　在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式

<form role="form">

  <div class="checkbox">

    <label>

      <input type="checkbox" value="">

      记住密码

    </label>

  </div>

  <div class="radio">

    <label>

      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>

      喜欢

    </label>

  </div>

    <div class="radio">

    <label>

      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">

      不喜欢

    </label>

  </div>

</form>

单、复选框

设置表单元素的大小：

　　1、input-sm:让控件比正常大小更小
　　2、input-lg:让控件比正常大小更大

设置表单元素的大小

效果：

禁用状态（在属性中添加一个disabled就可以了）　　

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

禁用状态

验证状态

　　1、.has-warning:警告状态（黄色）
　　2、.has-error：错误状态（红色）
　　3、.has-success：成功状态（绿色）

<form role="form">

  <div class="form-group has-success has-feedback">

    <label class="control-label" for="inputSuccess1">成功状态</label>

    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >

    <span class="glyphicon glyphicon-ok form-control-feedback"></span>

  </div>

  <div class="form-group has-warning has-feedback">

    <label class="control-label" for="inputWarning1">警告状态</label>

    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">

    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>

  </div>

  <div class="form-group has-error has-feedback">

    <label class="control-label" for="inputError1">错误状态</label>

    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

    <span class="glyphicon glyphicon-remove form-control-feedback"></span>

  </div>

</form>

验证状态

　效果：

按钮

　1、为了保持不同浏览器之间的兼容性，尽量使用A标签或者button标签来生成按钮

2、在制作等分按钮的时候，尽量使用A标签来制作按钮，因为在使用button标签元素时，使用display:table在部分浏览器下并不友好。

so:尽量使用A标签来做按钮　　　

   <button class="btn" type="button">基础按钮.btn</button>

   <button class="btn btn-default" type="button">默认按钮.btn-default</button>

   <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>

   <button class="btn btn-success" type="button">成功按钮.btn-success</button>

   <button class="btn btn-info" type="button">信息按钮.btn-info</button>

   <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>

   <button class="btn btn-danger" type="button">危险按钮.btn-danger</button>

   <button class="btn btn-link" type="button">链接按钮.btn-link</button>

按钮的样式类

    <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>

    <button class="btn btn-primary" type="button">正常按钮</button>

    <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

     <button type="button" class="btn btn-info btn-xs">超小按钮</button>

按钮大小

    <button class="btn btn-primary btn-block btn-lg" type="button">大型按钮.btn-lg</button>

    <button class="btn btn-primary btn-block" type="button">正常按钮</button>

    <button class="btn btn-primary btn-block btn-sm" type="button">小型按钮.btn-sm</button>

    <button class="btn btn-primary btn-block btn-xs" type="button">超小型按钮.btn-xs</button>

块状按钮

Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。

 <a class="btn btn-info glyphicon glyphicon-step-backward"></a>

在按钮中使用图标

效果：

更多图标：http://getbootstrap.com/components/#glyphicons

表格：4种附加样式+1个支持响应式的表格

.table：基础表格

.table-striped：斑马线表格

.table-bordered：带边框的表格

.table-hover：鼠标悬停高亮的表格

.table-condensed：紧凑型表格

.table-responsive：响应式表格（当浏览器的可视区域小于768的时候，表格底部就会出现滚动条，反之则消失）

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

   <thead>

     <tr>

       <th>表格标题</th>

      <th>表格标题</th>

      <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

      <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

      <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

鼠标悬停高亮的表格

效果：

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

  <thead>

    <tr>

      <th>类名</th>

      <th>描述</th>

    </tr>

  </thead>

  <tbody>

    <tr class="active">

      <td>.active</td>

      <td>表示当前活动的信息</td>

    </tr>

    <tr class="success">

      <td>.success</td>

      <td>表示成功或者正确的行为</td>

    </tr>

    <tr class="info">

      <td>.info</td>

      <td>表示中立的信息或行为</td>

    </tr>

    <tr class="warning">

      <td>.warning</td>

      <td>表示警告，需要特别注意</td>

    </tr>

    <tr class="danger">

      <td>.danger</td>

      <td>表示危险或者可能是错误的行为</td>

    </tr>

  </tbody>

</table>

在表格中，为每一行添加背景色

效果：

斑马线

bootstrap.css文件第1465行~第1468行：

.table-striped > tbody > tr:nth-child(odd) > td,

.table-striped > tbody > tr:nth-child(odd) > th {

background-color: #f9f9f9;

}

对于IE8以及其以下浏览器，没有背景条纹效果。

在3.3.5中，使用的选择器名字

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td （这段选择器，可以用来快速定位boostrap的样式表中样式规则，这样可以更改样式，以满足实际需求）

鼠标悬浮

鼠标悬浮高亮的效果主要是通过“hover”事件来实现，设置了“tr:hover”时的th、td的背景色为新颜色。
其源码请查看bootstrap.css文件中第1469行~第1472行：

.table-hover > tbody > tr:hover > td,

.table-hover > tbody > tr:hover > th {

background-color: #f5f5f5;

}

在3.3.5中，使用的选择器名字

.table-hover > tbody > tr:hover （这段选择器，可以用来快速定位boostrap的样式表中样式规则，这样可以更改样式，以满足实际需求）

 列表：

<ul>

    <li>无序列表信息1</li>

    <li>无序列表信息2</li>

    <li>无序列表信息3</li>

</ul>

<ol>

    <li>有序列表信息1</li>

    <li>有序列表信息2</li>

    <li>有序列表信息3</li>

</ol>

<dl>

    <dt>定义列表标题</dt>

    <dd>定义列表信息1</dd>

    <dd>定义列表信息2</dd>

</dl>

列表

效果：

内联列表：把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。——可用于水平导航的制作

<ul class="list-unstyled">

    <li>

        城市：

        <ul class="list-inline">

            <li>北京</li>

            <li>上海</li>

            <li>南京</li>

            <li>厦门</li>

        </ul>

    </li>

</ul>

内联列表

效果：

城市：

北京
上海
南京
厦门

定义列表：

<dl>

    <dt>北京</dt>

    <dd>北京是中国的首都，是政治文化集中地</dd>

</dl>

<dl>

    <dt>上海</dt>

    <dd>上海号称东方的巴黎</dd>

</dl>

定义列表

效果：

　　　　北京: 　北京是中国的首都，是政治文化集中地

　　　　上海: 　上海号称东方的巴黎

水平定义列表：大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。

<dl class="dl-horizontal">

    <dt>W3cplus</dt>

    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>

    <dt>慕课网</dt>

    <dd>一个专业的，真心实意在做培训的网站</dd>

    <dt>我来测试一个标题，我来测试一个标题</dt>

    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>

</dl>

水平定义列表

效果：

将代码显示在页面上（用的可能少）

code风格：

<div>Bootstrap的代码风格有三种：<code>&lt;code&gt;</code>、<code>&lt;pre&gt;</code>和<code>&lt;kbd&gt;</code></div>

pre风格：

<div>

<pre>

&lt;ul&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;/ul&gt;

</pre>

</div>

kbd风格：

<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

<p>请使用<kbd>ctrl+x</kbd>复制代码，然后使用<kbd>ctrl+shift+v</kbd>将复制的代码粘贴到需要的地方。</p>

代码

在代码中，要是碰到＜要使用编码< 来替代，＞使用>来替代

若给pre 加上class=‘pre-scrollable’的话，当pre高于340PX的时候，就会出现滚动条

bootstrap独立组件的使用

使用独立组件，需要引用boostrap.js，在引用bootstrap.js之前，一定要引用jquery

下拉菜单：　

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

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

2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle="dropdown"

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

<ul class="dropdown-menu">

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button" 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>

</ul>

</div>

下拉菜单

导航：

<ul class="nav nav-pills">

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

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

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

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

     <li class="disabled"><a href="##">Responsive</a></li>

</ul>

胶囊导航

效果：

还可以使用class='disabled' 来禁用导航按钮中的某一项

<li class="disabled"><a href="##">Responsive</a></li>

禁用其中一项

在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可：

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

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

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

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

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

     <li class="disabled"><a href="##">Responsive</a></li>

</ul>

垂直导航

效果：

如果需要导航自适应，只需要加类名 nav-justified就可以了（大于768px会横向排列导航，小雨这个数会纵向排列）

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

     <li class="active"><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>

自适应

导航加二级菜单（二级导航）：

<ul class="nav nav-pills">

  <li class="active"><a href="##">首页</a></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>

 <li><a href="##">关于我们</a></li>

</ul>

二级菜单

效果：

导航条：　　

　　第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

　　第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

<div class="navbar navbar-default" role="navigation">

     <ul class="nav navbar-nav">

         <li class="active"><a href="##">网站首页</a></li>

        <li><a href="##">系列教程</a></li>

        <li><a href="##">名师介绍</a></li>

        <li><a href="##">成功案例</a></li>

        <li><a href="##">关于我们</a></li>

     </ul>

</div>

最基本的导航

<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>

带表单的导航条

效果：

固定导航条只要在导航条最外部容器navbar上追加对应的类名即可：

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

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

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

　…

</div>

<div class="content">我是内容</div>

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">

　…

</div>

固定导航条

<div class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

     　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->

       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">

         <span class="sr-only">Toggle Navigation</span>

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

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

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

       </button>

       <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->

       <a href="##" class="navbar-brand">慕课网</a>

  </div>

  <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->

  <div class="collapse navbar-collapse navbar-responsive-collapse">

        <ul class="nav navbar-nav">

              <li class="active"><a href="##">网站首页</a></li>

              <li><a href="##">系列教程</a></li>

              <li><a href="##">名师介绍</a></li>

              <li><a href="##">成功案例</a></li>

              <li><a href="##">关于我们</a></li>

         </ul>

  </div>

</div>

响应式导航条

boostrap的分页并不带有功能，所有就不写了。要用到分页，直接用jPaginate来分页，其风格与boostrap差不多。

标签：（使用 label类就可以实现）

<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>

标签种类

徽章：（使用badge来实现）

<!--按钮勋章-->

<button class="btn btn-primary" type="button">

      Messages <span class="badge">4</span>

</button>

<!--navbar-default导航条勋章-->

<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><a href="##">系列教程</a></li>

        <li><a href="##">名师介绍</a></li>

        <li><a href="##">成功案例<span class="badge">23</span></a></li>

        <li><a href="##">关于我们</a></li>

    </ul>

</div>

徽章

警示框：

<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-info alert-dismissable" role="alert">

    <button class="close" type="button" data-dismiss="alert">&times;</button>

    请输入正确的密码

</div>

<div class="alert alert-warning alert-dismissable" role="alert">

    <button class="close" type="button" data-dismiss="alert">&times;</button>

    您已操作失败两次，还有最后一次机会

</div>

<div class="alert alert-danger 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>

<div class="alert alert-info" role="alert">

    <strong>Heads up!</strong>

     This

     <a href="#" class="alert-link">alert needs your attention</a>

     , but it's not super important.

</div>

<div class="alert alert-warning" role="alert">

    <strong>Warning!</strong>

     Better check yourself, you're

     <a href="#" class="alert-link">not looking too good</a>

     .

</div>

<div class="alert alert-danger" role="alert">

    <strong>Oh snap!</strong>

    <a href="#" class="alert-link">Change a few things up</a>

     and try submitting again.

</div>

有链接的警示框

进度条：

<div class="progress">

     <div class="progress-bar" style="width:40%">

    </div>

</div>

基本进度条

<div class="progress">

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

</div>

<div class="progress">

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

</div>

<div class="progress">

     <div class="progress-bar progress-bar-warning" style="width:80%"></div>

</div>

<div class="progress">

     <div class="progress-bar progress-bar-danger" style="width:50%"></div>

</div>

彩色进度条

<div class="progress progress-striped active">

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

</div>

<div class="progress progress-striped active">

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

</div>

<div class="progress progress-striped active">

    <div class="progress-bar progress-bar-warning" style="width:80%"></div>

</div>

<div class="progress progress-striped active">

    <div class="progress-bar progress-bar-danger" style="width:50%"></div>

</div>

动态条纹进度条

<div class="progress">

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

    <div class="progress-bar progress-bar-info" style="width:20%"></div>

    <div class="progress-bar progress-bar-warning" style="width:30%"></div>

    <div class="progress-bar progress-bar-danger" style="width:15%"></div>

</div>

层叠进度条

<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>

<div class="progress">

    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"   style="width:70%">70%</div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-warning"  role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div>

</div>

/*进度为0*/

<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>

</div>

带lable的进度条

列表组：

<ul class="list-group">

    <li class="list-group-item">揭开CSS3的面纱</li>

    <li class="list-group-item">CSS3选择器</li>

    <li class="list-group-item">CSS3边框</li>

    <li class="list-group-item">CSS3背景</li>

    <li class="list-group-item">CSS3文本</li>

</ul>

最基本列表组

<ul class="list-group">

    <li class="list-group-item">

        <span class="badge"></span>揭开CSS3的面

    </li>

    <li class="list-group-item">

        <span class="badge"></span>CSS3选择器

    </li>

    <li class="list-group-item">

        <span class="badge"></span>CSS3边框

    </li>

    <li class="list-group-item">

        <span class="badge"></span>CSS3背景

    </li>

    <li class="list-group-item">

        <span class="badge"></span>CSS3文本

    </li>

</ul>

带徽章的列表组

<ul class="list-group">

    <li class="list-group-item">

        <a href="##">揭开CSS3的面</a>

    </li>

    <li class="list-group-item">

        <a href="##">CSS3选择器</a>

    </li>

    <li class="list-group-item">

        <a href="##">CSS3边框</a>

    </li>

    <li class="list-group-item">

        <a href="##">CSS3背景</a>

    </li>

    <li class="list-group-item">

        <a href="##">CSS3文本</a>

    </li>

</ul>

带链接的列表组

<div class="list-group">

    <a href="##" class="list-group-item active"><span class="badge"></span>图解CSS3</a>

    <a href="##" class="list-group-item"><span class="badge"></span>W3cplus</a>

    <a href="##" class="list-group-item"><span class="badge"></span>慕课网</a>

    <a href="##" class="list-group-item disabled"><span class="badge"></span>Sass中国</a>

</div>

组合列表状态

<div class="list-group">

    <a href="##" class="list-group-item active"><span class="badge"></span>图解CSS3</a>

    <a href="##" class="list-group-item list-group-item-success"><span class="badge"></span>W3cplus</a>

    <a href="##" class="list-group-item list-group-item-info"><span class="badge"></span>慕课网</a>

    <a href="##" class="list-group-item list-group-item-warning"><span class="badge"></span>Sass中国</a>

    <a href="##" class="list-group-item list-group-item-danger"><span class="badge"></span>Mobile教程</a>

</div>

多彩列表组

面板：

/* panel-default 、 panel-success \ panel-info、panel-warning、panel-danger*/

<div class="panel panel-primary">

    <div class="panel-heading">图解CSS3</div>

    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>

    <div class="panel-footer">作者：大漠</div>

</div>

/* panel-heading 和 panel-footer 这两个div是可以拿掉的*/

带有头和尾的面板

带有头和尾的面板

媒体对象：

媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容

媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片

媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。

<div class="media">

    <a class="pull-right" href="#">

        <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">

      </a>

      <div class="media-body">

        <h4 class="media-heading">系列：十天精通CSS3</h4>

        <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>

      </div>

</div>

默认媒体对象

<div class="media">

    <a class="pull-left" href="#">

        <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">

    </a>

    <div class="media-body">

        <h4 class="media-heading">我是大漠</h4>

        <div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>

        <div class="media">

            <a class="pull-left" href="#">

                <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">

            </a>

            <div class="media-body">

                <h4 class="media-heading">慕课网</h4>

                <div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>

                <div class="media">

                    <a class="pull-left" href="#">

                        <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">

                    </a>

                    <div class="media-body">

                        <h4 class="media-heading">W3cplus</h4>

                        <div>W3cplus站上还有很多教程....</div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

媒体对象（嵌套）

Bootstrap V3.2中提供了12种JavaScript插件，他们分别是：　

☑ 动画过渡（Transitions）:对应的插件文件“transition.js”

☑ 模态弹窗（Modal）:对应的插件文件“modal.js”

☑ 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”

☑ 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”

☑ 选项卡（Tab）：对应的插件文件“tab.js”

☑ 提示框（Tooltips）：对应的插件文件“tooltop.js”

☑ 弹出框（Popover）：对应的插件文件“popover.js”

☑ 警告框（Alert）：对应的插件文件“alert.js”

☑ 按钮（Buttons）：对应的插件文件“button.js”

☑ 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”

☑ 图片轮播Carousel：对应的插件文件“carousel.js”

☑ 自动定位浮标Affix：对应的插件文件“affix.js”

使用bootstrap绘制一个响应式的页面：

bootstrap 学习笔记(部分)的更多相关文章

Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态加入导航条标题在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
Bootstrap学习笔记-布局
Bootstrap学习笔记-布局默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
Bootstrap学习笔记博客
本片博客用于记录之后要用到Bootstrap的学习笔记概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...
bootstrap学习笔记--bootstrap安装环境
Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...
Bootstrap学习笔记系列1-------Bootstrap网格系统
Bootstrap网格系统学习笔记 [TOC] 简单网格先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...
bootstrap 学习笔记（1）---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
bootstrap 学习笔记
bootstrap作为当下的流行框架不知道它怎么能行呢? 之前也看过好多bootstrap的网上教程,可是发现光看真的记不住,说起来也真是忧桑~重点还是要自己做才是真正的印象深刻.后来我发现解析模板是 ...

随机推荐

北上广Java开发月薪20K往上，该如何做，需要会写什么
这个问题可能很多人会说这只是大企业或者互联网企业工程师才能拿到.也许是的,小公司或者非互联网企业拿两万的不太可能是码农了,应该已经转管理.还有区域问题,这个不在我的考虑范围内,因为这方面除了北上广深杭 ...
linux命令详解——vim
显示行号:命令模式下set nu 定位到指定行: 命令模式下,:n 比如想到第2行,:2 编辑模式下,ngg 比如想到第5行 5gg(或者5G) 打开文件定位到指定行 vim +n te ...
使用go语言开发一个后端gin框架的web项目
用liteide来开发go的后端项目,需要注意的是环境变量要配置正确了主要是GOROOT, GOPATH, GOBIN, PATH这几个, GOPATH主要用来存放要安的包,主要使用go get 来 ...
【POJ2376】Cleaning Shifts
题目大意:区间最小覆盖问题. 题解:本身是一道贪心水题,但是细节还是比较多的,记录一下. 由于每个奶牛对答案的贡献是一样的,肯定要选择在满足条件的基础上能够拓展最多的那个奶牛.为了满足条件,对区间左端 ...
python -- 数据可视化（二）
python -- 数据可视化一.Matplotlib 绘图 1.图形对象(图形窗口) mp.figure(窗口名称, figsize=窗口大小, dpi=分辨率, facecolor=颜色) 如果 ...
k8sCronJob控制器
CronJob用于管理job控制器资源的运行时间,job控制器定义的作业任务在其控制器资源创建之后便会立即执行,但cronjob可以以类似于linux操作系统的周期性任务作业计划的方式控制其运行时间点 ...
Zookeeper服务注册与发现原理浅析
了解Zookeeper的我们都知道,Zookeeper是一种分布式协调服务,在分布式应用中,主要用来实现分布式服务的注册与发现以及分布式锁,本文我们简单介绍一下Zookeeper是如何实现服务的注册与 ...
sublime添加书签
ctrl+f2添加书签, f2切换书签
微信小程序data数组push和remove问题
因为在做一个小程序的demo时.由于不向后台请求数据,所以就涉及到对本地数据的操作,现在就做一些数组的增删 //添加新元素 addItemFn: function () { var { lists } ...
【leetcode】1248. Count Number of Nice Subarrays
题目如下: Given an array of integers nums and an integer k. A subarray is called nice if there are k odd ...

bootstrap 学习笔记(部分)

bootstrap 学习笔记(部分)的更多相关文章

随机推荐

热门专题