bootstrap和机器学习 bootstrap技术

转载

mob6454cc6f4a4e 2024-01-15 01:55:33

文章标签 bootstrap和机器学习浅析BootStrap Bootstrap css bootstrap 文章分类 机器学习人工智能

Bootstrap 介绍

Bootstrap 概述

Bootstrap 是由Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于PC 及移动端设备的Web 页面需求。
2010 年6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后，Bootstrap 最终被确定下来，并于2011 年8 月发布。经过很长时间的迭代升级，由最初的CSS 驱动项目发展成为内置很多JavaScript 插件和图标的多功能Web 前端的开源框架。
Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容PC 端、PAD以及手机移动端的页面访问。

国内文档翻译官网：http://www.bootcss.com

Bootstrap 特点

Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：
(1).跨设备、跨浏览器
可以兼容所有现代浏览器，包括比较诟病的IE7、8。当然，本课程不再考虑IE9 以下浏览器。
(2).响应式布局
不但可以支持PC 端的各种分辨率的显示，还支持移动端PAD、手机等屏幕的响应式切换显示。
(3).提供的全面的组件
Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。

(4).内置jQuery 插件
Bootstrap 提供了很多实用性的jquery 插件，这些插件方便开发者实现Web 中各种常规特效。
(5).支持HTML5、CSS3
HTML5 语义化标签和CSS3 属性，都得到很好的支持。
(6).支持LESS 动态样式
LESS 使用变量、嵌套、操作混合编码，编写更快、更灵活的CSS。它和Bootstrap 能很好的配合开发。

Bootstrap 结构

首先，想要了解Boostrap 的文档结构，需要在官网先把它下载到本地。Bootstrap下载地址如下：

Bootstrap 下载地址：http://v3.bootcss.com/

解压后，目录呈现这样的结构：

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。
1.css 目录中有四个css 后缀的文件，其中包含min 字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解css 代码的文件；而map 后缀的文件则是css 源码映射表，在一些特定的浏览器工具中使用。
2.js 目录包含两个文件，是未压缩和压缩的js 文件。
3.fonts 目录包含了不同后缀的字体文件。

创建第一个页面

我们创建一个HTML5 的页面，并且将Bootstrap 的核心文件引入，然后测试是否正常显示。

第一个Bootstrap

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Bootstrap 介绍</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-info">Bootstrap</button>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

排版样式

页面排版

Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

页面主体

Bootstrap 将全局font-size 设置为14px，line-height 行高设置为1.428(即
20px)；

段落元素被设置等于1/2 行高(即10px)；颜色被设置为#333。
//创建包含段落突出的文本

<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>

标题

//从h1 到h6

<h1>Bootstrap 框架</h1> //36px
<h2>Bootstrap 框架</h2> //30px
<h3>Bootstrap 框架</h3> //24px
<h4>Bootstrap 框架</h4> //18px
<h5>Bootstrap 框架</h5> //14px
<h6>Bootstrap 框架</h6> //12px

我们从检查元素查看元素了解到，Bootstrap 分别对h1 ~ h6 进行了CSS 样式的重构，并且还支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能。

//内联元素使用标题字体

<span class="h1">Bootstrap</span>

注：通过Firebug 查看元素还看到，字体颜色、字体样式、行高均被固定了，从而保证了统一性，而原生的会根据系统内置的首选字体决定，颜色是最黑色。
在h1 ~ h6 元素之间，还可以嵌入一个small 元素作为副标题，
//在标题元素内插入small 元素

<h1>Bootstrap 框架<small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架<small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架<small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架<small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架<small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架<small>Bootstrap 小标题</small></h6>

我们发现h1 ~ h3 下small 元素的大小只占父元素的65%，那么通过计算(查看Firebug 计算后的样式)，h1 ~ h3 下的small 为23.4px、19.5px、15.6px；
h4 ~ h6 下small 元素的大小只占父元素的75% ,分别为：13.5px、10.5px、9px。
在h1 ~ h6 下的small 样式也进行了改变，颜色变成淡灰色：#777，行高为1，粗度为400。

内联文本元素

