2021-07-11bootstrap框架基本了解

Bootstrap栅格布局

####栅格布局简介

Bootstrap内置了一套响应式，移动设备优先的流式栅格系统，随着屏幕设备或视口(viewport)尺寸的增加，系统会自动分为最多12列，它包含了易于使用的预定义class，还有强大的mixin用于生成更具语义的布局。
容器：行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中，以便为其赋予合适的排列(aligment)和内补(padding)。
rem：实际上是设置列的高度的属性，rem的值是整数，代表的高度是rem值*字体像素大小。
工作原理如下：
行(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-**不存在，也影响大屏幕设备。
在前端开发中，使用框架会带来很舒畅的开发过程，但某些情况下，使用框架可能会导致性能问题，例如，开发一个网页，也用到了Bootstrap框架的一些东西，但使用率仅仅有百分之几，这种情况下，浏览器在加载这个网页的时候，会将Bootstrap剩下没有用到的百分之九十多也会加载，存在了一些性能浪费，这种情况下我们就需要对框架进行定制或优化，取出我们用到的代码，或者删除掉无用的代码，这需要对源码有相应的熟悉才能做到。

Bootstrap相应设备类型

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

<div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
	</div>
</div>

有时我们可以设置列偏移，让中间保持空隙offset,权值相加不能大于12

<div class="container">
	<div class="row">
		<div class="col-md-8"></div>
		<div class="col-md-3 offset-1"></div>
	</div>
</div>

移动设备优先

<meta name="viewport" content="width=devieve-width,initial-scale=1,maximum-scale=1,user-scalable=no">

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

<div class="container"></div>
<div class="container-fluid"></div>//100%

栅格布局中有一个特殊的类col-auto，这个类会根据内容的大小自动的扩充列数，而普通的如果内容的长度超过列就会加行

栅格水平和垂直布局

水平布局是通过在行的div标签中利用justify-content-类型来实现的

justify-content-start      页面左部
justify-content-center      页面中间
justify-content-end      页面右部

垂直布局和水平布局类似，利用align-items-类型来实现的垂直布局
设置高度之后

align-items-start         页面左上部
align-items-center         页面中部
align-items-end         页面右下部

栅格排序和偏移

通过order-数值这个类进行网格的位置排列
Bootstrap还支持列嵌套，有了列嵌套，栅格布局先得非常的灵活

表格样式

表格

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

基本格式

<table class="table">

条纹状表格，让里的行产生一行隔一行加单色背景效果

<table class="table table-striped">
```html
##### 带边框的表格
```html
<table class="table table-borderd">

悬停鼠标背景变色

<table class="table table-hover">

状态类

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

隐藏某一行

<tr class="sr-only">

响应式表格设置之后，当小于限定值的时候，会出现横向滚动条

按钮

Bootstrap提供了很多丰富按钮开发者使用，可作为按钮使用的标签或元素转化成普通按钮

<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default"></button>
<input type="button" class="btn btn-default" value="input">

预定义样式

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

尺寸大小

从大到小的尺寸

<button class="btn btn-lg"></button>
<button class="btn"></button>
<button class="btn btn-sm"></button>
<button class="btn btn-xs"></button>

块级按钮

<button class="btn btn-block"></button>

激活状态

<button class="btn active"></button>

禁用状态

<button class="btn active disabled"></button>

表单

基本样式

<input type="text" class="form-control">//圆角，阴影，100%宽，hover效果
<input type="checkbox">//
<input type="radio">//

内联表单

让表单左对齐浮动，并表现为inline-block内联块结构

<form class="form-inline">

表单合组

前后增加片段

<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"></form>

复选框和单选框

设置复选框，在一行

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

下拉列表

设置下拉列表

<select class="form-control">
	<option>1</option>
	<option>1</option>
	<option>1</option>
	<option>1</option>
</select>

校验状态

设置为错误状态，还有其他状态

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-warning-sign			警告状态
glyphicon-remove		错误状态

控制尺寸

从大到小

<input type="pwaaword" class="form-control input-lg">
<input type="pwaaword" class="form-control">
<input type="pwaaword" class="form-control input-sm">

图片

三种形状

先要将图片设置成弹性width:100%

<img class="rounded">//圆角图
<img class="rounded-circl">//显示成椭圆图
<img class="img-thumbnail">//缩略图

响应式图片

<img src="img/pic.png" alt="图片" class="img-responsive">

媒体查询

第一种方法，不同的设备加载不同的css

<link rel="stylesheet" type="text/css" href="css/mobile.css" media="only screen and (max-width:576px)">

第二种方法，直接写到css中

@media only screen and(max-width:576px){}
@media only screen and(min-width:576px)and(max-width:767px){}

关键词

only 仅仅
screen 屏幕
all 全部
min-width 最小宽度
max-width 最大宽度
device-width 设备宽度
单位：rem值为整数，代表的大小为rem值*字体大小
设备类型
Bootstrap3和Bootstrap4最大的区别在于Bootrstrap4现在使用flexbox(弹性盒子)而不是浮动，

辅助类和响应式工具

辅助类

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

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

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

关闭按钮

<button type="button" class="close">&times;</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"></div>
<div class="hidden"></div>

排版样式

页面主题

Bootstrap将全局font-size设置为14px，line-height行高设置为1.428（20px）
段落元素被设置等于1/2行高（10px）颜色被设置为#333，创建包含段落突出的文本。

标题

Bootstrap分别对h1到h6进行了css样式的重构，并且还支持普通内联元素i当以class=(.h1~h6)来实现相同的功能，内联元素使用标题字体：

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

在h1_{h6元素之间，还可以嵌入一个smal元素作为副标题，h1}h3下的smal为23.4px、19.5px
、15.6px；h4_{h6下smal元素的大小只占父元素的75%，在h1}h6下的smal样式也进行了改变，颜色变成淡灰色：#7，行高为1，粗度为40。还提供了四个display类来控制标题的样式：display-1，display-2，display-3，display-4。
大小为1rem,1.25rem,1.5rem,1.75rem,2rem,2.5rem。

内联文本元素

添加标记mark元素或.mark类

<p>Bootstrap<mark>框架</mark></p>//mark高亮文本

各种加线条的文本

<del></del>/删除的文本
<s></s>/无用的文本
<ins></ins>/插入的文本
<u></u>/下划线文本
<abbr></abbr>在文本底部的一条虚线边框

各种强调的文本

<small></small>标准字号的85%<pre>与之相同
<strong></strong>加粗70%
<em></em>倾斜
<code></code>将文本颜色变红
<kbd></kbd>将文本设置成黑色背景，白色字体

代表颜色意义的类

  <p class="text-muted">柔和的文本。</p>
  <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="text-secondary">副标题。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>

代表颜色意义的背景颜色

  <p class="bg-primary text-white">重要的背景颜色。</p>
  <p class="bg-success text-white">执行成功背景颜色。</p>
  <p class="bg-info text-white">信息提示背景颜色。</p>
  <p class="bg-warning text-white">警告背景颜色</p>
  <p class="bg-danger text-white">危险背景颜色。</p>
  <p class="bg-secondary text-white">副标题背景颜色。</p>
  <p class="bg-dark text-white">深灰背景颜色。</p>
  <p class="bg-light text-dark">浅灰背景颜色。</p>

对齐

设置文本对齐

<p class="text-left"></P>//居左
<p class="text-center"></P>//居中
<p class="text-right"></P>//居右
<p class="text-justify"></P>//两端对齐，支持度不佳
<p class="text-nowrap"></P>//不换行

大小写

设置英文本大小写

<p class="text-lowercase"></P>//小写
<p class="text-upercase"></P>//大写
<p class="text-capitalize"></P>//首字母大写

第六节缩略语

<abr tile="Bootstrap" class="intialism"></abr>

第七节列表样式

<ul class="list-unstyled">//删除列表前面的黑点
	<li></li>
</ul>
<ul class="list-inline">//将列表转换为行内，一行可以放多个列表，使用需要将每一个选项添加list-inline-item
	<li class="list-inline-item"></li>
</ul>

组件

图标菜单和按钮组件

小图标组件

bootstrap提供了免费的263个小图标，具体可以参考中文官网的组件链接：http://v3.bootcss.com/components/#glyphicons。可以使用或标签来配合使用

<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="glyphicon glyphicon-play"></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="dropdowm-header">网站导航</li>
//设置菜单的分割线
<li class="divider"></li>
//设置菜单的禁用项
<li class="disabled"><a href="#">产品</a></li>
//让菜单默认显示
<div class="dropdown open">