BootStrap

1.主要内容

2.BootStrap的安装和使用

2.1. BootStrap介绍

中文网:https://www.bootcss.com/

BootStrap是一套现成的CSS样式集合（做的还是很友好的），是两个推特的员工干出来的。BootStrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。

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

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

2.2.BootStrap特点

简洁、直观、强悍的前端开发框架，html、css、javascript工具集，让web开发更速、简单。

基于html5、css3的bootstrap，具有大量的诱人特性:友好的学习曲线，卓越的兼容   性，响应式设计，12列格网，样式向导文档。

自定义JQuery插件，完整的类库，bootstrap3基于Less，bootstrap4基于Sass的CSS   预处理技术。

Bootstrap响应式布局设计;让一个网站可以兼容不同分辨率的设备。Bootstrap响应式   布局设计，给用户提供更好的视觉使用体验。

丰富的组件。

2.3.下载与使用

(1)下载: http: hmy3.bootcss.com/getting-started/

(2)下载完成后

拷贝dist/css中的bootstrap.min.css 到项目css中

拷贝dist/js 中的bootstrap.min.js 到项目的js中

(3)下载jquery.js 链接地址：jQuery

(4)在html 中模板为:

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

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

说明:

viewport <meta>标记用于指定用户是否可以缩放Web页面

width和height 指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字，要么是一个特殊的标记符号。

width 指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。

height指令使用device-height标记指示视区高度为设备的屏幕高度。

initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web文档。

(5)参考API

http://v3.bootcss.com/cssl

3.布局容器和栅格网格系统

3.1.布局容器

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

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

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

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

3.2.栅格网格系统

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

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

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

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

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

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

<div class="container"><div class="row"><div class="col-md-4">4</div><div class="col-md-8">8</div></div>
</div>

媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 768px） *//* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

栅格参数

通过下表可以详细查看 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）	是
列排序	是

3.2.1.列组合

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

<div class="container"><div class="row"><div class="col-md-4">4列</div><div class="col-md-8">8列</div></div><div class="row"><div class="col-md-2">2列</div><div class="col-md-10">10列</div></div>
</div>

3.2.2.列偏移

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

<div class="container"><div class="row"><div class="col-md-1">1列</div><div class="col-md-1">2列</div><div class="col-md-1 col-md-offset-8">11列</div><div class="col-md-1">12列</div></div>
</div>

3.2.3.列排序

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

<div class="container"><div class="row"><div class="col-md-1 col-md-push-10">1列</div><div class="col-md-1 col-md-pull-1">2列</div></div></div>

3.2.4.列嵌套

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

<div class="container"><div class="row"><div class="col-md-6"><div class="row"><div class="col-md-9">9</div><div class="col-md-3">3</div></div></div><div class="col-md-6"><div class="row"><div class="col-md-10">10</div><div class="col-md-2">2</div></div></div></div>
</div>

4.常用样式

4.1.排版

4.1.1.标题

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

<h1>h1. Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1 <span class="small">副标题</span></div>

4.1.2.段落

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

<small>:小号字

<b><strong>:加粗

<i><em>:斜体

<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你   </strong></p>

4.1.3.强调

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