//添加标记，<mark>元素或.mark 类
<p>Bootstrap<mark>框架</mark></p>
//各种加线条的文本
<del>Bootstrap 框架</del> //删除的文本
<s>Bootstrap 框架</s> //无用的文本
<ins>Bootstrap 框架</ins> //插入的文本
<u>Bootstrap 框架</u> //效果同上，下划线文本
//各种强调的文本
<small>Bootstrap 框架</small> //标准字号的85%
<strong>Bootstrap 框架</strong> //加粗700
<em>Bootstrap 框架</em> //倾斜

对齐

//设置文本对齐
<p class="text-left">Bootstrap 框架</p> //居左
<p class="text-center">Bootstrap 框架</p> //居中
<p class="text-right">Bootstrap 框架</p> //居右
<p class="text-justify">Bootstrap 框架</p> //两端对齐，支持度不佳
<p class="text-nowrap">Bootstrap 框架</p> //不换行

大小写

//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

缩略语

//缩略语
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

地址文本

//设置地址，去掉了倾斜，设置了行高，底部20px
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>

引用文本

//默认样式引用，增加了做边线，设定了字体大小和内外边距
<blockquote>
Bootstrap 框架
</blockquote>
//反向
<blockquote class="blockquote-reverse ">
Bootstrap 框架
</blockquote>

列表排版

//移出默认样式
<ul class="list-unstyled">
	<li>Bootstrap 框架</li>
	<li>Bootstrap 框架</li>
	<li>Bootstrap 框架</li>
	<li>Bootstrap 框架</li>
	<li>Bootstrap 框架</li>
</ul>
//设置成内联
<ul class="list-inline">
	<li>Bootstrap 框架</li>
	<li>Bootstrap 框架</li>
	<li>Bootstrap 框架</li>
	<li>Bootstrap 框架</li>
	<li>Bootstrap 框架</li>
</ul>
//水平排列描述列表
<dl class="dl-horizontal">
	<dt>Bootstrap</dt>
	<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl>

代码

//内联代码
<code><section></code>
//用户输入
press <kbd>ctrl + ,</kbd>
//代码块
<pre><p>Please input...</p></pre>

Bootstrap 还列举了表示标记变量，表示程序输出，只不过没有重新复写CSS。

表格和按钮

表格

Bootstrap 提供了一些丰富的表格样式供开发者使用。

基本格式

//实现基本的表格样式
<table class="table">

条纹状表格

//让<tbody>里的行产生一行隔一行加单色背景效果
<table class="table table-striped">
注：表格效果需要基于基本格式.table

带边框的表格

//给表格增加边框
<table class="table table-bordered">

悬停鼠标

//让<tbody>下的表格悬停鼠标实现背景效果
<table class="table table-hover">

状态类

//可以单独设置每一行的背景样式
<tr class="success">

注：一共五种不同的样式可供选择。

样式	说明
active	鼠标悬停在行或单元格上
success	标识成功或积极的动作
info	标识普通的提示信息或动作
warning	标识警告或需要用户注意
danger	表示危险或潜在的带来负面影响的动作

隐藏某一行

//隐藏行
<tr class="sr-only">

响应式表格

//表格父元素设置响应式，小于768px 出现边框
<body class="table-responsive">

按钮

Bootstrap 提供了很多丰富按钮供开发者使用。

可作为按钮使用的标签或元素

//转化成普通按钮
<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">

注意事项有三点：
(1).针对组件的注意事项
虽然按钮类可以应用到和元素上，但是，导航和导航条组件只支持元素。
(2).链接被作为按钮使用时的注意事项
如果元素被作为按钮使用-- 并用于在当前页面触发某些功能-- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role=“button” 属性。
(3).跨浏览器展现
我们总结的最佳实践是：强烈建议尽可能使用元素来获得在各个浏览器上获得相匹配的绘制效果。
另外，我们还发现了Firefox <30 版本的浏览器上出现的一个bug，其表现是：阻止我们为基于元素所创建的按钮设置line-height 属性，这就导致在Firefox 浏览器上不能完全和其他按钮保持一致的高度。

预定义样式

//一般信息
<button class="btn btn-info">Button</button>

样式	样式说明
btn-default	默认样式
btn-success	成功样式
btn-info	一般信息样式
btn-warning	警告样式
btn-danger	危险样式
btn-primary	首选项样式
btn-link	链接样式

