BootStrap笔记

BootStrap官方文档: https://www.bootcss.com/百度百科Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstr

.小蜜蜂

313人浏览 · 2021-06-28 15:05:56

.小蜜蜂 · 2021-06-28 15:05:56 发布

BootStrap

官方文档: https://www.bootcss.com/

在这里插入图片描述

百度百科

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

简介

Bootstrap是一套现成的CSS样式集合（做得还是很友好的)。是两个推特的员工干出来的。

Bootstrap是最理欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。

2011年，twitter的"一小撮"工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集–BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站:界面清新、简洁;要素排版利落大方。

Bootstrap特别适合那种没有设计师的团队（甚至说没有前端的团队)，可以快速的出一个网页。

特点

简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让web开发更速、简单。
基于html5、css3的bootstrap，具有大量的诱人特性:友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
自定义JQuery插件，完整的类库,bootstrap3基于Less,bootstrap4基于Sass的CSS预处理技术
Bootstrap响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap响应式布局设计，给用户提供更好的视觉使用体验。
丰富的组件

下载与使用

下载：https://v3.bootcss.com/
下载完成后
1. 拷贝dist/css中的bootstrap.min.css 到项目css中
2. 拷贝dist/js 中的bootstrap.min.js 到项目的js中
下载jquery.js: http://jquery.com/
在html中模板为:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--使用x-UA-Compatible来设置IE浏览器兼容模式最新的渲染模式-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--
			viewport表示用户是否可以缩放页面;width指定视区的逻辑宽度;
			device-width指示视区宽度应为设备的屏幕宽度;
			initial-scale指令用于设置web页面的初始缩放比例
			initial-scale=1则将显示未经缩放的web文档
		-->
		<title></title>
		<!--载入Bootstrap 的css-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
	</head>
	<body>
		
	</body>
</html>
<!--如果要使用Bootstrap的js插件，必缅先调入jQuery-->
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!--包括所有bootstrap的js插件或者可以根据需要使用的js插件调用-->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>

注意:

目前暂时不使用jquery的插件可以不用引入js文件,这里是为了保证模板的完整性。

说明:

viewport标记用于指定用户是否可以缩放Web页面
width和 height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字，要么是一个特殊的标记符号。
width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。. height指令使用device-
height标记指示视区高度为设备的屏幕高度。
initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web文档。

参考API: http://v3.bootcss.com/css/

布局容器和栅格网格系统

布局容器

1、.container类用于固定宽度并支持响应式布局的容器。

<div class="container">
	...
</div>

2、.container-fluid类用于100%宽度，占据全部视口(viewport)的容器。

<div class="container-fluid">
	...
</div>

栅格网格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

在这里插入图片描述

注意:网格系统必须使用到css

container、row 、xs (xsmall phones)，sm (small tablets)，md (middle desktops)，Ig(larger desktops)即:超小屏(自动)，小屏(750px)，中屏(970px)和大屏(1170px)

数据行(.row必须包含在容器(.container)中，以便为其赋予合适的对齐方式和内距(padding)。

在行(.row)中可以添加列(.column),只有列(column)才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12,则自动换到下一行。

具体内容应当放置在列容器(column)之内

<div class="container">
    <div class="container">
        <div class="row">
            <div class="col-md-3">三列</div>
            <div class="col-md-9">九列</div>
        </div>
    </div>
</div>

栅格参数

通过下表可以详细查看Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

列组合

列组合简单理解就是更改数字来合并列(原则:列总和数不能超12，大于12,则自动换到下一行。)，有点类似于表格的colspan属性。

<div class="container">
    <div class="container">
        <div class="row">
            <div class="col-md-3">三列</div>
            <div class="col-md-9">九列</div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-6">六列</div>
            <div class="col-md-6">六列</div>
        </div>
    </div>
</div>

列偏移

如果我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset)功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名"col-md-offset-*""(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加"col-md-offset-8"，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列断行|换行显示)。

<div class="container">
    <div class="row">
        <div class="col-md-4 ">4列</div>
        <div class="col-md-6 col-md-offset-1">6列</div>
    </div>
</div>

列排序

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