.text-muted:提示，使用浅灰色(#999)

.text-primary:主要，使用蓝色(#428bca)

.text-success:成功，使用浅绿色(#3c763d)

.text-info:通知信息，使用浅蓝色(#31708f)

.text-warning:警告，使用黄色(#8a6d3b)

.text-danger:危险，使用褐色(#a94442)

<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-infp">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>

4.1.4.对齐效果

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

其中主要有四种风格:

左对齐，取值left ;

居中对齐，取值center;

右对齐，取值right ;

两端对齐，取值justify。

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

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class= "text-justify">Hello 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就,是将容器平分成12份
</p>

4.1.5.列表

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

无序列表(<u1><li>...</li></u1>)

有序列表(<ol><li>...</li></o1>)

定义列表(<dl><dt>...</dt><dd>...</dd></dl>)

4.1.5.1.去点列表

class="list-unstyled"

<ul class="list-unstyled"><li>无序项目列表一</li><li>无序项目列表二</li>
</ul>

4.1.5.2.内联列表

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

<ul class="list-inline"><li>首页</li><li>java学院</li><li>在线课堂</li>
</ul>

4.1.5.3.定义列表

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

<dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表是一种样式表语言</dd></dl><dl class="dl-horizontal"><dt>HTML 超文本标记语言</dt><dd>HTML称为超文本标记语言，是一种标识性的语言</dd><dt>测试标题不能超过160px的宽度，否则2个点</dt><dd>我再写一个水平定义列表的效果，我再写一个水平定义列表的效果。</dd>
</dl>

4.1.6.代码

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

（1）使用<code></code>来显示单行内联代码

（2）使用<pre></pre>来显示多行块代码

样式: pre-scrollable (height,max-height高度固定,为340px,超过存在滚动条)

（3）使用<kbd></kbd>来显示用户输入代码,如快捷键

4.1.6.1.单行内联代码

<code>this is a simple code</code>

4.1.6.2.快捷键

<p>使用 <kbd>ctrl+s</kbd>保存</p>

4.1.6.3.多行块代码

<!-- 代码会保留原本的格式，包括空格和换行 --><pre>public class HelloWorld{public static void main(String[] args){System.out.println("HelloWorld...");}}</pre><!-- 显示html标签的代码需要适应字符实体小于号（<）要使用硬编码"&lt;"来替代，大于号(>)使用"&gt;"来替代--><pre>&lt;ul&gt;&lt;li&gt;测试实体符&lt;/li&gt; &lt;/ul&gt;</pre><!-- 当高度超过，会存在滚动条 --><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><li>...............</li><li>...............</li></ol></pre>

4.1.7.表格

4.1.7.1.表格样式

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

基础样式

1)lable:基础表格

附加样式

1) .table-striped:斑马线表格

2) .table-bordered:带边框的表格

3) .table-hover:鼠标悬停高亮的表格

4).table-condensed:紧凑型表格，单元格没内距或者内距较其他表格的内距小

4.1.7.2.tr、th、td样式

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

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

4.2.表单

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

4.2.1.表单控件

.form-control .input-lg (较大) .input-sm(较小)

4.2.1.1.输入框text

.form-control

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

4.2.1.2.下拉选择框select

多行选择设置: multiple="multiple"

 <div class="row"><div class="col-md-3"><select class="form-control"><option>请选择城市</option><option>上海</option><option>北京</option></select><br><select class="form-control" multiple="multiple"><option>请选择城市</option><option>上海</option><option>北京</option></select><br></div>
</div>

4.2.1.3.文本域

.form-control 表单元素的样式

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

4.2.1.4.复选框

垂直显示 .checkbox

水平显示 .checkbox-inline

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

4.2.1.5.单选框

垂直显示 .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="sex"/>男</label><label class="radio-inline"><input type="radio" name="sex"/>女</label></div></div>

4.2.1.5.按钮

1）使用button实现

基础样式：btn

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

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

<button class="btn btn-danger">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-link">按钮</button>

2）多标签支持：使用a div等制作按钮

<a href="##" class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>
<span class="btn btn-warning">div标签按钮</span>

3）按钮大小

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

<button class="btn btn-primary btn-xs">超小按钮.btn-xs</button>
<button class="btn btn-primary btn-sm">小型按钮.btn-sm</button>
<button class="btn btn-primary">正常按钮</button>
<button class="btn btn-primary btn-lg">大型按钮.btn-lg</button>

4）按钮禁用

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

<button class="btn btn-danger" disabled="disabled">禁用按钮</button>

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

<button class="btn btn-danger disabled">禁用按钮</button>

4.2.2.表单布局

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

向父<form>元素添加role="form".

把标签和控件放在一个带有class .form-group的<div>中。这是获取最佳间距所必需的。

向所有的文本元素<input>、<textarea>和<select>添加class ="form-contror”。

4.2.2.1.水平表单

同一行显示form-horizontal配合Bootstrap框架的网格系统

 <form action="#" class="form-horizontal" role="form"><h2 align="center">用户信息表</h2><!-- 表单中的表单元素组 --><div class="form-group"><label for="uname" class="control-label col-md-2">姓名</label><div class="col-md-8"><input type="text" id="uname" class="form-control" placeholder="请输入姓名"></div></div><div class="form-group"><label for="upwd" class="control-label col-md-2">密码</label><div class="col-md-8"><input type="password" id="upwd" class="form-control" placeholder="请输入密码"></div></div><div class="form-group"><label class="control-label col-md-2">爱好</label><div class="col-md-8"><label class="checkbox-inline"><input type="checkbox" name="hobby"/>唱歌</label><label class="checkbox-inline"><input type="checkbox" name="hobby"/>跳舞</label></div></div><div class="form-group"><label class="control-label col-md-2">城市</label><div class="col-md-8"><select class="form-control"><option>请选择城市</option><option>上海</option><option>北京</option></select></div></div><div class="form-group"><label for="remark" class="control-label col-md-2">姓名</label><div class="col-md-8"><textarea id="remark" class="form-control"></textarea></div></div><div class="form-group"><div class="col-md-8 col-md-offset-5"><button class="btn btn-primary">提交</button></div></div>
</form>

4.2.2.2.内联表单

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

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

<form class="form-inline"><div class="form-group"><label for="userName">姓名</label><input type="text" id="userName" class="form-control" placeholder="请输入姓名"/></div><div class="form-group"><label for="userPwd">密码</label><input type="text" id="userPwd" class="form-control" placeholder="请输入密码"/></div><div class="form-group"><button class="btn btn-primary">提交</button></div>
</form>

4.3.缩略图

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

<div class="container"><div class="row"><div class="col-md-3"><div class="thumbnail"><img src="img/高圆圆.jpg" alt=""><h3>高圆圆</h3><p>出生于北京市，中国内地影视女演员、模特</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span>喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span>评论</button></div></div></div>
</div>

4.4 面板

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

.panel-default:默认样式

.panel-heading:面板头

.panel-body:面板主体内容

<div class="panel panel-warning"><div class="panel-heading">......</div><div class="panel-body">......</div>
</div>

5.BootStrap导航插件

5.1.导航

使用下拉与按钮组合可以制作导航要点:
1、基本样式: .nav 与“nav-tabs”、“nav-pi11s"组合制作导航

2、分类:

标签型(nav-tabs)导航

胶囊形(nav-pi11s)导航

堆栈(nav-stacked)导航

自适应(nav-justified)导航

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

3、状态:

选中状态active样式

禁用状态:disable

4、二级菜单

5.1.1 标签式的导航菜单

<p>标签式的导航菜单</p>
<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><a href="#">Java</a></li><li><a href="#">PHP</a></li>
</ul>

5.1.2 基本的胶囊式导航菜单

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

5.1.3 面包屑式导航菜单

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

5.1.4 分页导航

<p>分页导航</p>
<ul class="pagination"><li><a href="#">&laquo;</a></li><li class="active"><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>

5.1.5 翻页导航

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

5.3下拉菜单

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

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、下拉菜单项使用一个ul列表，并且定义一个类名为"dropdown-menu

6、分组分割线:<li>添加类名"divider”来实现添加下拉分隔线的功能

7、分组标题:li 添加类名“dropdown-header”来实现分组的功能

8、对齐方式:

1)、dropdown-menu-left左对齐默认样式