尺寸大小

//从大到小的尺寸
<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button>

块级按钮

//块级换行
<button class="btn btn-block">Button</button>
<button class="btn btn-block">Button</button>

激活状态

//激活按钮
<button class="btn active">Button</button>

禁用状态

//禁用按钮
<button class="btn active disabled">Button</button>

表单和图片

表单

Bootstrap 提供了一些丰富的表单样式供开发者使用。

基本格式

//实现基本的表单样式
<form>
<div class="form-group">
<label>电子邮件</label>
<input type="email" class="form-control"
placeholder="请输入您的电子邮件">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control"
placeholder="请输入您的密码">
</div>
</form>

注：只有正确设置了输入框的type 类型，才能被赋予正确的样式。支持的输入框控件包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和color。

内联表单

//让表单左对齐浮动，并表现为inline-block 内联块结构
<form class="form-inline">

注：当小于768px，会恢复独占样式

表单合组

//前后增加片段
<div class="input-group">
<div class="input-group-addon">￥</div>
<input type="text" class="form-control">
<div class="input-group-addon">.00</div>
</div>

水平排列

//让表单内的元素保持水平排列
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">电子邮件</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输
入您的电子邮件">
</div>
</div>
</form>

注：这里用到了col-sm 栅格系统，后面章节会重点讲解，而control-label 表示和父元素样式同步。

复选框和单选框

//设置复选框，在一行
<div class="checkbox">
<label>
<input type="checkbox">体育
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">音乐
</label>
</div>
//设置禁用的复选框
<div class="checkbox disabled">
<label>
<input type="checkbox" disabled>音乐
</label>
</div>
//设置内联一行显示的复选框
<label class="checkbox-inline">
<input type="checkbox">体育
</label>
<label class="checkbox-inline disabled">
<input type="checkbox" disabled>音乐
</label>
//设置单选框
<div class="radio disabled">
<label>
<input type="radio" name="sex" disabled>男
</label>
</div>

下拉列表

//设置下拉列表
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

校验状态

//设置为错误状态
<div class="form-group has-error">

注：还有其他状态如下

样式	说明
has-error	错误状态
has-success	成功状态
has-warning	警告状态

//label 标签同步相应状态
<label class="control-label">Input with success</label>

添加额外的图标

//文本框右侧内置文本图标
<div class="form-group has-feedback">
<label>电子邮件</label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

注：除了glyphicon-ok 外，还有几个如下表：

样式	说明
glyphicon-ok	成功状态
glyphicon-warning-sign	警告状态
glyphicon-remove	错误状态

控制尺寸

//从大到小
<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm">

注：也可以设置父元素form-group-lg、form-group-sm，来调整。

图片

Bootstrap 提供了一些丰富的图片样式供开发者使用。

图片形状

//三种形状
<img src="img/pic.png" alt="图片" class="img-rounded">
<img src="img/pic.png" alt="图片" class="img-circle">
<img src="img/pic.png" alt="图片" class="img-thumbnail">
//响应式图片
<img src="img/pic.png" alt="图片" class="img-responsive">

栅格系统

移动设备优先

在HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。

//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于padding 等属性的原因，这两种容器类不能相互嵌套。

//固定宽度
<div class="container">
...
</div>
//100%宽度
<div class="container-fluid">
...
</div>

栅格系统

栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)与列(column)的组合来创建页面布局。工作原理如下：

“行（row）”必须包含在.container （固定宽度）或.container-fluid （100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似.row 和.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置padding 属性，从而创建列与列之间的间隔（gutter）。通过为.row 元素设置负值margin 从而抵消掉为.container 元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1 到12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。

//创建一个响应式行
<div class="container">
<div class="row">
...
</div>
</div>
//创建最多12 列的响应式行
<div class="container">
<div class="row">
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">2</div>
<div class="col-md-1 a">3</div>
<div class="col-md-1 a">4</div>
<div class="col-md-1 a">5</div>
<div class="col-md-1 a">6</div>
<div class="col-md-1 a">7</div>
<div class="col-md-1 a">8</div>
<div class="col-md-1 a">9</div>
<div class="col-md-1 a">10</div>
<div class="col-md-1 a">11</div>
<div class="col-md-1 a">12</div>
</div>
</div>
//为了显示明显的CSS
.a {
height: 100px;
background-color: #eee;
border:1px solid #ccc;
}
//总列数都是12，每列分配多列
<div class="container">
<div class="row">
<div class="col-md-4 a">1-4</div>
<div class="col-md-4 a">5-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="row">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
</div>

