Bootstrap基础学习笔记

最新推荐文章于 2024-07-20 15:49:14 发布

向来缘浅奈何晴深

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量5.2k

点赞数 6

分类专栏：前端文章标签： bootstrap bootstrap html

本文链接：https://blog.csdn.net/lzq_20150715/article/details/70941264

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

学完html，css，js，css3，html5之后就开始学Bootstrap了

Bootstrap是什么？

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。它提供了一系列全局CSS样式，组件，js插件等等，支持栅格，响应式，css预编译等等。所以我们就只要使用他们写好样式的类就可以了，真的是简单方便明了。

基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

就这么简单，真的很棒，节省了好多时间吖，只是里面的属性和样式，还是要自己好好理解，好好修改的，有时候修改样式也很麻烦，如果不对它非常熟悉的话~哈哈，我还是很喜欢用框架的~

用的编辑器是brackets，功能强大，可以帮助我们快速打代码

按下tab键自动补全
！：head部分
c：注释
meta:vp： <meta name="viewport" content="width=device-width, initial-scale=1.0">
meta:compat： <meta http-equiv="X-UA-Compatible" content="IE=edge">
ctrl+E 查看元素的css

等等，好多好棒的快捷键

Bootstrap基础：排版

role属性的作用

<body role="document">

role的作用是描述一个非标准的tag的实际作用。
比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button。

role是一个html5的属性，role=”form”告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单，在button中role=”button”就是

告诉设备，这是个按钮，可以点击。本质上是增强语义性，增强组件的可访问性、可用性和可交

html 里面的 role 本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。

role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button

role原来是WAI-ARIA（the Accessible Rich Internet Applications Suite），
可帮助访问Web内容和Web应用有困难的用户进行访问的方法（比如用静态的(screen-reading technologies)浏览器浏览用Ajax技术制作的动态网页），用途是帮助残疾人，尤其是需要依靠屏幕阅读器和不能使用鼠标的用户。应用role属性可以设计出更加友好的网站应用。
html5里面添加这个属性作为做辅助作用。（来自知乎）

  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

这是远程导入服务器中的bootstrap.min,css样式，你也可以下载到本地然后引入，比如

<script src="css/bootstrap.min.css"></script>

标题

h1-h6 可以作为类，也可以作为标签。
h1-h6,
h1:36px，
h2:30px,
h3:24px,
h4:18px,
逐渐减少6px，h5除外
h5为14px，
h6:12px。
谷歌无法渲染出14px以下的字体

粗体斜体

粗体就是给文本加粗，在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中，可以使用<b>和<strong>标签让文本直接加粗。
/源码查看bootstrap.css文件第55行~第58行/

b,strong {
  font-weight: bold; /*文本加粗*/
}

斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签<em>或<i>来实现。

<em> <strong>一般是展现给爬虫看的（偏重语义），<i><b>是展现给用户的（偏重视觉效果）。

定义列表与水平定义列表

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

<dl>
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客</dd>
    <dt>慕课网</dt>
    <dd>一个真心在做教育的网站</dd>
</dl

水平定义列表就像内联列表一样，Bootstrap可以给

添加类名“.dl-horizontal”给定义列表实现水平显示效果。
/ 源码请查看bootstrap.css文件第608行~第621行/

代码解释


//此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;//将dt设置了一个左浮动
width: 160px;//设置了一个宽度为160px
overflow: hidden;//超出隐藏
clear: left;//清除浮动
text-align: right;//文本右对齐
text-overflow: ellipsis;//省略号
white-space: nowrap;//强制在同一行显示
  }
.dl-horizontal dd {
margin-left: 180px;//将dd设置一个margin-left的值为180px，达到水平的效果
  }
}

<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
    <dt>慕课网</dt>
    <dd>一个专业的，真心实意在做培训的网站</dd>
    <dt>我来测试一个标题，我来测试一个标题</dt>
    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl>

<pre>标签：代码

你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

<pre class="pre-scrollable">
<ol>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
    <li>....</li>
</ol>
</pre>


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

第一个是省略号
第二个是ul-li标签

 
 ....
....
....
....
....
....
....
....
....
....
....
....
....
....

<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

表格

.table：基础表格

.table-striped：斑马线表格

.table-bordered：带边框的表格

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

.table-condensed：紧凑型表格

.table-responsive：响应式表格

英文要好啊啊啊啊啊

直接加类名
~~

<h1>鼠标悬浮高亮的表格</h1>
<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>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>

鼠标悬浮高亮的表格

表格标题	表格标题	表格标题
表格单元格	表格单元格	表格单元格
表格单元格	表格单元格	表格单元格
表格单元格	表格单元格	表格单元格
表格单元格	表格单元格	表格单元格