2)、dropdown-menu-right右对齐

9、激活状态(.active)和禁用状态(.disabled)

<!-- 使用一个类名为dropdown或btn-group的div包裹整个下拉框:<div class="dropdown"></div> -->
<div class="dropdown">
<!-- 使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性 -->
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">喜欢的频道<!-- 设置下拉箭头 --><span class="caret"></span>
</button>
<!-- 下拉菜单项使用一个ul列表，并且定义一个类名为"dropdown-menu -->
<ul class="dropdown-menu"><!-- 分组标题:li 添加类名“dropdown-header”来实现分组的功能 --><li class="dropdown-header">-- 科普 --</li><li><a href="http://tv.cctv.com/lm/ryzr" target="_blank">人与自然</a></li><!-- 分组分割线:<li>添加类名"divider”来实现添加下拉分隔线的功能 --><li class="divider"></li><li class="dropdown-header">-- 搞笑 --</li><li class="active"><a href="http://tv.cctv.com/lm/ryzr" target="_blank">快乐大本营</a></li><li class="disabled"><a href="http://tv.cctv.com/lm/ryzr" target="_blank">欢乐喜剧人</a></li><li><a href="http://tv.cctv.com/lm/ryzr" target="_blank">生活大爆炸</a></li>
</ul>
</div>

5.4模态框

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

5.4.1.用法

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

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

