Bootstrap框架的简介
⼀、Bootstrap介绍
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应⽤程序⽽设计的⼀套前端⼯具包。
它⽀持响应式布局，并且在V3版本之后坚持移动设备优先。
Bootstrap是⼀个前端开发的框架，其实就是⼀堆HTML代码，有⼀些⾃带的CSS样式类（只需要记忆常⽤的CSS样式类）为什么要使⽤Bootstrap？
在Bootstrap出现之前：
命名：重复、复杂、⽆意义（想个名字费劲）
样式：重复、冗余、不规范、不和谐
页⾯：错乱、不规范、不和谐
在使⽤Bootstrap之后：各种命名都统⼀并且规范化。页⾯风格统⼀，画⾯和谐。
Bootstrap下载
我们使⽤V3版本的Bootstrap，我们下载的是⽤于⽣产环境的Bootstrap。
Bootstrap环境搭建
⽬录结构：
bootstrap-3.3.7-dist/
├── css  // CSS⽂件
│├── bootstrap-theme.css  // Bootstrap主题样式⽂件
│├── bootstrap-theme.css.map
│├── bootstrap-theme.min.css  // 主题相关样式压缩⽂件
│├── bootstrap-theme.min.css.map
│├── bootstrap.css
│├── bootstrap.css.map
│├── bootstrap.min.css  // 核⼼CSS样式压缩⽂件
│└── bootstrap.min.css.map
├── fonts  // 字体⽂件
│├──
│├── glyphicons-halflings-regular.svg
│├── f
│├── glyphicons-halflings-regular.woff
│└── glyphicons-halflings-regular.woff2
└── js  // JS⽂件
├── bootstrap.js
├── bootstrap.min.js  // 核⼼JS压缩⽂件
└── npm.js
处理依赖
由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery⽂件，来保证Bootstrap相关组件运⾏正常。Bootstrap全局样式
排版、按钮、表格、表单、图⽚等我们常⽤的HTML元素，Bootstrap中都提供了全局样式。
我们只要在基本的HTML元素上通过设置class就能够应⽤上Bootstrap的样式，从⽽使我们的页⾯更美观和谐。
标题相关
标题
<h1>⼀级标题36px</h1>
<h2>⼆级标题30px</h2>
<h3>三级标题24px</h3>
<h4>四级标题18px</h4>
<h5>五级标题14px</h5>
<h6>六级标题12px</h6>
<!--除了使⽤h标签，Bootstrap内置了相应的全局样式-->
<!--内联标签应⽤标题样式-->
<span class="h1">⼀级标题36px</span>
<span class="h2">⼆级标题30px</span>
<span class="h3">三级标题24px</span>
<span class="h4">四级标题18px</span>
<span class="h5">五级标题14px</span>
<span class="h6">六级标题12px</span>
副标题
<!--⼀级标题中嵌⼊⼩标题-->
<h1>⼀级标题<small>⼩标题</small></h1>
⽂本对齐
<!--⽂本对齐-->
<p class="text-left">⽂本左对齐</p>
<p class="text-center">⽂本居中</p>
<p class="text-right">⽂本右对齐</p>
⽂本⼤⼩写
<!--⼤⼩写-->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
表格
Class描述
.table-striped条纹状表格
.table-bordered带边框的表格
.table-hover⿏标悬停变⾊的表格
.table-condensed紧缩型表格
.table-responsive响应式表格
状态类
Class描述
.active⿏标悬停在⾏或单元格上时所设置的颜⾊
.success标识成功或积极的动作
.info标识普通的提⽰信息或动作
.warning标识警告或需要⽤户注意
.danger标识危险或潜在的带来负⾯影响的动作
表单
内联表单
表单状态
带图标的表单
按钮
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
按钮样式
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（⾸选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（⼀般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
按钮⼤⼩
<p>
<button type="button" class="btn btn-primary btn-lg">（⼤按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（⼤按钮）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默认尺⼨）Default button</button>
<button type="button" class="btn btn-default">（默认尺⼨）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（⼩按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（⼩按钮）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超⼩尺⼨）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超⼩尺⼨）Extra small button</button>
</p>
图⽚
<img src="..." class="img-responsive" alt="Responsive image">
图⽚形状
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
辅助类
⽂本颜⾊
p class="text-muted">...</p>
jquery框架定义
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
背景颜⾊
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>下拉三⾓
<span class="caret"></span>
快速浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
内容块居中
<div class="center-block">...</div>
清除浮动
<!-- Usage as a class -->
<div class="clearfix">...</div>
显⽰与隐藏
<div class="show">...</div>
<div class="hidden">...</div>
常⽤Bootstrap组件
1. 字体图标
2. 下拉菜单
3. 按钮组
4. 输⼊框俎
5. 导航
6. 分页
7. 标签和徽章
8. 页头
9. 缩率图
10. 进度条
模拟滚动的进度条：
var $d1 = $("#d1");
var width = 0;
var theID = setInterval(setValue, 200);
function setValue() {
if (width === 100) {
clearInterval(theID);
} else {
width++;
$d1.css("width", width+"%").text(width+"%");
}
}
响应式开发
为什么要进⾏响应式开发？
随着移动设备的流⾏，⽹页设计必须要考虑到移动端的设计。同⼀个⽹站为了兼容PC端和移动端显⽰，就需要进⾏响应式开发。
什么是响应式？
利⽤媒体查询，让同⼀个⽹站兼容不同的终端（PC端、移动端）呈现不同的页⾯布局。
⽤到的技术：
CSS3@media查询
⽤于查询设备是否符合某⼀特定条件，这些特定条件包括屏幕尺⼨、是否可触摸、屏幕精度、横屏竖屏等信息。
常见属性：
device-width, device-height 屏幕宽、⾼
width,height 渲染窗⼝宽、⾼
orientation 设备⽅向
resolution 设备分辨率
语法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
不同的媒体使⽤不同的stylesheet
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
viewport
⼿机浏览器是把页⾯放在⼀个虚拟的"窗⼝"（viewport）中，通常这个虚拟的"窗⼝"（viewport）⽐屏幕宽，这样就不⽤把每个⽹页挤到很⼩的窗⼝中（这样会破坏没有针对⼿机浏览器优化的⽹页的布局），⽤户可以通过平移和缩放来看⽹页的不同部分。
设置viewport
⼀个常⽤的针对移动⽹页优化过的页⾯的 viewport meta 标签⼤致如下：
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
width：控制 viewport 的⼤⼩，可以指定的⼀个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时
的 CSS 的像素）。
height：和 width 相对应，指定⾼度。
initial-scale：初始缩放⽐例，也即是当页⾯第⼀次 load 的时候缩放⽐例。
maximum-scale：允许⽤户缩放到的最⼤⽐例。
minimum-scale：允许⽤户缩放到的最⼩⽐例。
user-scalable：⽤户是否可以⼿动缩放。
Bootstrap的栅格系统
container
row
column
注意事项：使⽤Bootstrap的时候不要让⾃⼰的名字与Bootstrap的类名冲突。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。