table {
border-collapse: collapse;
border-spacing: 0;
} 关键是这句border-collapse: collapse;为表格设置为合并边框。。

<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>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
   <tfoot>
       <tr>
           <td>foot</td>
           <td>foot</td>
           <td>foot</td>
       </tr>
   </tfoot>
 </table>

table-hover,table-striped,对<tfoot>标签都不管用啊啊啊啊啊

.table-bordered {
  border: 1px solid #ddd;/*整个表格设置边框*/
}
.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 {
  border: 1px solid #ddd; /*每个单元格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;/*表头底部边框*/
}

因为table已经设置了border-collapse:collapse;这个css属性让表格边框合并了，所以td之间的宽度由2px变为1px;合并了。

Bootstrap基础：表单

sr的作用

sr就是screen reader，盲人看不见页面的效果（placeholder里的文字），sr会把里面的文字念出来，这样就知道后面要输的是用户名还是密码了
.sr-only是除了屏幕阅读器外，其他设备上隐藏该元素，这个是用于屏幕阅读器的，帮助残障人士更好的访问网站。

<label class="sr-only" for="exampleInputEmail2">Email address</label>

表单控件

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

<label>专为input元素服务，为其定义标记。
for属性规定label与哪个表单元素绑定
label和表单控件绑定方式又两种：
1、将表单控件作为label的内容，这样就是隐士绑定。
此时不需要for属性，绑定的控件也不需要id属性。

隐式绑定：

<label>Date of Birth: <input type="text" name="DofB" /></label>

2、为<label>标签下的for属性命名一个目标表单的id，这就是显示绑定。

显式绑定：

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

Bootstrap框架中表单控件（text、 file、radio和checkbox控件）的焦点状态删除了outline的默认样式，重新添加阴影效果。