$('#identifier').modal(options);

5.4.2 实例

 <h2>创建模态框（Modal）</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4></div><div class="modal-body">在这里添加一些文本</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 -->
</div>

完整代码：

01-Bootsrap的页面模板.html

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

02-布局容器.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>布局容器</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><style>.color{background-color: brown;height: 500px;}</style>
</head>
<body><!-- 布局容器1、.container类用于固定宽度并支持响应式布局的容器<div class="container"></div>--><div class="container color">.container类用于固定宽度并支持响应式布局的容器</div><!-- <div class="container-fluid color">.container-fluid类用于100%宽度，占据全部视口（viewport）的容器</div> --></body>
</html>

03-栅格网格系统.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>栅格网格系统</title><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body><!-- 栅格网格系统 1.列组合列总和数不能超12，大于12，则自动换到下一行2.列偏移只需要在列元素上添加类名"col-md-offset-*"(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-8"，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列断行|换行显示)。3.列排序列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名col-md-push-*和col-md-pull-*(其中星号代表移动的列组合数)。往前pull，往后push。4.列嵌套Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列。--><!-- 布局容器 --><div class="container"><!-- 行元素 --><div class="row"><!-- 列元素  col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值--><div class="col-md-4 col-lg-4" style="background-color: deepskyblue;">4</div><div class="col-md-8 col-lg-8" style="background-color: firebrick;">8</div></div></div><hr/><!-- 列组合 --><div class="container"><div class="row"><div class="col-md-4" style="background-color: firebrick;">4列</div><div class="col-md-8" style="background-color: forestgreen;">8列</div></div><div class="row"><div class="col-md-2" style="background-color: indianred;">2列</div><div class="col-md-10" style="background-color:yellow">10列</div></div></div><!-- 列的总数不能超过12 --><hr/><!-- 列偏移 --><div class="container"><div class="row"><div class="col-md-1" style="background-color: teal;">1列</div><div class="col-md-1" style="background-color: tomato;">2列</div><div class="col-md-1 col-md-offset-8" style="background-color: turquoise;">11列</div><div class="col-md-1" style="background-color: wheat;">12列</div></div></div><hr/><!-- 列排序 --><div class="container"><div class="row"><div class="col-md-1 col-md-push-10" style="background-color: teal;">1列</div><div class="col-md-1 col-md-pull-1" style="background-color: tomato;">2列</div></div><div class="row"><div class="col-md-1" style="background-color: tomato;">1列</div><div class="col-md-1 col-md-push-1" style="background-color: turquoise;">2列</div><div class="col-md-1 col-md-pull-1" style="background-color: violet;">3列</div><div class="col-md-1" style="background-color: brown;">4列</div></div></div><hr/><!-- 列嵌套 --><div class="container"><div class="row"><div class="col-md-6" style="background-color: cadetblue;"><div class="row"><div class="col-md-9" style="background-color: cornflowerblue;">9</div><div class="col-md-3" style="background-color: green;">3</div></div></div><div class="col-md-6" style="background-color: gold;"><div class="row"><div class="col-md-10" style="background-color: turquoise;">10</div><div class="col-md-2" style="background-color: darksalmon;">2</div></div></div></div></div><hr/><div class="row"><div class="col-md-3 col-sm-6" style="background-color: cadetblue;">3</div><div class="col-md-3 col-sm-6" style="background-color: seagreen;">3</div><div class="col-md-3 col-sm-6" style="background-color: firebrick;">3</div><div class="col-md-3 col-sm-6" style="background-color: skyblue;">3</div></div>
</body>
</html>

04-常用样式.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>常用样式</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body><!-- 常用样式1.标题bootstrap对h1~h6标题效果进行覆盖提供了对应的类名，为非标题元素设置样式 .h1~.h6副标题 small标签 或 .small类名2.段落通过.lead来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。<smal1>:小号字<b><strong>:加粗<i><em>:斜体3.强调.text-muted:提示，使用浅灰色(#999).text-primary:主要，使用蓝色(#428bca).text-success:成功，使用浅绿色(#3c763d).text-info:通知信息，使用浅蓝色(#31708f).text-warning:警告，使用黄色(#8a6d3b).text-danger:危险，使用褐色(#a94442)4.对齐效果Bootstrap通过定义四个类名来控制文本的对齐风格:左对齐，取值left ;居中对齐，取值center;右对齐，取值right ;两端对齐，取值justify。--><!-- 标题 --><h1>标题1<small>副标题</small></h1><h2>标题2 <span class="small">副标题2</span></h2><h3>标题3</h3><div class="h1">你好</div><h1>h1. Bootstrap heading<small>副标题</small></h1><div class="h1">Bootstrap标题1 <span class="small">副标题</span></div><hr/><!-- 段落 --><p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p><hr/><!-- 强调 --><div class="text-muted">提示效果</div><div class="text-primary">主要效果</div><div class="text-success">成功效果</div><div class="text-infp">信息效果</div><div class="text-warning">警告效果</div><div class="text-danger">危险效果</div><hr/><!--对齐效果  --><p style="text-align: right;">Bootstrap通过定义四个类名来控制文本的对齐风格</p><p class="text-left">我居左</p><p class="text-center">我居中</p><p class="text-right">我居右</p><p class= "text-justify">Hello 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就,是将容器平分成12份Hi 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就,是将容器平分成12份网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就,是将容器平分成12份</p>
</body>
</html>

05-常用样式.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>常用样式</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body><!-- 1.列表无序列表(<u1><li>...</li></u1>)有序列表(<ol><li>...</li></o1>)定义列表(<dl><dt>...</dt><dd>...</dd></dl>)2.代码（1）使用<code></code>来显示单行内联代码（2）使用<pre></pre>来显示多行块代码样式: pre-scrollable (height,max-height高度固定,为340px,超过存在滚动条)（3）使用<kbd></kbd>来显示用户输入代码,如快捷键--><ul class="list-unstyled"><li>无序项目列表一</li><li>无序项目列表二</li></ul><ul class="list-inline"><li>首页</li><li>java学院</li><li>在线课堂</li></ul><dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表是一种样式表语言</dd></dl><dl class="dl-horizontal"><dt>HTML 超文本标记语言</dt><dd>HTML称为超文本标记语言，是一种标识性的语言</dd><dt>测试标题不能超过160px的宽度，否则2个点</dt><dd>我再写一个水平定义列表的效果，我再写一个水平定义列表的效果。</dd></dl><hr/><!-- （1）使用<code></code>来显示单行内联代码 --><code>this is a simple code <br>this is a simple code</code><hr/><!-- （2）使用<pre></pre>来显示多行块代码 --><p>使用 <kbd>ctrl</kbd>+<kbd>s</kbd>保存</p><hr/><!-- （3）使用<kbd></kbd>来显示用户输入代码,如快捷键 --><!-- 代码会保留原本的格式，包括空格和换行 --><pre>public class HelloWorld{public static void main(String[] args){System.out.println("HelloWorld...");}}</pre><!-- 显示html标签的代码需要适应字符实体小于号（<）要使用硬编码"&lt;"来替代，大于号(>)使用"&gt;"来替代--><pre>&lt;ul&gt;&lt;li&gt;测试实体符&lt;/li&gt; &lt;/ul&gt;</pre><!-- 当高度超过，会存在滚动条 --><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><li>...............</li><li>...............</li></ol></pre><!-- 显示html代码需要使用字符实体 --><pre>&lt;h2&gt;你好&lt;/h2&gt;</pre><!-- 当长度超过指定值，可以添加滚动条 --><hr/><table class="table table-bordered table-hover"><tr class="active"><th>JavaSE</th><th>数据库</th><th>JavaScript</th></tr><tr class="danger"><td>面向对象</td><td>oracle</td><td>json</td></tr><tr class="success"><td>数组</td><td>mysql</td><td>ajax</td></tr><tr class="info"><td>面向对象</td><td>oracle</td><td>json</td></tr><tr class="warning"><td>数组</td><td>mysql</td><td>ajax</td></tr></table>
</body>
</html>

06-表单控件.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单</title></head><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><body><!-- 表单1.文本框.form-control 表单元素的样式表单控件的大小 .input-lg .input-sm2.下拉框.form-control 表单元素的样式multiple="multiple" 设置下拉框多选3.文本域.form-control 表单元素的样式4.复选框垂直显示   .checkbox水平显示   .checkbox-inline5.单选框垂直显示   .radio水平显示   .radio-inline6.按钮1.使用按钮基础样式： .btn附加样式： btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default2.多标签支持其他标签可以通过添加按钮样式设置成按钮效果（a标签、span标签等）3.按钮大小大按钮 .btn-lg正常按钮 .btn-sm小按钮 .btn-xs4.按钮禁用方法1：在标签中添加disable属性(真正的禁用元素)方法2：在元素标签中添加类名"disabled"（样式上禁用）--><input type="text" /><br><select><option>请选择城市</option><option>上海</option><option>北京</option></select><br><textarea></textarea><br><input type="checkbox" name="hobby"/>唱歌<input type="checkbox" name="hobby"/>跳舞 <br><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<hr><br><!-- 文本框 --><div class="row"><div class="col-md-3"><!-- 文本框 --><input type="text" class="form-control"/><br><input type="text" class="form-control input-lg"/><br><input type="text" class="form-control input-sm"/><br></div></div><!-- 下拉框 --><div class="row"><div class="col-md-3"><select class="form-control"><option>请选择城市</option><option>上海</option><option>北京</option></select><br><select class="form-control" multiple="multiple"><option>请选择城市</option><option>上海</option><option>北京</option></select><br></div></div><!-- 文本域 --><div class="row"><div class="col-md-3"><textarea class="form-control"></textarea></div></div><!-- 复选框 --><!-- 垂直显示 --><div class="row"><div class="col-md-3"><div class="checkbox"><label><input type="checkbox" name="hobby"/>唱歌</label></div><div class="checkbox"><label><input type="checkbox" name="hobby"/>跳舞</label></div></div></div><!-- 水平显示 --><div class="row"><div class="col-md-3"><label class="checkbox-inline"><input type="checkbox" name="hobby"/>唱歌</label><label class="checkbox-inline"><input type="checkbox" name="hobby"/>跳舞</label></div></div><!-- 垂直显示 --><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="sex"/>男</label><label class="radio-inline"><input type="radio" name="sex"/>女</label></div></div><!-- 按钮 --><button class="btn">按钮</button><button class="btn btn-danger">按钮</button><button class="btn btn-primary">按钮</button><button class="btn btn-info">按钮</button><button class="btn btn-success">按钮</button><button class="btn btn-default">按钮</button><button class="btn btn-warning">按钮</button><button class="btn btn-link">按钮</button><!-- 多标签支持按钮 --><a href="##" class="btn btn-info">a标签按钮</a><span class="btn btn-success">span标签按钮</span><span class="btn btn-warning">div标签按钮</span><!-- 按钮大小 --><button class="btn btn-primary btn-xs">超小按钮.btn-xs</button><button class="btn btn-primary btn-sm">小型按钮.btn-sm</button><button class="btn btn-primary">正常按钮</button><button class="btn btn-primary btn-lg">大型按钮.btn-lg</button><!-- 按钮禁用 --><button class="btn btn-danger" disabled="disabled">禁用按钮</button><button class="btn btn-danger disabled">禁用按钮</button></body>
</html>

07-表单布局.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单</title></head><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><body><!-- 表单布局水平表单设置样式：.form-horizontal内联表单设置样式：.form-inline--><form action="#" class="form-horizontal" role="form"><h2 align="center">用户信息表</h2><!-- 表单中的表单元素组 --><div class="form-group"><label for="uname" class="control-label col-md-2">姓名</label><div class="col-md-8"><input type="text" id="uname" class="form-control" placeholder="请输入姓名"></div></div><div class="form-group"><label for="upwd" class="control-label col-md-2">密码</label><div class="col-md-8"><input type="password" id="upwd" class="form-control" placeholder="请输入密码"></div></div><div class="form-group"><label class="control-label col-md-2">爱好</label><div class="col-md-8"><label class="checkbox-inline"><input type="checkbox" name="hobby"/>唱歌</label><label class="checkbox-inline"><input type="checkbox" name="hobby"/>跳舞</label></div></div><div class="form-group"><label class="control-label col-md-2">城市</label><div class="col-md-8"><select class="form-control"><option>请选择城市</option><option>上海</option><option>北京</option></select></div></div><div class="form-group"><label for="remark" class="control-label col-md-2">姓名</label><div class="col-md-8"><textarea id="remark" class="form-control"></textarea></div></div><div class="form-group"><div class="col-md-8 col-md-offset-5"><button class="btn btn-primary">提交</button></div></div></form><hr/><form class="form-inline"><div class="form-group"><label for="userName">姓名</label><input type="text" id="userName" class="form-control" placeholder="请输入姓名"/></div><div class="form-group"><label for="userPwd">密码</label><input type="text" id="userPwd" class="form-control" placeholder="请输入密码"/></div><div class="form-group"><button class="btn btn-primary">提交</button></div></form></body>
</html>

08-缩略图.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>缩略图</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body><!-- 缩略图--><div class="container"><div class="row"><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/杰伦一.jpg" style="width: 220px;height:240px;"><h3>周杰伦</h3><p>中国台湾流行乐男歌手、音乐人、演员、导演、编剧</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/杰伦二.jpg" style="width: 220px;height:240px;"><h3>周杰伦</h3><p>周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/杰伦三.jpg" style="width: 220px;height:240px;"><h3>周杰伦</h3><p>发行首张个人专辑《Jay》，并包办全部歌曲的作曲、和声编写以及监制工作</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/杰伦四.jpg" style="width: 220px;height:240px;"><h3>周杰伦</h3><p>2003年2月，成为美国《时代周刊》亚洲版的封面人物</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div></div></div>
</body>
</html>

09-面板.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body><div class="panel panel-warning"><div class="panel-heading"><h2 align="center">明星合集</h2></div><div class="panel-body"><div class="row"><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/杰伦一.jpg" style="width: 220px;height:240px;"><h3>周杰伦</h3><p>中国台湾流行乐男歌手、音乐人、演员、导演、编剧</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/杰伦二.jpg" style="width: 220px;height:240px;"><h3>周杰伦</h3><p>周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/杰伦三.jpg" style="width: 220px;height:240px;"><h3>周杰伦</h3><p>发行首张个人专辑《Jay》，包办全部歌曲工作</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/杰伦四.jpg" style="width: 220px;height:240px;"><h3>周杰伦</h3><p>2003年2月，成为美国《时代周刊》亚洲版的封面人物</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div></div></div></div>
</body>
</html>

10-导航.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>导航</title><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/></head><body><p>标签式的导航菜单</p><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><a href="#">Java</a></li><li><a href="#">PHP</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"><a href="#">十一月</a></li></ul><p>分页导航</p> <ul class="pagination"><li><a href="#">&laquo;</a></li><li class="active"><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></body>
</html>

11-下拉菜单.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 引入BootStrap的核心css文件 --><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/><!-- 引入Jquery核心js文件，需要在bootstrap的js之前引入 --><script type="text/javascript" src="js/jquery.min.js"></script><!-- 引入BootStrap的核心js文件 --><script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script></head><body><!-- 下拉菜单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、下拉菜单项使用一个ul列表，并且定义一个类名为"dropdown-menu6、分组分割线:<li>添加类名"divider”来实现添加下拉分隔线的功能7、分组标题:li 添加类名“dropdown-header”来实现分组的功能8、对齐方式:1)、dropdown-menu-left左对齐默认样式2)、dropdown-menu-right右对齐9、激活状态(.active)和禁用状态(.disabled)--><!-- 使用一个类名为dropdown或btn-group的div包裹整个下拉框:<div class="dropdown"></div> --><div class="dropdown"><!-- 使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性 --><button class="btn btn-default dropdown-toggle" data-toggle="dropdown">喜欢的频道<!-- 设置下拉箭头 --><span class="caret"></span></button><!-- 下拉菜单项使用一个ul列表，并且定义一个类名为"dropdown-menu --><ul class="dropdown-menu"><!-- 分组标题:li 添加类名“dropdown-header”来实现分组的功能 --><li class="dropdown-header">-- 科普 --</li><li><a href="http://tv.cctv.com/lm/ryzr" target="_blank">人与自然</a></li><!-- 分组分割线:<li>添加类名"divider”来实现添加下拉分隔线的功能 --><li class="divider"></li><li class="dropdown-header">-- 搞笑 --</li><li class="active"><a href="http://tv.cctv.com/lm/ryzr" target="_blank">快乐大本营</a></li><li class="disabled"><a href="http://tv.cctv.com/lm/ryzr" target="_blank">欢乐喜剧人</a></li><li><a href="http://tv.cctv.com/lm/ryzr" target="_blank">生活大爆炸</a></li></ul></div></body>
</html>

