一.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)
- 都可以列排序
三.栅格系统的基本用法
引入栅格系统
-
行(row)必须在.container 中
-
使用行在水平方向创建列(换句话就是列必须在行中被包裹)
-
具体内容应该放置于列中(column)内
-
例如:内置像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 标题
-
h1-h6标签
-
.h1和.h6类名
-
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 列表
介绍
-
无序列表
-
有序列表
-
去点列表(.list-unstyled)
-
内联列表 .list-inline
-
dl列表
4.6 表格样式Tables
带背条纹表格 .table-striped
带边框 .table-border
响应式表格
行样式 .active .success .info
紧凑 .table-condensed
悬停 .table-hover
内联表单
class="form-inline"