栅格参数表

![](第5章栅格系统.jpg)

如上图所示，栅格系统最外层区分了四种宽度的浏览器：超小屏(<768px)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)。而内层.container 容器的自适应宽度为：自动、750px、970px 和1170px。自动的意思为，如果你是手机屏幕，则全面独占一行显示。

//四种屏幕分类全部激活
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
</div>
</div>
//有时我们可以设置列偏移，让中间保持空隙
<div class="container">
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
</div>
//也可以嵌套，嵌满也是12 列
<div class="container">
<div class="row">
<div class="col-md-9 a">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="col-md-3 a">
11-12
</div>
</div>
</div>
//可以把两个列交换位置，push 向左移动，pull 向右移动
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
</div>

辅组类和响应式工具

辅组类

Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、显示关闭图标等等。

情景文本颜色

样式	描述
text-muted	柔和灰
text-primary	主要蓝
text-success	成功绿
text-info	信息蓝
text-warning	警告黄
text-danger	危险红

//各种色调的字体
<p class="text-muted">Bootstrap 视频教程</p>
<p class="text-primary">Bootstrap 视频教程</p>
<p class="text-success">Bootstrap 视频教程</p>
<p class="text-info">Bootstrap 视频教程</p>
<p class="text-warning">Bootstrap 视频教程</p>
<p class="text-danger">Bootstrap 视频教程</p>

情景背景色

样式	描述
bg-primary	主要蓝
bg-success	成功绿
bg-info	信息蓝
bg-warning	警告黄
bg-danger	危险红

//各种色调的背景
<p class="bg-primary">Bootstrap 视频教程</p>
<p class="bg-success">Bootstrap 视频教程</p>
<p class="bg-info">Bootstrap 视频教程</p>
<p class="bg-warning">Bootstrap 视频教程</p>
<p class="bg-danger">Bootstrap 视频教程</p>

关闭按钮

<button type="button" class="close">×</button>

三角符号

<span class="caret"></span>

快速浮动

<div class="pull-left">左边</div>
<div class="pull-right">右边</div>
注：这个浮动其实就是float，只不过使用了!important 加强了优先级。

块级居中

<div class="center-block">居中</div>
注：就是margin:x auto；并且设置了display:block;

清理浮动

<div class="clearfix"></div>
注：这个div 可以放在需要清理浮动区块的前面即可。

显示和隐藏

<div class="show">show</div>
<div class="hidden">hidden</div>

响应式工具

在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类，就提供了这种解决方案。

![](第6章辅组类和响应式工具.jpg)

//超小屏幕激活显示
<div class="visible-xs-block a">Bootstrap</div>
//超小屏幕激活隐藏
<div class="hidden-xs a">Bootstrap</div>

注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。

图标菜单按钮组件

小图标组件

Bootstrap 提供了免费的263 个小图标（数了两次），具体可以参考中文官网的组件链接：http://v3.bootcss.com/components/#glyphicons。部分图标如下：

![](第7章图标菜单和按钮组件.jpg)

可以使用或标签来配合使用，具体如下：

//使用小图标
<i class="glyphicon glyphicon-star"></i>
<span class="glyphicon glyphicon-star"></span>
//也可以结合按钮
<button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn">
<span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star"></span>
</button>

下拉菜单组件

下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。

//基本格式
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单
<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>

按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效。对于菜单部分，设置class="dropdown-menu"才能自动隐藏并添加固定样式。设置class="caret"表示箭头，可上可下。

//设置向上触发
<div class="dropup">
//菜单项居右对齐，默认值是dropdown-menu-left
<ul class="dropdown-menu dropdown-menu-right">
//设置菜单的标题，不要加超链接
<li class="dropdown-header">网站导航</li>
//设置菜单的分割线
<li class="divider"></li>
//设置菜单的禁用项
<li class="disabled"><a href="#">产品</a></li>
//让菜单默认显示
<div class="dropdown open">

