Bootstrap页面框架

Bootstrap页面框架

---

Bootstrap页面框架是已经提前写好了一大堆css和js，我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能。

Bootstrap链接：https://v3.bootcss.com/

1.文件结构

bootstrap.css
bootstrap.js
ps:js部分是需要依赖于jQuery

• CDN链接

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

2.核心部分

（1）布局容器

• 左右有留白

class="container"

• 无留白

class="container-fluid"

（2）珊格系统

class = "row"					   一行均分12份
class = "col-md-8"			 划分一行的8份

（3）屏幕参数

	col-md-6 col-xs-2 col-sm-3 col-lg-3

（4）栅格偏移

	col-md-offset-3

3.重要样式

（1）表格样式

	<table class="table table-hover table-striped">
	颜色
 	 <tr class="success">

（2）表单标签

	class = "form-control"

（3）按钮组

class = "btn btn-primary btn-block"

4.组件

（1）图标

	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
	https://fontawesome.com.cn/

（2）导航条

class="navbar navbar-inverse"