12-模态框.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模态框</title><!-- 引入BootStrap的核心css文件 --><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/><!-- 引入Jquery核心js文件，需要在bootstrap的js之前引入 --><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script><!-- 引入BootStrap的核心js文件 --></head><body><!-- 操作模态框通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：--><h2>创建模态框（Modal）</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button><button id="btn" class="btn-primary btn-lg">点击按钮</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel">添加用户</h4></div><div class="modal-body"><form class="form-horizontal" role="form"><div class="form-group"><label for="uname" class="col-md-2 control-label">姓名</label><div class="col-md-8"><input type="text" id="uname" class="form-control" placeholder="请输入姓名"/></div></div><div class="form-group"><label for="upwd" class="col-md-2 control-label">密码</label><div class="col-md-8"><input type="text" id="upwd" class="form-control"placeholder="请输入密码" /></div></div></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" id="submit_btn">提交更改</button></div></div><!-- /.modal-content --></div><!-- /.modal --></div><script type="text/javascript">// 绑定按钮的点击事件$("#btn").click(function(){// 手动打开模态框$("#myModal").modal("show");});// 关闭模态框$("#submit_btn").click(function(){// 手动关闭模态框$("#myModal").modal("hide");});</script></body>
</html>

bootstrap栅格源码解析
https://blog.csdn.net/weixin_41987016/article/details/124021546