按钮组组件

按钮组就是多个按钮集成在一个容器里形成独有的效果。

//基本格式
<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中</button>
<button type="button" class="btn btn-default">右</button>
</div>
//将多个按钮组整合起来便于管理
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中</button>
<button type="button" class="btn btn-default">右</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>
</div>
//设置按钮组大小
<div class="btn-group btn-group-lg">
<div class="btn-group>
<div class="btn-group btn-group-sm">
<div class="btn-group btn-group-xs">
//嵌套一个分组，比如下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中</button>
<button type="button" class="btn btn-default">右</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
下拉菜单
<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”，通过源码分析知道嵌套本身已经有定位就不需要再设置。而右边的圆角只要多加一个class="dropdown-toggle"即可。

//设置按钮组垂直排列
<div class="btn-group-vertical">
//设置两端对齐按钮组，使用<a>标签
<div class="btn-group-justified">
<a type="button" class="btn btn-default">左</a>
<a type="button" class="btn btn-default">中</a>
<a type="button" class="btn btn-default">右</a>
</div>
//如果需要使用<button>标签，则需要对每个按钮进行群组
<div class="btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">中</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">右</button>
</div>
</div>

按钮式下拉菜单

这个下拉菜单其实和第二个知识点一样，只不过，这个是在群组里，不需要

声明class=“dropdown”。

//群组按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
下拉菜单
<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">
<button type="button" class="btn btn-default">下拉菜单</button>
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<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 dropup">

输入框和导航组件

输入框组件

文本输入框就是可以在元素前后加上文字或按钮，可以实现对表单控件的扩展。

//在左侧添加文字
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
//在右侧添加文字
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">@163.com</span>
</div>
//在两侧添加文字
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
//设置尺寸，另外三种分别是默认、xs、sm
<div class="input-group input-group-lg">
//左侧使用复选框和单选框
<div class="input-group">
<span class="input-group-addon"><input type="checkbox"></span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon"><input type="radio"></span>
<input type="text" class="form-control">
</div>
//左侧使用按钮
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default">按钮</button>
</span>
<input type="text" class="form-control">
</div>
//左侧使用下拉菜单或分列式
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">网站导航</li>
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li class="divider"><a href="#">产品</a></li>
<li class="disabled"><a href="#">关于</a></li>
</ul>
</span>
<input type="text" class="form-control">
</div>

导航组件

Bootstrap 提供了一组导航组件，用于实现Web 页面的栏目操作。

//基本导航标签页
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></a></li>
<li><a href="#">关于</a></li>
</ul>
//胶囊式导航
<ul class="nav nav-pills">
//垂直胶囊式导航
<ul class="nav nav-pills nav-stacked">
//导航两端对齐
<ul class="nav nav-tabs nav-justified">
//禁用导航中的项目
<li class="disabled"><a href="#">关于</a></li>
//带下拉菜单的导航
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><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="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
</ul>
</li>
</ul>

导航条组件

导航条是网站中作为导航页头的响应式基础组件。

//基本格式
<nav class="navbar navbar-default">
...
</nav>
//反色调导航
<nav class="navbar navbar-inverse">
...
</nav>
//基本导航条，包含标题和列表
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">标题</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</nav>
//导航条中使用表单
<form action="" class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">提交</button>
</span>
</div>
</form>
//导航中使用按钮
<button class="btn btn-default navbar-btn">按钮</button>
//导航中使用对齐方式，left 和right
<button class="btn btn-default navbar-btn navbar-right">按钮</button>
//导航中使用一段文本
<p class="navbar-text">我是一段文本</p>
//非导航链接，一般需要置入文本区域内
<a href="#" class="navbar-link">非导航链接</a>
//将导航固定在顶部，下面的内容会自动上移
<nav class="navbar navbar-default navbar-fixed-top">
//将导航补丁在底部
<nav class="navbar navbar-default navbar-fixed-bottom">
//静态导航，和页面等宽的导航条，去掉了圆角
<nav class="navbar navbar-default navbar-static-top">

