1. Bootstrap框架概述
Bootstrap介绍
-
Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目，
-
-
Bootstrap是为实现快速开发Web应用程序而设计的一套前端工具包
-
Bootstrap支持响应式布局，并且在V3版本之后坚持移动设备优先
Bootstrap的优点
-
使用Bootstrap之前：
-
命名：重复、复杂、无意义
-
样式：重复、冗余、不规范、不和谐
-
页面：错乱、不规范、不和谐
-
使用Bootstrap之后：
-
移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式
-
浏览器支持：所有的主流浏览器都支持Bootstrap
-
容易上手：只要具备HTML和CSS的基础知识，就可以学习和使用Bootstrap
-
响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机(响应式Web设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法)
-
其他优势：开源免费；提供了基于 Web 的定制；包含了功能强大的内置组件；为开发人员创建接口提供了一个简洁统一的解决方案
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.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js // JS文件
├── bootstrap.js
├── bootstrap.min.js // 核心JS压缩文件
└── npm.js
Bootstrap引入方式
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
2. Bootstrap样式概述
文档类型
-
Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型
移动设备优先
-
在Bootstrap 2中，对框架中的某些关键部分增加了对移动设备友好的样式。而在Bootstrap 3中，重写了整个框架，使其一开始就是对移动设备友好的。不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件
-
为了确保适当的绘制和触屏缩放，需要在head标签之中添加viewport元数据标签
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
全局显示、排版和链接
-
全局显示：
-
使用body {margin: 0;} 来移除body的边距
-
设置body的默认字体样式为"Helvetica Neue", Helvetica, Arial,sans-serif
-
设置文本的默认字体大小为14像素
-
设置默认的行高度为1.428571429
-
设置默认的文本颜色为#333333
-
设置默认的背景颜色为#FFFFFF
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
-
排版：
-
使用@font-family-base、@font-size-base和@line-height-base属性作为排版样式
-
链接样式：
-
通过属性@link-color设置全局链接的颜色
-
链接的默认样式： 当鼠标悬停在链接上，或者点击过的链接，颜色会被设置为#2a6496。同时，会呈现一条下划线。点击过的链接，会呈现一个颜色码为#333的细的虚线轮廓。另一条规则是设置轮廓为5像素宽，且对于基于webkit浏览器有一个-webkit-focus-ring-color的浏览器扩展。轮廓偏移设置为-2像素。
a:hover,a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
-
这些样式都可以在scaffolding.less中找到
避免跨浏览器的不一致
-
Bootstrap使用Normalize来建立跨浏览器的一致性
-
Normalize.css是一个很小的CSS文件，在HTML元素的默认样式中提供了更好的跨浏览器一致性，由Nicolas Gallagher和Jonathan Neal维护的一个CSS 重置样式库
布局容器
3. Bootstrap全局CSS样式
栅格系统
-
描述：栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局
-
Bootstrap栅格系统的工作原理
-
row必须包含在.container或.container-fluid中，以便为其赋予合适的排列和内补
-
通过row在水平方向创建一组column
-
显示内容放在column中，column放在row中
-
col是预定义的类，可以快速创建栅格布局。格式是："col-xx-xx"
-
栅格系统中的列是通过指定1到12的值来表示其跨越的范围
-
col设置的值等于12时，排列铺满整个空间
-
col设置的值大于12时，多余的col会换行排列
-
col设置的值小于12时，从左往后排列，后面空出
-
栅格的类前缀
-
大屏幕([大显示器]≥1200px)：.col-lg-xx
-
中等屏幕([普通显示器]≥992px)：col-md-xx
-
小屏幕([平板]≥768px)：col-sm-xx
-
超小屏幕([手机]<768px)：col-xs-xx
-
列偏移
-
列嵌套
-
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-xx元素到已经存在的.col-sm-xx元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12个
-
列排序
-
.col-md-push-xx：向右侧移动(推)
-
.col-md-pull-xx：向左侧移动(拉)
排版
代码
-
内联代码
-
code标签：包裹内联样式的单行代码内容(需要把特殊符号使用特殊字符替换)
-
用户输入
-
代码块
-
pre标签：包裹多行代码块(需要注意将尖括号做转义处理)
-
-
变量
-
程序输出
表格
-
基本样式表格：为table标签添加.table类就可以为表格添加上基本样式
-
条纹状表格：添加.table-striped类
-
带边框的表格：添加.table-bordered类
-
紧缩表格：添加.table-condensed类
-
鼠标悬停：添加.table-hover类
-
状态类：
-
.active： 鼠标悬停在行或单元格上时所设置的颜色
-
.success：标识成功或积极的动作
-
.info：标识普通的提示信息或动作
-
.warning：标识警告或需要用户注意
-
.danger：标识危险或潜在的带来负面影响的动作
-
响应式表格：在table标签外层再套一层div标签，并添加.table-responsive类
表单
-
-
内联表单：
-
-
lable标签添加.sr-only类可以隐藏label标签的内容
-
-
-
被支持的控件：
-
输入框(input)：包括大部分表单控件、文本输入域控件，还支持所有HTML5类型的输入控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color
-
文本域(textarea)：支持多行文本的表单控件，可根据需要改变rows属性
-
多选和单选按钮：
-
默认样式：
-
内联多选和单选按钮：
-
多选按钮：为label标签添加..checkbox-inline类
-
单选按钮：为label标签添加..radio-inline类
-
-
下拉列表(select)：
-
-
多选：在单选的基础上再为seelct标签添加multiple 属性
-
-
禁用状态：
-
直接添加disabled属性
-
使用fieldset标签包起来，并添加disabled属性也可是实现禁用的效果
-
只读状态：直接添加readonly属性
-
Help text：显示提示或帮助信息，在input标签添加aria-describedby属性，并赋值helpBlock
-
校验状态：
-
.has-success：成功
-
.has-warning：警告
-
.has-error：错误
-
控件尺寸：
-
高度尺寸：
-
水平排列的表单组的尺寸：
-
调整列尺寸：使用栅格系统的列包裹住输入框或父元素标签的方式来设置
按钮
-
可作为按钮使用的标签或元素:
-
-
预定义样式：
-
.btn-default：默认样式
-
.btn-primary：首选项
-
.btn-success：成功
-
.btn btn-info：一般信息
-
.btn-warning：警告
-
.btn-danger：危险
-
.btn-link：普通链接
-
尺寸：
-
.btn-lg：大按钮
-
.btn-sm：小按钮
-
.btn-xs：超小尺寸按钮
-
块级按钮：添加.btn-block类，可以将其拉伸至父元素标签100%的宽度，成为块级元素
-
激活状态：添加.active类
-
禁用状态：
图片
-
响应式图片：添加.img-responsive类；如果需要图片居中需要添加.center-block类
-
图片形状：为img标签添加类
-
img-rounded：圆角图片
-
img-circle：圆形图片
-
img-thumbnail：边框图片
辅助类
-
文本颜色：
-
.text-muted类
-
.text-primary类
-
.text-success类
-
.text-info类
-
.text-warning类
-
.text-danger类
-
背景颜色：
-
.bg-primary类
-
.bg-success类
-
.bg-info类
-
.bg-warning类
-
.bg-danger类
-
关闭按钮：添加.close类
-
三角符号：添加.caret类
-
快速浮动：
-
左浮动：添加.pull-left类
-
右浮动：添加.pull-right类
-
内容块居中：添加.center-block类
-
清除浮动：添加.clearfix类
-
显示内容：添加.show类
-
隐藏内容：添加.hidden类
-
图片替换：添加.text-hide类可以用来将元素的文本内容替换为一张背景图
响应式工具
-
.visible-xs-*：超小屏幕可见，其他隐藏(可以指定的css样式类型：block、inline、inline-block)
-
.visible-sm-*：小屏幕可见，其他隐藏(可以指定的css样式类型：block、inline、inline-block)
-
.visible-md-*：中等屏幕可见，其他隐藏(可以指定的css样式类型：block、inline、inline-block)
-
.visible-lg-*：大屏幕可见，其他隐藏(可以指定的css样式类型：block、inline、inline-block)
-
.hidden-xs：超小屏幕隐藏，其他可见
-
.hidden-sm：小屏幕隐藏，其他可见
-
.hidden-md：中等屏幕隐藏，其他可见
-
.hidden-lg：大屏幕隐藏，其他可见
4. 简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>day58</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<style>
body {
background-color: #EEEEEE;
}
.row .head {
height: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="head"></div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="row">
<div class="h3 col-md-offset-4 col-md-6">请登录</div>
</div>
<form action="" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-md-3 control-label">邮箱</label>
<div class="col-md-7">
<input id="email" type="email" class="form-control" name="email" placeholder="Email">
<div class="text-danger"></div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">密码</label>
<div class="col-md-7">
<input id="password" type="password" class="form-control" name="password" placeholder="Password">
<div class="text-danger"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<div class="checkbox">
<label>
<input type="checkbox">记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<label for="login"></label>
<input id="login" type="button" class="btn btn-primary col-md-9" value="登录">
</div>
</div>
</form>
</div>
</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
function userLogin() {
$("#login").on("click", function () {
$(".form-control").each(function () {
$(this).on("focus", function () {
$(".text-danger").text("");
$(".form-group").removeClass("has-error");
});
var inputName = $(this).attr(\'name\');
var inputVal = $(this).val();
var textMsg = $(this).parent().prev().text();
if (inputVal.length === 0) {
$(this).next().text(textMsg + "不能为空");
$(this).parent().parent().addClass("has-error");
return false;
}
if (inputName === "email") {
var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g;
if (!emailReg.test(inputVal)) {
$(this).next().text(textMsg + "格式不合法");
$(this).parent().parent().addClass("has-error");
return false;
}
}
if (inputName === "password") {
if (inputVal.length < 8) {
$(this).next().text(textMsg + "格式不合法");
$(this).parent().parent().addClass("has-error");
return false;
}
}
});
return false;
})
}
$(function () {
userLogin();
});
</script>
</body>
</html>