.form-control:focus {
border-color: #66afe9;
outline: 0;
  -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

要让控件在焦点状态下有上面样式效果，需要给控件添加类名“form-control”：

<div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"  class="form-control" value="option1">游戏
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"  class="form-control" value="option2">摄影
    </label>
    <label class="checkbox-inline">
    <input type="checkbox"   class="form-control" value="option3">旅游
    </label>
  </div>

多标签支持

一般制作按钮除了使用<button>标签元素之外，还可以使用<input type="submit">和<a>标签等。同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。

<button class="btn btn-default" type="button">我是button标签写出来的</button>
<a href="##" class="btn btn-default">我是a标签写出来的</a>
<input class="btn btn-default" type="submit" value="我是input标签写出来的">
<span class="btn btn-default">我是span标签写出来的</span>
<div class="btn btn-default">我是div标签写出来的</div>
<p>虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格，但个人并不建议这样使用，为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。</p>

button，a 和 input做的按钮点击后有外边框阴影,div,span做的按钮则没有,不知道大家是不是这样的~

<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>
  <form action="404.html">
  <button class="btn btn-warning" >警告按钮.btn-warning</button>
  </form>

HTML 标签的 type 属性

定义和用法

type 属性规定按钮的类型。

提示：请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。

语法

submit 该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。

button 该按钮是可点击的按钮（Internet Explorer 的默认值）。

reset 该按钮是重置按钮（清除表单数据）。

按钮状态

悬浮时，鼠标不在按钮上方，按钮颜色较浅，就像上面蒙了一层白色塑料膜；焦点状态下，鼠标处于按钮上方，按钮颜色较深，就像白色塑料膜被拿去了；点击时，按钮颜色变深（焦点状态），且按钮四周出现黑色“蚁行线”（就像有蚂蚁绕着按钮在转圈）

按钮状态——禁用状态

和input等表单控件一样，在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比，就是背景颜色的透明度做了一定的处理，opcity的值从100%调整为65%。

在Bootstrap框架中，要禁用按钮有两种实现方式：

方法1：在标签中添加disabled属性

方法2：在元素标签中添加类名“disabled”

    <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> 
    <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
    <button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>

在3.1.1版本中，无论是用disabled类还是disabled属性的方法，链接行为都被禁止了

图像

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <img  width="50%"  alt="140x140" src="http://placehold.it/140x140">
        <div>默认图片</div>
    </div>
    <div class="col-sm-4">
      <div >
      <img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> 
      </div>
        <div>圆角图片</div>
    </div>
    <div class="col-sm-4">
      <img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
        <div>圆形图片</div>
    </div>
      <div class="row">
        <div class="col-sm-4">
          <img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> 
            <div>缩略图</div>
        </div>
        <div class="col-sm-4">
          <img  class="img-responsive"  width="50%"  alt="140x140" src="http://placehold.it/140x140" /> 
          <div>响应式图片</div>
        </div>
         <div class="col-sm-4">
          <img  class="img-responsive"  alt="140x140" src="http://placehold.it/140x140" style="width:50%" /> 
          <div>响应式图片</div>
        </div>
      </div>
  </div>
</div> 
</body>
</html>

由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）

如果你用css样式修改了图片的大小，那么 .img-responsive 里面的max-width: 100%;height: auto;这个就没用了，因为你给图片设置了固定宽度，他的宽高就不会随着它父级容器的宽度变化了，

可以通过设置图片的标签img的宽度width来控制一下图片的宽度高度height的话一般不用设置，这样图片显示不至于失真，设置宽度的时候最好是根据浏览器的宽度之类的来设置，如果指定大小px的话不同显示器显示可能会出现问题，，通过百分比设置

网格系统

列排序和列偏移

 <div class="row">
    <div class="col-md-4 col-md-push-8">.col-md-4</div>
    <div class="col-md-8 col-md-pull-4">.col-md-8</div>
  </div>

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

offset是通过设置margin-left,它只能向右偏移，不能交换位置，一行加起来不能超过12
push,pull是通过设置right,left实现定位效果，改变位置，一列加起来不能超过12

aria前缀

有aria前缀的都是无障碍阅读，即方便屏幕阅读器获取内容，当input聚焦时aria-label就会获取与之相关联的label的内容，当label中的内容在其他元素中出现过，则使用aira-lebelledby来获取相关的值

<div class="dropdown">
    <button class="btn btn-default dropdown-tooggle" id="dropdownMenu2" type="button" data-toggle="dropdown">
        选择你喜欢的水果
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" arialabelladby="dropdownMenu2">
       <Li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a>
       </Li>
       <Li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></Li>
       <Li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃子</a></Li>
       <Li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">葡萄</a></Li>
    </ul>
</div>

Bootstrap组件

超出隐藏

text-overflow:ellipsis;//省略号
overflow:hidden;//隐藏
white-space:pre;//不换行

按钮下拉菜单和下拉菜单

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>组合式下拉菜单</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
          按钮下拉菜单
          <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">按钮下拉菜单项</a></li>
        <li><a href="##">按钮下拉菜单项</a></li>
        <li><a href="##">按钮下拉菜单项</a></li>
        <li><a href="##">按钮下拉菜单项</a></li>
    </ul>
  </div>

  <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"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        </ul>
    </div> 
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

.btn-group 元素是内联元素
.dropdown 元素是块状元素

按钮的向下向上三角形

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>按钮的向下向上三角形</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">按钮下拉菜单项</a></li>
        <li><a href="##">按钮下拉菜单项</a></li>
        <li><a href="##">按钮下拉菜单项</a></li>
        <li><a href="##">按钮下拉菜单项</a></li>
    </ul>
</div>
<div class="btn-group leftright">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        校园招聘
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="##">技术组</a></li>
        <li><a href="##">摄制组</a></li>
        <li><a href="##">营销组</a></li>
        <li><a href="##">策划组</a></li>
    </ul>
</div>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

body{margin:100px;padding:100px;}
.leftright .caret{
    display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-left: 4px solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.leftright .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  right: auto;
  left: 100%;

}

用css画三角形


border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;

1.实现普通下拉菜单：

.dropdown>button.dropdown-toggle[data-toggle=”dropdown”]+ul.dropdown-menu;

2.按钮下拉菜单：

把.dropdown换成.btn-group即可。

3.下拉菜单变上拉菜单：

.dropdown.dropup或.btn-group.dropup

4.下拉菜单通过绝对定位实现，可通过设置top,bottom,left,right改变下拉菜单出现的位置。

5.dropdown-header,li.divider,li.active,li.disabled

三级菜单

/*嵌套菜单样式*/
.dropdown-submenu{
    position:relative;
}

.dropdown-submenu>.dropdown-menu{
    /*嵌套菜单位置*/
    top:0;
    left:100%;
    /*将left的值换成负值可使嵌套菜单向右展开*/
    margin-top:-6px;
    margin-left:-1px;
}

.dropdown-submenu:hover>.dropdown-menu{
    display:block;
}


<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 class="dropdown-submenu">
        <a href="##">嵌套选项1
            <span class="caret2"></span>
        </a>
            <ul class="dropdown-menu">
                <li>
                    <a href="##">C#</a>
                </li>
                <!--嵌套下拉菜单-->
                <li class="dropdown-submenu">
                    <a href="##">嵌套选项2
                        <span class="caret2"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="##">SQL</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="##">VB</a>
                </li>
            </ul>     
        </li>
        <li><a href="##">Responsive</a></li>
      </ul>
  </li>
 <li><a href="##">关于我们</a></li>
</ul>

这里写图片描述

通过浏览器调试工具，不难发现，点击有二级导航的菜单项，会自动添加“open”类名，再次点击就会删除添加的“open”类名：
简单点来说，就是依靠这个类名来控制二级导航显示与否，并且设置了背景色和边框：

所以简单的嵌套并不能实现三级菜单，还需要设置显隐状态

面包屑

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>

.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}