路径分页标签和徽章组件

路径组件

路径组件也叫做面包屑导航。

//面包屑导航
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">产品列表</a></li>
<li class="active">韩版2015 年羊绒毛衣</li>
</ol>

分页组件

分页组件可以提供带有展示页面的功能。

//默认分页
<ul class="pagination">
<li><a href="#">«</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="#">»</a></li>
</ul>
//首选项和禁用
<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
//设置尺寸，四种lg、默认、sm 和xs
<ul class="pagination pagination-lg">
//翻页效果
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
//对齐翻页链接
<ul class="pager">
<li class="previous"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>
//翻页项禁用
<li class="previous disabled"><a href="#">上一页</a></li>

标签组件

//在文本后面带上标签
<h3>标签<span class="label label-default">new</span></h3>
//不同色调的标签
<h3>标签<span class="label label-primary">new</span></h3>
<h3>标签<span class="label label-success">new</span></h3>
<h3>标签<span class="label label-info">new</span></h3>
<h3>标签<span class="label label-warning">new</span></h3>
<h3>标签<span class="label label-danger">new</span></h3>

徽章组件

//未读信息数量徽章
<a href="#">信息<span class="badge">10</span></a>
//按钮中使用徽章
<button class="btn btn-success">
提交<span class="badge">3</span>
</button>
//激活状态自动适配色调
<ul class="nav nav-pills">
<li class="active">
<a href="#">首页<span class="badge">2</span></a>
</li>
<li><a href="#">资讯</a></li>
</ul>

巨幕页头缩略图和警告框组件

巨幕组件

巨幕组件主要是展示网站的关键性区域。

//在固定的范围内，有圆角
<div class="container">
<div class="jumbotron">
<h2>网站标题</h2>
<p>这是一个学习性的网站!</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>
//100%全屏，没有圆角
<div class="jumbotron">
<div class="container">
<h2>网站标题</h2>
<p>这是一个学习性的网站!</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>

页头组件

//增加一些空间
<div class="page-header">
<h1>大标题 <small>小标题</small></h1>
</div>

缩略图组件

//缩略图配合响应式
<div class="container">
 
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
</div>
</div>

//自定义内容
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p>这是一个图片结合文字的缩略图</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p>这是一个图片结合文字的缩略图</p>
<p><a href="#" class="btn btn-default">进入</a></p>
 
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p>这是一个图片结合文字的缩略图</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p>这是一个图片结合文字的缩略图</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
</div>
</div>

警告框组件

警告框组件是一组预定义消息。

//基本警告框
<div class="alert alert-success">Bootstrap</div>
<div class="alert alert-info">Bootstrap</div>
<div class="alert alert-warning">Bootstrap</div>
<div class="alert alert-danger">Bootstrap</div>

//带关闭的警告框
<div class="alert alert-success"> Bootstrap
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>
 
//自动适配的超链接
<div class="alert alert-success">
Bootstrap,请到官网 <a href="#" class="alert-link">下载</a>
</div>

进度条媒体对象和Well 组件

Well 组件

这个组件可以实现简单的嵌入效果。

//嵌入效果
<div class="well">
Bootstrap
</div>
//有lg 和sm 两种可选值
<div class="well well-lg">
Bootstrap
</div>

进度条组件

进度条组件为当前工作流程或动作提供时时反馈。

//基本进度条
<div class="progress">
<div class="progress-bar" style="width: 60%;">60%</div>
</div>
//最低值进度条
<div class="progress">
<div class="progress-bar" style="min-width:20px">0%</div>
</div>
//结合情景的进度条
<div class="progress">
<div class="progress-bar progress-bar-success"
style="min-width:20px;width:60%">60%</div>
</div>
//条纹状，IE10+支持
<div class="progress">
<div class="progress-bar progress-bar-success
progress-bar-striped" style="min-width:20px;width:60%">60%</div>
</div>
//动画效果
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped
active" style="min-width:20px;width:60%">60%</div>
</div>
//堆叠效果
<div class="progress">
<div class="progress-bar progress-bar-success"
style="min-width:20px;width:35%">35%</div>
<div class="progress-bar progress-bar-warning"
style="min-width:20px;width:20%">20%</div>
<div class="progress-bar progress-bar-danger"
style="min-width:20px;width:10%">10%</div>
</div>

