BootStrap
- 一、介绍
- 响应式布局
- 二、Bootstrap环境配置
- 布局容器
- 三、栅格系统
- 简述
- 栅格特点
- 屏幕尺寸设置
- 列
- 表格
- 表单
- 按钮
- 按钮组
- 图片
- 导航
- 进度条
- 轮播图
一、介绍
Bootstrap基于HTML、css、JavaScript的前端框架
此框架定义一套CSS样式和央视对应的JS代码。（对应的样式有对应的特效）
开发人员只需要编写HTML架构，添加Bootstrap固定的class样式，就可以完成效果的实现
作用：Bootstrap使得web开发更加便捷，高效
支持响应式开发，解决了移动互联网前端开发问题
响应式布局
一个网站的展示能够兼容多个终端（手机、ipad、PC）而不需要为每个 终端单独做一个展示版本
响应式布局，使得网站适用一套样式，就可以在不同分辨率下展示不同 的舒适效果。大大降低了网站开发维护成本，并且给用户带来更好的体 验
此概念专门解决移动互联网浏览而产生的
二、Bootstrap环境配置
下载地址：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)
下载之后的目录结构
css、js、fonts
有了这些结构把结构里的文件导入项目里，通过引入文件标签调用就可以 使用了
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
这是一个bootstrap的通用简洁模板，需要改成本地调用文件，就是src的值
模板中的
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport:视口 浏览器上 网页内容 可视区域
视口作用：用于移动设备将大型页面进行比例缩放显示
以下的设置只在移动设备上生效
width=device-width 设置视口的宽度，device-width设备宽度
initial-scale=1 初始化缩放设置 移动设备打开网页时，缩放级别 100%
视口的常见设置
width=device-width | 视口的宽度，大多手机浏览器视口的宽度是980 device-width表示采用设备的宽度 例如手机是5.5寸，那么视口也采用5.5寸宽度 |
initial-scale=1 | 移动设备上，打开页面时的初始化缩放级别 取值：1-5 1表示100%，5表示500% |
minmum-scale=1 | 移动设备页面最小的缩放级别 |
maximum-scale=1 | 移动设备上，页面可以最大缩放级别 |
user-scalable=no | 移动设备上，页面禁止缩放 如果设置”user-scalable=no",则"minimum-scale" 和"maximum-scale"无效 |
布局容器
Bootstrap至少需要一个布局容器，才能为页面内容进行封装和方便的样式控制 相当于一个画板
还是打开官方文档，全局css样式 》概述》 布局容器
任意元素使用了布局容器的样式，都会成为一个布局容器，建议使用div作为布局容器
.container | 类用于固定宽度并支持响应式布局的容器 特点：居中、两端留白 / … / |
.container-fluid | 类用于100%宽度，占据全部视口(viewport)的容器 / … / |
三、栅格系统
简述
为了方便在布局容器中进行网页的布局操作
BootStrap提供一套专门用于响应式开发布局的栅格系统
栅格系统将一行分为12列，通过设定元素占用的列数来，布局元 素在页面上的展示位置
栅格系统：一行自定分为12列 通过设定元素占用一行上多少列， 即可完成元素在页面上的实现
栅格特点
行（row）必须包含在更多操作.container或者.container-fluid容 器内
行使用的样式".row",列使用样式"col-* - *"元素内容应当放置列元 素上
基本的书写内容方式必须是，容器 — 行 —列 ----内容
HTML表格：定义表格 行 单元格
栅格参数：col-屏幕尺寸-占用列数 col - lg - 1-12
列元素的书写顺序，决定布局顺序，先写的列元素会被布局到行 上 列元素的占用列数，定义列元素的大小
屏幕尺寸设置
超小屏幕(手机 <768px) | 小屏幕 (平板 >= 768px) | 中等屏幕(桌面显示器>=992px) | 大屏幕 大桌面显示器（>=1200px） | |
栅格系统行为 | 总是水平排列 | 开始是在堆在一起 | 开始是堆在一起 | 的，当大于这些值时将变为水平排列C |
.container最大宽度 | None(自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 | 12 | 12 | 12 |
最大列宽 | 自动 | -62px | -81px | -97px |
槽(gutter)宽 | 30px | 每列左右均有15px | ||
可嵌套 | 是 | |||
偏移 | 是 | |||
列排序 | 是 |
屏幕尺寸简述：
large：lg 大屏幕，一般pc尺寸
medium：md 中等屏幕 小pc尺寸
small:sm:sm 小屏幕，ipad尺寸
xsmall：xs 超小屏幕，智能手机尺寸
设置屏幕尺寸时 的注意事项
若设置某个屏幕尺寸的样式，那么比该尺寸的屏幕，会沿用该设置，比该尺寸小的屏幕，会默认一个元素占12列的设置
例如：设置了col-md-4，那么相当于也设置了col-lg-4
其他屏幕尺寸均默认为col-sm-12，col-xs-12
常用CSS样式类
Class | 描述 |
container | 容器样式类 |
form-group | 表单组类 |
form-control | 表单控制类 |
btn btn-primary | 按钮类 |
列
Class | 描述 |
container-fluid | 将显示区域设为与屏幕等宽 |
col-md-offset-X | 相对左边偏移X格 |
col-md-push-X | 向右移动X格 |
col-md-pull-X | 向左移动X格 |
列嵌套指的是可以在列插入一行，这行把这列再分成12份
表格
Class | 描述 |
.table-striped | 条纹状表格 |
.table-bordered | 带边框的表格 |
.table-hover | 鼠标悬停变色的表格 |
.table-condensed | 紧缩型表格 |
.table-responsive | 响应式表格 |
行样式
Class | 描述 |
info | 天空蓝 |
warning | 黄色 |
success | 绿色 |
danger | 粉色 |
active | 灰色 |
表单
用到的标签
字段标签 | |
登录 | 说明标签和标题类似，但是下面添加了一条分隔线 |
placeholder | 标签的属性 用来输入框显示提示信息 |
css样式类
form-group | 窗口表单控件(.class)之间添加15px的间距 |
form-control | 控制的宽度设置为100% |
btn btn-default | 设置按钮样式为默认样式 |
has-feedback | 插入小图标 |
<span class=”图标名 form-control-feedback” > | 在span中插入指定的图标名 |
按钮
按钮的样式类
class | 描述 |
btn-default | 默认样式 |
btn-primary | 蓝色 |
btn-success | 绿色 |
btn-info | 天空蓝 |
btn-warning | 橙色 |
btn-danger | 红色 |
btn-link | 无样式 |
不同分辨率和按钮大小
class | 描述 |
btn-lg | 按钮大 |
btn-sm | 按钮中 |
btn-xs | 按钮小 |
btn-block | 按钮与屏幕等宽 |
按钮组
class | 描述 |
btn-group | 按钮组 |
btn-toolbar | 按钮组工具栏（即按钮组的按钮组） |
btn-group-lg btn-group-sm btn-group-sx btn-lg btn-sm btn-sx | 成组指定大中小 单个指定大中小 |
btn-group-vertical | 纵向排列 |
图片
class | 描述 |
img-rounded | 圆片加圆角 |
img-circle | 图片截成圆形 |
img-thunbnail | 图片加外边框 且为响应式 |
img-responsive | 图片单纯为响应式 |
导航
class | 描述 |
class=” nav nav-tabs” | 选项卡式导航 |
class=” nav nav-pills” | 胶囊式导航 |
class=”nav nav-pills nav-stacked“ | 纵向堆叠式导航 |
class=”nav nav-pills nav-justified” | 自适应导航 |
首页 | 二级导航 就是导航里的一个li嵌套着一个导航 |
navbar navbar-default | 默认导航样式 |
navbar-header | div元素为导航条组件 |
navbar-brand | 导航条最开头的文字，相当于导航条的文字 |
navbar-nav | 扁平化设计的导航栏 |
在导航加入搜索条
navbar-form | 这个form 创建在了navbar导航栏 |
navbar-right | navbar上的组件靠右对齐 |
响应式导航用到的class
navbar-inverse | 指定导航条组件为黑色主题 |
navbar-toggle | 设置button元素为导航条组件的切换钮； |
collapse | 设置button元素为在分辨率小于768px时才显示 collapse折叠面板的意思 |
.navbar-responsive-collapse | 注意前面的.点要有，不然无效 |
sr-only | |
icon-bar | |
collapse navbar-collapse navbar-responsive-collapse | 导航响应折叠面板 |
nav navbar-nav | 设置ul为导航条组件内的列表元素; |
进度条
class | 描述 |
progress | div型的进度条容器 |
progress-bar | 进度条进度显示的div |
progress-triped | 带条纹的进度条 |
active | 动画进度条 |
轮播图
class | 描述 |
data-ride=”carousel” | 图片加载成功后马航可以使用 |
carousel slide | 轮播 |
carousel-inner | 图片不显示active在哪张上，哪张显示 |
carousel-indicators |
小圆圈
carousel-indicators | |
data-slide-to=”0” | |
data-target=”#carousel_container” |
左右按钮
prev | 向前一个 |
left carousel-control | 向左动 |
right carousel-control | 向右动 |
data-interval=’1000’ | 自动播放1秒一换 |
