«
bootstrap学习笔记 - 常用css汇总(2)

时间:2021-12-4    作者:范文泉    分类: 编程


【信息提示】

样式 说明
.alert 基类
.alert-{success、info、warning、danger、primary、secondary、light、dark} 各种类型的配色样式
.fade、.show 设置提示框在关闭时的淡出和淡入效果,要求二个同时调用,示例:
<div class="alert alert-success fade show">
<button class="close" data-dismiss="alert">×</button>
</div>
.alert-link 提示框内带链接样式,示例:
<div class="alert alert-success">
<a href="#" class="alert-link">这条信息</a>
</div>
.alert-dismissible 带关闭功能的提示,示例:
<div class="alert alert-success alert-dismissible">
<button class="close" data-dismiss="alert">×</button>
</div>

【隐藏、显示】

样式 说明
.d-none 在较小屏幕下隐藏
.d-{sm | md | lg | xl}-none 在指定屏幕大小下隐藏
.d-block 在较小屏幕下显示
.d-{sm | md | lg | xl}-block 在指定屏幕大小下显示

【按钮】

按钮样式

样式 说明
.btn 按钮基类
.btn-{primary | secondary | success | info | warining | danger | dark | light | link } 各种类型按钮样式
.active 按钮激活状态样式
.disabled 按钮禁用状态样式
.btn-outline-{primary | secondary | success | info | warning | danger | dark | light } 按钮边框样式

按钮大小

样式 说明
.btn-block 块级按钮
.btn-lg 大号按钮
.btn-sm 小号按钮

按钮组

样式 说明
.btn-group 水平按钮组
.btn-group-vertical 垂直按钮组

按钮组大小

样式 说明
.btn-group-lg 大号按钮组
.btn-group-sm 小号按钮组

【徽章】

【徽章】主要用于突出显示新的或未读的项

样式 说明
.badge 基类,默认样式为四角圆角6像素
.badge-pill 药丸形状徽章
.bg-{primary | secondary | info | success | warning | danger | dark | light} 定义背景色
.text-white 定义字体颜色

【进度条】

样式 说明
.progress 进度条容器类,用height来定义进度条的高度
.progress-bar 定义一个进度条,用width百分比值来定义进度条的长度
.progress-bar-striped 定义带条纹的进度条
.progress-bar-animated 动画显示进度条,必需和progress-bar-striped结合使用,不然看不到动画效果
.bg-{primary、secondary、success、warning、danger、info、dark、light} 定义进度条的颜色

进度条示例:

<div class="progress" style="height: 40px;">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 75%;">当前进度:75%</div>
</div>

【分页】

样式 说明
.pagination 定义分类容器类,一般使用ul来定义:<ul class="pagination"></ul>
.pagination-{lg|sm} 定义页码大小
.page-item 页码容器类,一般使用li来定义:<li class="page-item">...
.page-link 定义分页连接
.active 高亮显示该页码,深蓝色背景,白字
.disabled 禁用该页码,不可点击状态

【面包屑导航】

类似当前位置导航,它会自动在每项后面加上 /

样式 说明
.breadcrumb 容器类
.breadcrumb-item 链接类
.active 当前项

【卡片】

卡片用于定义一块带圆角的区域。

样式 说明
.card 定义卡片容器
.card-body 卡片主体内容部份
.card-header 卡片头
.card-footer 卡片尾
.card-title 卡片标题
.card-text 卡片文本区域
.card-link 卡片链接
.card-img-top 卡片中图片位于文字顶部
.card-img-bottom 卡片中图片位于文字底部
.card-img-overlay 卡片中图片做为背景
.bg-{primary、secondary、success、warning、danger、info、dark、light} 定义卡片的背景色,定义在卡片容器上

例子:

<div class="card bg-success">
    <div class="card-header">...</div>
    <div class="card-body">
        <div class="card-title">...</div>
        <div class="card-text">
            <a href="#" class="card-link">链接</a>
            <img class="card-img-{top|bottom|overlay}" src="..." width="" height=""/>
        </div>
    </div>
    <div class="card-footer">...</div>
</div>

【margin、padding】

分别采用m与p的简写方式

margin间距样式:

样式 说明
.m-{0 | 1 | 2 | 3 | 4 | auto} 定义四周间距
.m-0 等价于{margin:0 !important}
.m-1 等价于{margin:0.25rem !important}
.m-2 等价于{margin:0.5rem !important}
.m-3 等价于{margin:1rem !important}
.m-4 等价于{margin:1.5rem !important}
.m-auto 等价于{margin:auto !important}
.mt-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-top设置
.mr-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-right设置
.mb-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-bottom设置
.ml-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-left设置
.mx-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-left与margin-right同时设
.my-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-top与margin-bottom同时设置