bootstrap 详细教程笔记相关推荐

【PANDA教程】PANDA详细教程笔记
前言 PANDA是一个基于FSL的DTI数据分析软件,从安装Linux系统开始到学习DTI的分析方法几乎花了一个月时间,但其实一半的时间都是在解决系统和软件的问题,当平台搭建好了以后,个人感觉DT ...
【DPABI教程】DPARSF详细教程笔记
前言最近在学习使用DPABI对fMRI数据进行分析处理,在处理过程当中难免会遇到一些小问题,而且处理步骤繁多,因此对DPARSF(主要针对体空间分析)的整个处理流程整理成笔记,中间会加上一些自己在处 ...
【web可视化】canvas画图学习详细教程笔记完整代码
canvas是什么 <canvas> 是HTML5中的标签一个容器,可以使用JS在其中绘制图形或文字. <canvas>是一个可以使用脚本 (通常为JavaScript) 来绘 ...
【台大郭彦甫】Matlab入门教程超详细学习笔记二：基本操作与矩阵运算（附PPT链接）
Matlab入门教程超详细学习笔记二:基本操作与矩阵运算前言一.基本操作 1.把matlab当作计算器使用 2.变量 3.控制格式输出二.矩阵运算 1.矩阵 2.矩阵索引 3.使用:创建向量 4 ...
[安卓开发笔记一]Android开发配置opencv环境超详细教程
[安卓开发笔记一]Android开发配置opencv环境超详细教程 [更新于 2022年4月] 再次提醒,建议现在看到这篇文章的,仅仅把此文做一个流程参考,4年前android studio就使用cm ...
最最最详细的C语言教程笔记零起步（10）进阶必备同笔者一起学习
C语言教程笔记二十二. 输入输出缓存 1. 探究printf的现象 1.1 windows系统上的代码 1.2 linux系统上的代码 1.3 windows系统上的表现 1.4 linux系统上的 ...
【小程序】微信小程序云开发笔记详细教程（建议收藏）
1- 前言 1.1 微信云开发是什么? 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...
tensorflow学习笔记九：将 TensorFlow 移植到 Android手机，实现物体识别、行人检测和图像风格迁移详细教程
2017/02/23 更新贴一个TensorFlow 2017开发者大会的Mobile专题演讲移动和嵌入式TensorFlow 这里面有重点讲到本文介绍的三个例子,以及其他的移动和嵌入式方面的TF ...
Oracle 进阶详细案例教程笔记
一.Oracle简介 Oracle 是甲骨文公司使用 Java 语言开发的一款关系型数据库产品.又名 Oracle RDBMS (关系型数据库管理系统).Oracle 数据库是目前流行的关系数据库 ...

bootstrap 详细教程笔记

BootStrap

媒体查询

栅格参数

bootstrap 详细教程笔记相关推荐

最新文章

热门文章