学习bootstrap4的心得

bootstarp 使用教程

移动设备优先

在顶部添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<-- 设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。</-->

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

容器（Container)

<div class="container">
  ...
</div>

Bootstrap 3 的 container class 用于包裹页面上的内容。让我们一起来看看 bootstrap.css 文件中的这个 .container class。

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

通过上面的代码，把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。

请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。

网格系统

下面是 Bootstrap 网格的基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

响应实用功能

需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面 (≥992px)	大屏幕 桌面 (≥1200px)
.visible-xs-*	可见	隐藏	隐藏	隐藏
.visible-sm-*	隐藏	可见	隐藏	隐藏
.visible-md-*	隐藏	隐藏	可见	隐藏
.visible-lg-*	隐藏	隐藏	隐藏	可见
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

实例

特别小型 ✔ 在特别小型设备上可见

小型 ✔ 在小型设备上可见

中型 ✔ 在中型设备上可见

大型 ✔ 在大型设备上可见

列排序

.row 是一个行

.col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序

.col-md-offset-3 偏移

容器

个人理解

两种容器

1. container 这是一个容器他是响应式的
2. container-fluid 容器流 100%宽度

容器里的行

1. row 这个可以换行
2. col 这个是列 分类 sm < md < lg < xl
3. w-100 分割 把一行分开

隐藏和显示

全部隐藏

.d-none

全部显示

.d-black

隐藏指定

.d-black .d-sm-none .d-md-black

显示指定

.d-none .d-sm-black .d-md-none

对齐和排列

列对齐

行上面使用

.align-items-start 居顶

.align-items-center 居中

.align-items-end 居底

列上面使用

.align-self-start

.align-self-center

.align-items-end

行对齐

justify-content-center

justify-content-start

justify-content-end

justify-content-between 两端对齐

justify-content-around 间隔对齐

排序

order-1

order-2

order-3

margin微调

margin-left ml-*

margin-right mr-*

左右对齐

ml-auto

mr-auio

内容排版

列表类

列表初始化

.list-unstyled

实现内联

水平列表

text-truncate 超出用点显示

代码和图文

<pre><code>var a = b + c;</code> </pre>

image响应式

img-fluid

缩略图

img-thumbnail

图片和说明

表格样式

自己去找

颜色和边框

说明

文本样式

工具样式一

注解 text-hide 虽然隐藏但是可以抓取

工具样式二

宽度

阴影

工具样式三

组件

警告框

警告框的使用

关闭警告框

使用jquery关闭

使用自带属性关闭

徽章和面包屑导航

使用

面包屑导航

按钮和按钮组

按钮组

复选按钮组

单选按钮组

新单选按钮复选按钮

在class加入btn-group-toggle

分页按钮组

单个分页按钮组

两组互不关联

合并按钮组

垂直按钮组

卡片

普通卡片

列表卡片

list-group-flush 去除列表边框 防止和卡片边框重叠

列表的三列

卡片加图片和链接

卡片选项卡

普通模式选项卡

按钮模式选项卡

卡片字体在图片上显示

卡片分组

card-group 在父元素上面设置,