padding间距样式:

样式 说明
.p-{0 | 1 | 2 | 3 | 4 | auto} 定义四周间距 \
.p-0 等价于{padding:0 !important}
.p-1 等价于{padding:0.25rem !important}
.p-2 等价于{padding:0.5rem !important}
.p-3 等价于{padding:1rem !important}
.p-4 等价于{padding:1.5rem !important}
.p-auto 等价于{padding!important}
.pt-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-top设置
.pr-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-right设置
.pb-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-bottom设置
.pl-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-left设置
.px-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-left与padding-right同时设置
.py-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-top与padding-bottom同时设置

【宽度百分比样式】

样式 说明
.w-25 宽度25%
.w-50 宽度50%
.w-75 宽度75%
.w-100 宽度100%
.mw-100 最大宽度100%

【高度百分比样式】

样式 说明
.h-25 高度25%
.h-50 高度50%
.h-75 高度75%
.h-100 高度100%
.mh-100 最大高度100%

【折叠】

可以很容易的实现内容的显示与隐藏。

样式 说明
data-toggle="collapse" 折叠触发对象必需属性
data-target="#id" | href="#id" 折叠触发对象必需属性
.collapse 折叠目标对象样式
data-parent="#id" 属性来实现父元素下,某一个折叠选项显示时其他选项就隐藏。

触发元素要设置以下属性:

data-toggle = "collapse"
data-target = "#id" 或者链接的href代替此属性 href="#id"

触发下拉元素代码示例:

<!-- 要折叠的容器ID:lists -->
<button data-toggle="collapse" data-target="#lists">折叠</button>
<!-- 或者 -->
<a data-toggle="collapse" href="#lists">折叠</a>

折叠元素设置样式为: collapse,代码示例:

<div id="lists" class="collapse">
    这里是折叠显示的内容
</div>

完整代码:

<button data-toggle="collapse" data-target="#lists" class="btn btn-primary" >折叠</button>
<div id="lists" class="collapse">
  这里是折叠显示的内容
</div>

默认折叠内容是隐藏的,如果要默认显示,需要加上show样式,如下:

<button data-toggle="collapse" data-target="#lists" class="btn btn-primary">折叠</button>
<div id="lists" class="collapse show">
  这里是折叠显示的内容
</div>

如果想使某一对象显示时,其它对象隐藏,需要使用 data-parent="#id" 属性
data-parent ="#id" 属性来实现父元素下,某一个折叠选项显示时其他选项就隐藏。代码示例:

<div class="container">
  <div id="area">
    <a href="#con-1" data-toggle="collapse" class="d-block">列表一</a>
    <div class="collapse" data-parent="#area" id="con-1">
       列表一内容
    </div>
    <a href="#con-2" data-toggle="collapse" class="d-block">列表二</a>
    <div class="collapse" data-parent="#area" id="con-2">
       列表二内容
    </div>
    <a href="#con-3" data-toggle="collapse" class="d-block">列表三</a>
    <div class="collapse" data-parent="#area" id="con-3">
       列表三内容
    </div>
  </div>
</div>

【列表: ul/ol/dl】

列表默认样式为垂直样式,一个项目占据一行。带灰色圆角边框。

样式 说明
.list-group 定义列表容器类
.list-group-item 定义列表项目类
.active [列表项目]激活状态下的列表项,蓝色背景,白色字
.disabled [列表项目]禁用状态下的列表项,白色背景,浅灰色字
.list-group-item-action [列表项目]鼠标移上去列表背景变成灰色
.list-group-item-{primary、secondary、success、danger、warning、info、dark、light} 定义列表项的背景色。注意使用bg-{...}不是理想的配色方案,不建议使用。

[ol/ul/dl列表示例]

<ul class="list-group">
    <li class="list-group-item">默认选项样式</li>
    <li class="list-group-item active">激活状态下样式</li>
    <li class="list-group-item list-group-item-action">鼠标称外去显示灰色背景</li>
    <li class="list-group-item disabled">禁用样式</li>
</ul>

也可以使用链接代替ul/ol/dl,示例:

<div class="list-group">
    <a href="#" class="list-group-item">默认样式</a>
    <a href="#" class="list-group-item active">激活状态下样式</a>
    <a href="#" class="list-group-item list-group-item-action">鼠标称外去显示灰色背景</a>
    <a href="#" class="list-group-item disabled">禁用样式</a>
</div>

标签: bootstrap 样式 css