.breadcrumb> li {
display: inline-block;
}

.breadcrumb> li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}

.breadcrumb> .active {
color: #999;
}

看来不错吧！作者是使用li+li:before实现li与li之间的分隔符，所以这种方案在IE低版本就惨了（不支持）。

content: “/\00a0”插入unicode格式的斜杠

一般面包屑导航的前几级菜单可以跳转过去而最后一级菜单是当前所在页面不需要跳转所以不加

导航总结：
1.导航.nav无默认样式。导航基本样式只有.nav-tabs,.nav-pills,需和.nav同时使用。float：left
2.垂直导航：.nav-stacked.float:none;
3.自适应导航：.nav-justified. “.nav-justified>li{display:tabled-cell};ul{width:100%;}”
4.导航分割线：.nav-divider
5.li.active,li.disabled需li>a，样式作用于a。
6.面包屑导航：ul.breadcrumb,li.active里无a才有效果。

导航与导航条

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>基本导航条</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<!--代码-->
<h4>基础导航条</h4>
<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>
<!--代码-->
<h4>导航基础样式</h4>
<ul class="nav nav-tabs">
    <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>

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

</body>
</html>

基础导航条(自适应)
div.navbar .navbar-default>ul.nav navbar-nav>li
导航基础样式（非自适应）
ul.nav nav-tabs>li

disabled属性只有表单标签才有，如果你想禁用a标签的，可以试试加 href=”javascript:void(0)”

响应式导航条

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>响应式导航条</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
    body{padding:50px 0 0 0;}
</style>
</head>

<body>
<!--代码-->
<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>



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

</body>
</html>

响应式导航条就是在基本导航条的基础上，header部分加一个按钮，控制下面的ul标签的显隐~~~

警示框–可关闭的警示框

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>警示框--可关闭的警示框</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" >
</head>
<body>  
<h4>全屏观看</h4>
<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-test alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    该节编程练习不验证代码，你可以各种尝试，或继续学习<span class="alert-link">下一节</span>吧。
</div>

<!--下面是代码部分-->
<h2>下面是代码部区</h2>
<div class="alert alert-info alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    请修改相应信息</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-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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：

1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

2、在button标签中加入class=”close”类，实现警示框关闭按钮的样式。

3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss=”alert””（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

×乘号

列表组–基础列表组

<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.list-group
li.list-group-item

Bootstrap支持的js插件

Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。

一次性导入：

Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。

具体使用如下（或见右侧代码编辑器28-29行）：

<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js"></script>

特别声明：jQuery版本库也可以加载你本地的jQuery版本。

单独导入：

为方便单独导入特效文件，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”

上述单独插件的下载可到github去下载（https://github.com/twbs/bootstrap）。

模块弹出框

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text-html;content=utf-8">
<title>导入JavaScript插件</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary" type="button">点击我</button>
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script>
  $(function(){
    $(".btn").click(function(){
      $("#mymodal").modal("toggle");
    });
  });
</script>
</body>
</html>

这里写图片描述

<script>
  $(function(){
    $(".btn").click(function(){
      $("#mymodal").modal("toggle");
    });
  });
</script>

我在这解释下$和jQuery这两个，在平常的页面情况下$和jQuery是可以通用的。为什么有的页面不用$呢而用jQuery，那是因为和后台语言产生冲突了，比如说是python语言，前端获取数据就是用$获取的，如果页面有$，那python就默认认为是要获取数据，则页面一定会报错。
所以我建议竟然用到jQuery的地方大家都用字母，牵扯到数据和正则的话再用$

<meta http-equiv="Content-Type" content="text-html;content=utf-8">

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的<meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部.

<meta>标签元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。所以不一定是固定的

toggle以模态模式(modal)打开target

toggle 开关触发器 data-toggle=”modal”

target 目标 #id .class

<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
        <!--模态弹出框内容-->
        <div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

href触发 href=”#mymodal-link” data-toggle=”modal”
data-target触发 data-target=”#mymodal-data” data-toggle=”modal”
可以在模态窗上加 fade类看淡入淡出

JavaScript触发时的参数设置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript触发时的参数设置（二）</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script>
  $(function(){
      $(".btn").click(function(){
          $("#mymodal").modal("toggle")({
              keyboard:false
          });
      });
  });
</script>
</body>
</html>

使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。
这里写图片描述

比如你不想让用户按ESC键关闭模态弹出窗，你就可以这样做：

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({
            keyboard:false
        });
    });
});