Bootstrap全局样式 | Serena = 阳光果苏 = 自律给我自由

# 全局样式 - 小布局

安装 BS 的智能提示插件：

sublime
a. 打开首选项 - 选择 package-control

b. 输入 pcip 回车（安装）

c. 出来的面板中搜索你要安装的插件：boostrap 4x autocomplete

Vscode
在扩展中搜索 boostrap，哪款安装量多就下载哪款，大不了后期不好用可以随时卸载
HbuilderX

自带

# 文字颜色

菜鸟：https://www.runoob.com/bootstrap4/bootstrap4-typography.html

官网：https://getbootstrap.com/docs/4.5/utilities/colors/

text-muted 浅灰色 - 带点蓝色
text-primary 蓝色
text-success 绿色
text-info 青蓝色
text-warning 橙色
text-danger 红色
text-secondary 灰色
text-dark 接近黑色
text-light 浅灰色
text-white 白色

可以用于任意标签中

# 背景颜色

菜鸟：https://www.runoob.com/bootstrap4/bootstrap4-colors.html

官网：https://getbootstrap.com/docs/4.5/utilities/colors/

bg-muted 浅灰色 - 带点蓝色
bg-primary 蓝色
bg-success 绿色
bg-info 青蓝色
bg-warning 橙色
bg-danger 红色
bg-secondary 灰色
bg-dark 接近黑色
bg-light 浅灰色
bg-white 白色

可以用于任意标签中

# 文本样式与对齐方式（文本排版）

可以设置文字大小、粗细和对齐方式
菜鸟：https://www.runoob.com/bootstrap4/bootstrap4-typography.html
官方：https://getbootstrap.com/docs/4.5/utilities/text/

设置文字大小
.h1~.h6
设置文字粗细
.font-weight-bold
.font-weight-normal
.font-weight-light

.font-italic

对齐方式

text-left  左对齐
text-center  居中
text-right  右对齐
根据设备尺寸来对齐文字：
text-设备尺寸-对齐方式
比如：
text-md-left

去掉 a 链接的下划线
.text-decoration-none

文本折行和溢出处理

text-wrap  折行
text-nowrap  不换行
text-truncate 溢出的文本出现省略号
text-break   让很长的一段文字自动换行

# 按钮

可以用于任意标签。
菜鸟：https://www.runoob.com/bootstrap4/bootstrap4-buttons.html

官网：https://getbootstrap.com/docs/4.5/components/buttons/

# 图片

菜鸟：https://www.runoob.com/bootstrap4/bootstrap4-images.html

官网：https://getbootstrap.com/docs/4.5/content/images/

响应式图片
<img src="..." class="img-fluid" alt="Responsive image">
缩略图：
<img src="..." alt="..." class="img-thumbnail">
小圆角图片：
<img src="..." alt="..." class="rounded">
图片对齐方式：左对齐、右对齐、居中对齐
<img src="..." class="float-left"> 
<img src="..." class="rounded float-right" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
图片形状：圆角图片、椭圆图片,如果图片是正方形，则是正圆
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

# 列表组

官网：https://getbootstrap.com/docs/4.5/components/list-group/
列表组可以嵌套。

普通列表组（无序，不管使用的是否是ol还是ul）：
        <ul class="list-group">
          <li class="list-group-item">First item</li>
          <li class="list-group-item">Second item</li>
          <li class="list-group-item">Third item</li>
        </ul>
高亮状态的列表项（添加 class="active"）
禁用的列表项（添加 class="disabled"）
多种颜色的列表项（.list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light）
带链接的列表项：
  1、在普通列表组使用a包裹文字，并把其改为块级标签
  2、将ul改为div，li改为a链接即可(只变标签，不变class名)
  3、在a的class那里添加颜色类

开发 BS 网站：要不要设计师设计 BS 界面？？一般可以不要。除非设计师懂得 BS 的设计理念。

# 媒体对象（图文列表）

官网：https://getbootstrap.com/docs/4.5/components/media-object/

<div class="media">
    <img class="mr-3" alt="64x64" src="img/thumb.svg" style="width: 64px; height: 64px;">
    <div class="media-body">
        <h5 class="mt-0 mb-1">List-based media object</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
</div>

# 外间距、内间距

外间距 + 内间距：

mt:margin-top
mb:margin-bottom
ml:margin-left
mr:margin-right
my: margin-top+margin-bottom
mx:margin-left+margin-right
m: margin

pt:padding-top
pb:padding-bottom
pl:padding-left
pr:padding-right
py:padding-top+padding-bottom
px:padding-left+padding-right
p:padding

mt-0，pt-0表示：margin-top:0 , padding-top:0;
mt-1表示：margin-top:0.25rem;
mt-2表示：margin-top:0.5rem;
mt-3:margin-top:1rem;
mt-4:margin-top:2rem;
pt-1:padding-top:0.25rem;

规律：后面的数值等于前面的数值*2。

Bootstrap