<div class="container">
    <div class="row">
        <div class="col-md-1 " style="background-color: darkorange;">1</div>
        <div class="col-md-1 col-md-push-1" style="background-color: gold;">1</div>
        <div class="col-md-1 " style="background-color: yellow;">1</div>
        <div class="col-md-1 col-md-pull-2" style="background-color: yellowgreen;">1</div>
    </div>
</div>

列嵌套

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-3" style="background-color: antiquewhite;">3</div>
                <div class="col-md-3" style="background-color: blueviolet;">3</div>
                <div class="col-md-3" style="background-color: chartreuse;">3</div>
                <div class="col-md-3" style="background-color: darkgray;">3</div>
            </div>
        </div>
        <div class="col-md-6" style="background-color: #4CAE4C;">6</div>
    </div>
</div>

注意：

col-lg-* ：大型屏幕
col-md-* ：中型屏幕
col-sm-* : 小型屏幕(手机)

常用样式

排版

标题

Bootstrap和普通的HTML页面一样，定义标题都是使用标签

到

,只不过Bootstrap覆盖了其默认的样式使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题或使用.small

<h3>标题3<small>副标题</small></h1>
<div class="h1">你好<span>副标题</span></div>

段落

段落是排版中另一个重要元素之一。通过.lead来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。可以使用以下标签给文本做突出样式处理:

【小号字】
【加粗】 &
【斜体】 &

<p>小号字体,加粗字体1,加粗字体2,斜体字体1,斜体字体2</p>
<p class="lead"><small>小号字体</small>,<b>加粗字体1</b>,<strong>加粗字体2</strong>,<i>斜体字体1</i>,<em>斜体字体2</em></p>

强调

定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下:

.text-muted:提示，使用浅灰色(#999)
.text-primary:主要，使用蓝色(#428bca)
.text-success:成功，使用浅绿色(#3c763d)
.text-info:通知信息，使用浅蓝色(#31708f)
.text-warning:警告，使用黄色(#8a6d3b)
.text-danger:危险，使用褐色(#a94442)

<div class="text-muted">使用浅灰色(#999)</div>
<div class="text-primary">使用蓝色(#428bca)</div>
<div class="text-success">使用浅绿色(#3c763d)</div>
<div class="text-info">使用浅蓝色(#31708f)</div>
<div class="text-warning">使用黄色(#8a6d3b)</div>
<div class="text-danger">使用褐色(#a94442)</div>

对齐效果

在CSS中常常使用text-align来实现文本的对齐风格的设置。

其中主要有四种风格:

左对齐，取值left ;
居中对齐，取值center;
右对齐，取值right ;
两端对齐，取值justify。

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格: .text-left:左对齐.text-center:居中对齐.text-right:右对齐.text-justify:两端对齐。

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

列表

在HTML文档中，列表结构主要有三种:

无序列表(
…
)
有序列表(
…
)
定义列表( …
…
)

去点列表

class=“list-unstyled”

<ul class="list-unstyled">
    <li>无续项目列表1</li>
    <li>无续项目列表2</li>
</ul>

内联列表

class=“list-inline”，把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

<ol class="list-inline">
    <li>有序项目列表2</li>
    <li>有序项目列表2</li>
</ol>

定义列表

在原有的基础加入了一些样式，使用样式class="dl-horizontal"制作水平定义列表:当标题宽度超过160px时，将会显示三个省略号。

<dl class="dl-horizontal">
    <dt>定义项目表头1</dt>
    <dd>有序项目列表1</dd>
    <dt>定义项目表头1</dt>
    <dd>有序项目列表1</dd>
</dl>

代码

一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格:

使用</ code>来显示单行内联代码
使用
来显示多行块代码
样式: pre-scrollable (height,max-height高度固定,为340px,超过存在滚动条)
使用来显示用户输入代码,如快捷键

单行内联代码

快捷键

多行块代码

<!--代码会保留原本的格式，包括空格和回车-->
<pre>
public static void main(String[] args){
	System.out.println("hello world");
}
</pre>
<!--显示html代码需要使用字符实体-->
<pre>
	&lt;h1&gt;1&lt;/h1&gt;
</pre>
<!--当长度超过指定值，可以添加滚动条-->
<pre class="pre-scrollable">
	<ul>
		<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>
	</ul>
</pre>

表格

表格样式

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格:

基础样式
1. .table:基础表格
附加样式
1. .table-striped:斑马线表格
2. .table-bordered:带边框的表格
3. .table-hover:鼠标悬停高亮的表格
4. .table-condensed:紧凑型表格，单元格没内距或者内距较其他表格的内距小

tr、th、 td样式

提供了五种不同的类名，每种类名控制了行的不同背景颜色

类	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

<table class="table table-bordered table-hover table-striped">
    <tr class="active">
        <th>javaSE</th>
        <th>数据库</th>
        <th>javaScript</th>
    </tr>
    <tr class="success">
        <td>面向对象</td>
        <td>mysql</td>
        <td>json</td>
    </tr>
    <tr class="info">
        <td>数组</td>
        <td>oracle</td>
        <td>ajax</td>
    </tr>
    <tr class="warning">
        <td>数组</td>
        <td>oracle</td>
        <td>ajax</td>
    </tr>
    <tr class="danger">
        <td>数组</td>
        <td>oracle</td>
        <td>ajax</td>
    </tr>
</table>

表单

表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

表单控件

.form-control

.input-lg(较大)

.input-sm(较小)

输入框text

.form-control

<div class="row">
    <div class="col-md-3">
        <input type="text" class="form-control"/>
        <input type="text" class="form-control input-lg"/>
        <input type="text" class="form-control input-sm"/>
    </div>
</div>

下拉选择框select

多行选择设置:multiple=“multiple”

<div class="row">
    <div class="col-md-3">
        <select class="form-control" multiple="multiple">
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </select>
    </div>
</div>

文本域

.form-control

<div class="row">
    <div class="col-md-3">
        <textarea class="form-control"></textarea>	
    </div>
</div>

复选框

垂直显示: .checkbox

水平显示: .checkbox-inline

<!--垂直显示-->
<div class="row">
    <div class="col-md-3">
        <div class="checkbox"> 
            <label><input type="checkbox"/>唱歌</label>
        </div>
        <div class="checkbox"> 
            <label><input type="checkbox"/>跳舞</label>
        </div>
    </div>
</div>
<!--水平显示-->
<div class="row">
    <div class="col-md-3">
        <label class="checkbox-inline">
            <input type="checkbox"/>唱歌
        </label>
        <label class="checkbox-inline">
            <input type="checkbox"/>跳舞
        </label>
    </div>
</div>

单选按钮

垂直显示: .radio

水平显示: .radio-inline

<!--垂直显示-->
<div class="row">
    <div class="col-md-3">
        <div class="radio"> 
            <label><input type="radio" name="sex"/>男</label>
        </div>
        <div class="radio"> 
            <label><input type="radio" name="sex"/>女</label>
        </div>
    </div>
</div>
<!--水平显示-->
<div class="row">
    <div class="col-md-3">
        <label class="radio-inline">
            <input type="radio" name="sex1"/>男
        </label>
        <label class="radio-inline">
            <input type="radio" name="sex1"/>女
        </label>
    </div>
</div>

按钮

使用button

实现基础样式: btn

<button class="btn">按钮</button>

附加样式: btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default

<button class="btn">按钮</button>
<button class="btn btn-danger">危险色（红色）</button>
<button class="btn btn-success">成功（绿色）</button>
<button class="btn btn-warning">警告（黄色）</button>
<button class="btn btn-primary">首选项（深蓝色）</button>
<button class="btn btn-info">一般信息（天蓝色）</button>
<button class="btn btn-default">默认样式（灰色）</button>
<button class="btn btn-link">链接</button>

多标签支持:使用a div等制作按钮

<a href="#" class="btn btn-danger">按钮</a>
<div class="btn btn-warning">按钮</div>

按钮大小

使用.btn-lg、.btn-sm 或.btn-xs 就可以获得不同尺寸的按钮

<button class="btn btn-info btn-lg">按钮</button>
<button class="btn btn-default btn-sm">按钮</button>
<button class="btn  btn-primary btn-xs">按钮</button>

按钮禁用

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

<button class="btn btn-primary" onclick="alert('hello')" disabled="disabled">按钮</button>

方法2:在元素标签中添加类名"disabled"

<button class="btn btn-info disabled" onclick="alert('hello')">按钮</button>

在class属性中添加disabled只是样式上禁用了，并不是真正的禁用了此按钮!

效验主体

.has-warning

.has-success

.has-error

<form action="" class="form-horizontal">
    <div class="form-group has-error">
        <label for="" class="col-md-2">用户名</label>
        <div class="col-md-6">
            <input type="text" class="form-control" />
        </div>
    </div>
    <div class="form-group has-warning">
        <label for="" class="col-md-2">用户名</label>
        <div class="col-md-6">
            <input type="text" class="form-control" />
        </div>
    </div>
    <div class="form-group has-success">
        <label for="" class="col-md-2">用户名</label>
        <div class="col-md-6">
            <input type="text" class="form-control" />
        </div>
    </div>
</form>

表单布局

基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

向父元素添加role=“form”。
把标签和控件放在一个带有class .form-group的
中。这是获取最佳间距所必需的。
向所有的文本元素、和添加class =“form-control”。

水平表单

同一行显示form-horizontal

配合Bootstrap框架的网格系统

<form class="form-horizontal col-md-offset-2">
    <div class="form-group">
        <div class="col-md-3">
            <h1 class="col-md-6 col-md-offset-12">标题</h1>					
        </div>
    </div>
    <div class="form-group">
        <label for="username" class="control-label col-md-2">用户名:</label>	
        <div class="col-md-3">
            <input id="username" type="text" name="username"  class="col-md-12 form-control"/>
        </div>
    </div>
    <div class="form-group">
        <label for="username" class="control-label col-md-2">密码:</label>	
        <div class="col-md-3">
            <input id="username" type="password" name="username" class="col-md-12 form-control"/>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2">下拉框:</label>	
        <div class="col-md-3 ">
            <select class="form-control">
                <option>北京</option>
                <option>上海</option>
                <option>深圳</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2">多选按钮:</label>	
        <div class="col-md-4">
            <div class="checkbox-inline"> 
                <label><input type="checkbox"/>唱歌</label>
            </div>
            <div class="checkbox-inline"> 
                <label><input type="checkbox"/>跳舞</label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2">单选按钮:</label>	
        <div class="col-md-4">
            <div class="radio-inline"> 
                <label><input type="radio" name="sex"/>男</label>
            </div>
            <div class="radio-inline"> 
                <label><input type="radio" name="sex"/>女</label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-10 col-md-offset-2">
            <div class="col-md-2">
                <input type="submit" value="提交" class="btn btn-success"/>
            </div>
            <div class="col-md-2">
                <input type="button" value="返回" class="btn btn-danger" />
            </div>
        </div>
    </div>
</form>

内联表单

将表单的控件都在一行内显示form-inline

注意label不会显示，存在的意义:如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别。

<form class="form-inline">
    <div class="form-group">
        <label for="username">用户名:</label>	
        <input id="username" type="text" name="username"/>
    </div>
    <div class="form-group">
        <label for="username">密码:</label>	
        <input id="username" type="password" name="username"/>
    </div>
    <div class="form-group">
        <input type="submit" value="提交" class="btn btn-success"/>
        <input type="button" value="返回" class="btn btn-danger" />
    </div>
</form>

图片

在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

<img src="img/智子.jpg" class="img-rounded" >
<img src="img/智子.jpg" class="img-circle">
<img src="img/智子.jpg" class="img-thumbnail">

类	描述
.img-rounded	为图片添加圆角 (IE8 不支持)
.img-circle	将图片变为圆形 (IE8 不支持)
.img-thumbnail	缩略图功能
.img-responsive	图片响应式 (将很好地扩展到父元素)

缩略图

缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容，按钮等。

<div class="container">
    <div class="row">
        <!--缩略图-->
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/1.jpg" style=" width:240px;height:360px;"/>
                <h3>张杰</h3>
                <p>谢娜被曝二胎生子后,张杰亲自官宣好消息,粉丝却因此“...</p>
                <button class="btn btn-success">
                    <span class="glyphicon glyphicon-heart"> 喜欢</span>
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-comment"> 评论</span>
                </button>
            </div>
        </div>
    </div>
</div>

面板

默认的.panel组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。

.Danel-default: 默认样式

.panel-heading:面板头

.panel-body:面板主体内容

<div class="container">
    <div class="panel panel-success">
        <div class="panel-heading" align="center">
            <h1>标题</h1>
        </div>
        <div class="panel-body">
            主体
        </div>
    </div>
</div>

BootStrap插件

1、基本样式: .nav 与“nav-tabs”.“nav-pi11s"组合制作导航

2、分类:
1)、标签型(nav-tabs)导航

2)、胶囊形(nav-pi71s)导航

3)、堆栈(nav-stacked)导航

4)、自适应(nav-justified)导航

5)、面包屑式(breadcrumb)导航，单独使用样式，不与nav一起使用,直接加入到o1、u1中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置)
3、状态:
1)、选中状态active样式

2)、禁用状态: disable4、

二级菜单

标签式导航

<p>标签式导航</p>
<ul class="nav nav-tabs">
    <li class="active"><a href="#">java</a></li>
    <li><a href="#">C#</a></li>
    <li><a href="#">mysql</a></li>
    <li><a href="#">html</a></li>
</ul>

胶囊式导航

<p>胶囊式的导航菜单</p>
<ul class="nav nav-pills">
    <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><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>

面包屑导航

<p>面包屑导航</p>
<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ul>

分页导航

分页随处可见，分为页码导航和翻页导航

页码导航:ul标签上加pagination [pagination-lg | pagination-sm]

翻页导航:ul标签上加pager

分页导航

<p>分页导航</p>
<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>

翻页导航

<p>翻页导航</p>
<ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
</ul>

下拉菜单

在使用Bootstrap框架的下拉菜单时，必须使用两个js

<!--如果要使用Bootstrap的js插件，必缅先调入jQuery-->
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!--包括所有bootstrap的js插件或者可以根据需要使用的js插件调用-->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>

要点:

1、使用一个类名为dropdown或btn-group的div包裹整个下拉框:
	<div class="dropdown"></div>
2、默认向下dropdown，向上弹起加入. dropup即可
3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
4、在button中使用font制作下拉箭头
		<span class="caret"></span>
5、下拉菜单项使用一个u1列表，并且定义一个类名为"dropdown-menu6、分组分割线: <1i>添加类名"divider”来实现添加下拉分隔线的功能7、分组标题:1i 添加类名“dropdown-header”来实现分组的功能8、对齐方式:
	1)、dropdown-menu-left左对齐默认样式
	2)、dropdown-menu-right右对齐
9、激活状态(.active)和禁用状态(.disabled)

示例

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu pull-left" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</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" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

模态框

模态框(Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

用法

1.通过data属性:在控制器元素（比如按钮或者链接）上设置属性data-toggle=“modal”，同时设置data-target="#identifier"或 href="#identifier”来指定要切换的特定的模态框（带id=“identifier”)。

⒉通过JavaScript:使用这种技术，可以通过JavaScript-来调用带有id="identifier"的模态框:

$("#myModal").modal("show");
$("#myModal").modal("hide");

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--使用x-UA-Compatible来设置IE浏览器兼容模式最新的渲染模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--
            viewport表示用户是否可以缩放页面;width指定视区的逻辑宽度;
            device-width指示视区宽度应为设备的屏幕宽度;
            initial-scale指令用于设置web页面的初始缩放比例
            initial-scale=1则将显示未经缩放的web文档
        -->
        <title>常用样式</title>
        <!--载入Bootstrap 的css-->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    </head>
    <body>
        <!-- 按钮：用于打开模态框 -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            打开模态框
        </button>

        <button id="btn" class="btn btn-primary">打开模态框</button>

        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">模态框头部</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        模态框内容..
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button id="closeid">提交</button>
                    </div>

                </div>
            </div>
        </div>
    </body>
</html>
<!--如果要使用Bootstrap的js插件，必缅先调入jQuery-->
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!--包括所有bootstrap的js插件或者可以根据需要使用的js插件调用-->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
<script>
    $("#btn").click(function(){
        $("#myModal").modal("show");
    });
    $("#closeid").click(function(){
        $("#myModal").modal("hide");
    });
</script>