Bootstrap 框架

一.Bootstrap介绍

由 twitter 于2011年8月在 Github 上开发的开源产品

因为bootstrap是依赖jQuery.js这个js库 , 所以在引入bootstrap.js之前一定要引入 jQuery.js

二. Bootstrap栅格系统布局

	超小屏幕 <576px	小屏幕 ≥576px	中等屏幕 ≥768px	大屏幕 ≥992px	超大屏幕 ≥1200px
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None (auto)	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-

• 列数（column） 都是12
• 都可嵌套
• 都可以偏移（Offsets）
• 都可以列排序

三.栅格系统的基本用法

引入栅格系统

1. 行(row)必须在.container 中

2. 使用行在水平方向创建列(换句话就是列必须在行中被包裹)

3. 具体内容应该放置于列中(column)内

4. 例如:内置像row和col-4 (占4列)

 布局容器

container和 container-fluid 

container在中等屏幕以上会将元素进行居中(PC端使用较多)

container-fluid是无论什么屏幕都是占100%的宽度

列组合 col||sm||md||lg||xl-*

列偏移 offset-md-*

列嵌套

在col中在嵌套一个row 并且还可以继续平分这个空间 还可以分成12等份

四. bootstrap 排版

4.1 响应式图片

img-fluid

<img

src="./img/app_gitmindcn_resources_5eff9e59eb18d9dfbc01b170d0cb7aaa_1591323135382_9150ef63c00361823c82b44054afdea6.png" class="img-fluid">

4.2 标题

1. h1-h6标签

2. .h1和.h6类名

3. Small 标签 副标题 (占80%);

4.3 缩略语

initialism

4.4 地址元素 address

<address>
  <strong> Twitter, Inc. </strong><br />
  1355 Market St,<br />
  Suite 900 San Francisco, <br />
  CA 94103 P: (123) 456-7890 <br />
  Full Name <br />
  <br />
  <a href="#"> first.last@example.com</a>
</address>

4.5 List 列表

介绍

1. 无序列表

2. 有序列表

3. 去点列表(.list-unstyled)

4. 内联列表 .list-inline

5. dl列表

 4.6 表格样式Tables

带背条纹表格 .table-striped

带边框 .table-border

响应式表格

行样式 .active .success .info

紧凑 .table-condensed

悬停 .table-hover

内联表单

class="form-inline"