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秒一换