BootStrap和LayUI

1. BootStrap

• BootStrap的使用
  Bootstrap是一套现成的CSS样式集合，Bootstrap 是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。

   1.特点：
   	1.简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让web开发更速、简单。
   	2.基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
   	3.自定义JQuery插件，完整的类库，bootstrap3基于Less，bootstrap4 基于Sass的CSS预处理技术。
   	4.Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap 响应式布局设计，给用户提供更好的视觉使用体验。
   	5.丰富的组件。
   2.使用：
   	载入Bootstrap的css：
   		<link href="css/bootstrap.min.css" rel="stylesheet">
   	如果要使用Bootstrap的js插件，必须先调入jQuery：
   		<script src="js/jquery-3.4.1.js"></script> 
   	 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用：
   	 	<script src="js/bootstrap.min.js"></script>
   3.html标准模板中内容：
   	使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式：
   		<meta http-equiv="X-UA-Compatible" content="IE=edge">				
   	viewport表示用户是否可以缩放页面； 
   	width指定视区的逻辑宽度； 
   	device-width指示视区宽度应为设备的屏幕宽度； 
   	initial-scale指令用于设置Web页面的初始缩放比例；
   	initial-scale=1则将显示未经缩放的Web文档；
   		<meta name="viewport" content="width=device-width, initial-scale=1">
  

• 布局容器

   1..container 类用于固定宽度并支持响应式布局的容器。
   2..container-fluid类用于100%宽度，占据全部视口（viewport）的容器。
  

• 栅格网格系统

   行 row 			列 column
   	行：.row
   	列：col-xs-列数  col-sm-列数  col-md-列数   col-lg-列数
   1.列组合：
   	列组合简单理解就是更改数字来合并列（原则：列总和数不能超12，大于12,则自动换到下一行。），有点类似于表格的colspan属性。
   2.列偏移：
   	让列之间产生一些间隙  col-md-offset
   3.列排序：
   	列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
   	在Bootstrap框架的网格系统中是通过添加类名col-md-push-* 和col-md-pull-*  (其中星号代表移动的列组合数)。往前pull，往后push。
   4.列嵌套：
   	Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.
  

• 排版常用样式

   1.标题
   	Bootstrap和普通的HTML页面一样，定义标题都是使用标签。
   2.段落
   	通过.lead来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
   		<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong> </p>
   3.强调
   	定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调：
   		.text-muted			 	提示，使用浅灰色（#999）。
   		.text-primary			主要，使用蓝色（#428bca）。
   		.text-success			成功，使用浅绿色(#3c763d) 。
   		.text-info				通知信息，使用浅蓝色（#31708f） 。
   		.text-warning			警告，使用黄色（#8a6d3b） 。
   		.text-danger			危险，使用褐色（#a94442）。
   4.对齐效果
   	在CSS中常常使用text-align来实现文本的对齐风格的设置。
   	Bootstrap通过定义四个类名来控制文本的对齐风格：
   		.text-left				左对齐 。
   		.text-center			居中对齐 。
   		.text-right				右对齐 。
   		.text-justify			两端对齐。
   5.列表
   	1.去点列表 			class="list-unstyled"
   	2.内联列表 			class="list-inline"
   		保持水平显示。内联列表就是为制作水平导航而生。
   	3.定义列表			class="dl-horizontal"
   		水平定义列表。当标题宽度超过160px时，将会显示3个省略号。
   6.代码
   	Bootstrap提供了三种代码风格：
   		1.单行内联代码			<code>代码</code>
   		2.多行块代码				<pre>代码</pre>
   			代码会保留原本的格式，包括空格和换行。
   			显示html标签的代码需要适应字符实体，小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。
   			pre-scrollable (height,max-height高度固定,为340px,超过会存在滚动条)
   		3.快捷键					<p><kbd>快捷键</kbd></p>
   7.表格
   	1.表格样式：
   		基础样式： 
   			.table：基础表格 
   		附加样式：
   			.table-striped		斑马线表格 。
   			.table-bordered		带边框的表格 。
   			.table-hover		鼠标悬停高亮的表格 。
   			.table-condensed	紧凑型表格，单元格没内距或者内距较其他表格的内距小。
   	2.tr、th、td样式：
   		.active 		将悬停的颜色应用在行或者单元格上。
   		.success 		表示成功的操作。
   		.info 			表示信息变化的操作。
   		.warning 		表示一个警告的操作。
   		.danger 		表示一个危险的操作。
  

• 表单

   1.表单元素：
   	1.输入框text			.form-control
   		空间大小				.input-lg（较大）.