媒体对象组件

媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。

//基本实例
<div class="media">
<div class="media-left">
<img src="img/small.png" alt="" class="media-object">
</div>
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17
种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；
脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；
羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个
种的主要区别在于头部色型和个体大小。</p>
</div>
</div>
//媒体对象在右边
<div class="media">
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17
种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；
脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；
羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个
种的主要区别在于头部色型和个体大小。</p>
</div>
<div class="media-right">
<img src="img/small.png" alt="" class="media-object">
</div>
</div>
//媒体对象列表
<ul class="media-list">
<li class="media">
//将每个media 存放在media-body 内后即可
...代码较多，具体看视频
</li>
</ul>

列表组面板和嵌入组件

列表组组件

列表组组件用于显示一组列表的组件。

//基本实例
<ul class="list-group">
<li class="list-group-item">1.这是起始</li>
<li class="list-group-item">2.这是第二条数据</li>
<li class="list-group-item">3.这是第三排信息</li>
<li class="list-group-item">4.这是末尾</li>
</ul>
//列表项带勋章
<li class="list-group-item">1.这是起始
<span class="badge">10</span></li>
//链接和首选
<div class="list-group">
<a href="#" class="list-group-item active">1.这是起始
<span class="badge">10</span></a>
<a href="#" class="list-group-item">2.这是第二条数据</a>
<a href="#" class="list-group-item">3.这是第三排信息</a>
<a href="#" class="list-group-item">4.这是末尾</a>
</div>
//按钮式列表
<div class="list-group">
<button class="list-group-item active">1.这是起始<span
class="badge">10</span></button>
<button class="list-group-item">2.这是第二条数据</button>
<button class="list-group-item">3.这是第三排信息</button>
<button class="list-group-item">4.这是末尾</button>
</div>
//设置项目被禁用
class="list-group-item disabled"
//情景类
<li class="list-group-item list-group-item-success">
3.这是第三排信息</li>
//定制内容
<div class="list-group">
<a href="#" class="list-group-item active">
<h4>内容标题</h4>
<p class="list-group-item-text">这里是相关内容详情！</p>
</a>
<a href="#" class="list-group-item">
<h4>内容标题</h4>
<p class="list-group-item-text">这里是相关内容详情！</p>
</a>
<a href="#" class="list-group-item">
<h4>内容标题</h4>
<p class="list-group-item-text">这里是相关内容详情！</p>
</a>
</div>

面板组件

面板组件就是一个存放内容的容器组件。

//基本实例
<div class="panel panel-default">
<div class="panel-body">
这里是详细内容区！
</div>
</div>
//带标题容器的面板
<div class="panel panel-default">
<div class="panel-heading">
面板标题
</div>
<div class="panel-body">
这里是详细内容区！
</div>
</div>
//也可以设置标题元素
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
//带注脚的面板
<div class="panel-footer">
这里是底部
</div>
//情景效果：default、success、info、warning、danger、primary
<div class="panel panel-success">
//表格类面板
<div class="panel panel-default">
<div class="panel-heading">
表格标题
</div>
<div class="panel-body">
<p>这里是表格标题的详细内容！</p>
</div>
<table class="table">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
//列表类面板
<div class="panel panel-default">
<div class="panel-heading">
表格标题
</div>
<div class="panel-body">
<p>这里是表格标题的详细内容！</p>
</div>
<ul class="list-group">
<li class="list-group-item">1.这里是首页</li>
<li class="list-group-item">2.这里是第二个项目</li>
<li class="list-group-item">3.这里是第三个项目</li>
<li class="list-group-item">4.这里是第四个项目</li>
</ul>
</div>

响应式嵌入组件

根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定内容的尺寸，能够在各种设备上缩放。
这些规则可以直接用于>、、和元素。

//16:9 响应式
<div class="embed-responsive embed-responsive-16by9">
<embed width="100%" height="100%"
src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI
d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
</div>
//4:3 响应式
<div class="embed-responsive embed-responsive-4by3">
<embed width="100%" height="100%"
src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI
d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
</div>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。