Bootstrap基础学习笔记
【网格系统】
.row |
定义一行 |
---|---|
.col |
均分列数,最多一行12列。每列左右间隙各15px |
.col-{1到12} |
定义在所有屏幕下的列宽 |
.col-{sm|md|lg|xl}-{1到12} |
定义在指定屏幕下该列占据的列宽,sm:屏幕>=576px、md:屏幕>=720px、lg:屏幕>=960px、xl:屏幕>=1200px |
.offset-{1到11} |
在所有屏幕下的列偏移 |
.offset-{sm|md|lg|xl}-{1到11} |
在指定屏幕下的列偏移 |
【显示隐藏】
.d-none |
在较小屏幕下隐藏 |
---|---|
.d-{sm | md | lg | xl}-none |
在指定屏幕大小下隐藏 |
.d-block |
在较小屏幕下显示 |
.d-{sm | md | lg | xl}-block |
在指定屏幕大小下显示 |
【常用背景颜色】
.bg-primary |
重要的背景颜色 |
---|---|
.bg-success |
执行成功背景颜色 |
.bg-info |
信息提示背景颜色 |
.bg-warning |
警告背景颜色 |
.bg-danger |
危险背景颜色 |
.bg-secondary |
副标题背景颜色 |
.bg-dark |
深灰背景颜色 |
.bg-light |
浅灰背景颜色 |
【文字常用标签】
<h1>、<h2>、<h3>、<h4>、<h5>、<h6> |
标题类标签,h1字体最大以次类推 |
---|---|
<small> |
更小、颜色更浅的字号。 |
<mark> |
黄色背景及有一定的内边距的文本 |
<abbr> |
简要标签, 结合title使用,示例: <abbr title="移上去显示这里的文字">Add:</abbr> |
<blockquote> |
引用标签,可结合.blockquote 类,及footer标签、blockquote-footer 示例:<blockquote class="blockquote">内容 <footer class="blockquote-footer">脚底</footer> </blockquote> |
<dl>、<dt>、<dd> |
在bootstrap中,dt、dd默认为块级元素。其中dt为粗体字。 |
<code> |
内联代码样式 |
<pre> |
块级代码样式 |
<kbd> |
内联样式,黑色圆角边框,白字样式。 |
【文字常用样式】
.display-{1到4} |
标题类,显示更大的字号,值为1-4,display-1字号最大。 |
---|---|
.small |
更小、颜色更浅的字号。 |
.font-weight-bold |
粗体 |
.font-weight-normal |
普通文本 |
.font-weight-light |
更细的文本 |
.font-italic |
斜体文本 |
.lead |
让段落更突出 |
.text-left |
左对齐 |
.text-right |
右对齐 |
.text-center |
居中对齐 |
.text-justify |
两端对齐 |
.text-nowrap |
段落中超出屏幕部分不换行 |
.text-lowercase |
设定文本小写 |
.text-uppercase |
设定文本大写 |
.text-capitalize |
设定单词首字母大写 |
.initialism |
显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字 |
.list-unstyled |
移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式) |
.list-inline |
内联列表样式。将所有列表项放置同一行 |
.pre-scrollable |
使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 |
【文字颜色样式】
.text-muted |
柔和的文本 |
---|---|
.text-primary |
重要的文本 |
.text-success |
执行成功的文本 |
.text-info |
代表一些提示信息的文本 |
.text-warning |
警告文本 |
.text-danger |
危险操作文本 |
.text-secondary |
副标题 |
.text-white |
白色文本(白色背景上看不清楚) |
.text-dark |
深灰色文字 |
.text-light |
浅灰色文本(白色背景上看不清楚) |
【表格标签】 |
|
---|---|
<table> |
定义一个表格 |
<thead> |
表格表头 |
<tbody> |
表格主体内容 |
<tr> |
行 |
<th> |
表头列 |
<td> |
单元格 |
<caption> |
表格标题 |
【table样式】 |
|
.table |
基类,以下样式均应用于<table... |
.table-striped |
定义条纹表格,示例:<table class="table table-striped"> |
.table-bordered |
定义带有边框的条件,示例: <table class="table table-bordered"> |
.table-hover |
为表格的每一行添加鼠标悬停效果(灰色背景),示例:<table class="table table-hover"> |
.table-dark |
定义黑色背景的表格,示例:<table class="table table-dark"> |
.table-responsive |
创建响应式表格:在屏幕宽度小于 992px 时会创建水平滚动条,如果可视区域宽度大于 992px 则显示不同效果(没有滚动条),示例: <table class="table table-responsive"> |
.table-responsive-{sm|md|lg|xl} |
定义在指定屏幕尺寸下响应式表格 |
.table-lg |
较大的表格,示例:<table class="table table-lg"> |
.table-sm |
较小的表格,示例:<table class="table table-sm"> |
【tr、thead样式】 |
|
.table-primary |
指定tr或thead行的颜色,下同 |
.table-success |
同上 |
.table-info |
同上 |
.table-danger |
同上 |
.table-warning |
同上 |
.table-active |
同上 |
.table-secondary |
同上 |
.table-light |
同上 |
.table-dark |
同上 |
【图形】
.rounded |
图片显示圆角效果 |
---|---|
.rounded-circle |
设置椭圆形图片 |
.img-thumbnail |
设置图片缩略图(图片有边框) |
.img-fluid |
响应式图片 |
.float-right |
图片右对齐 |
.float-left |
图片左对齐 |
【容器类】
.container |
居中容器类,最大宽度默认为1200px。左右间隙15px |
---|---|
.container-fluid |
全屏容器类。 |
.jumbotron |
创建一个大的灰色的圆角背景框 |
.jumbotron-fluid |
创建全屏的没有圆角的背景框 |
【信息提示】
.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> |
按钮样式 |
|
---|---|
.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 |
小号按钮组 |
菜单触发样式 |
|
---|---|
.dropdown-toggle |
下拉基类,定义一个触发下拉的元素。要和data-toggle="dropdown"属性结合使用 |
.dropdown-toggle-split |
菜单分割线,作用未知 |
菜单列表样式 |
|
.dropdown-menu |
定义一个下拉菜单容器 |
.dropdown-menu-right |
下拉菜单容器右对齐。默认是左对齐 |
.dropdown-header |
下拉菜单标题 |
.dropdown-item |
下拉菜单列表项目 |
.dropdown-divider |
在下拉菜单中创建一个水平的分割线 |
.active |
启用指定下拉菜单列表项目 |
.disabled |
禁用指定下拉菜单列表项目 |
【徽章】
.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} |
定义进度条的颜色 |
【分页】
.pagination |
定义分类容器类,一般使用ul来定义:<ul class="pagination"></ul> |
---|---|
.pagination-{lg|sm} |
定义页码大小 |
.page-item |
页码容器类,一般使用li来定义:<li class="page-item">... |
.page-link |
定义分页连接 |
.active |
高亮显示该页码,深蓝色背景,白字 |
.disabled |
禁用该页码,不可点击状态 |
【面包屑导航】类似当前位置导航,它会自动在每项后面加上 /
.breadcrumb |
容器类 |
---|---|
.breadcrumb-item |
链接类 |
.active |
当前项 |
【列表: 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-{...}不是理想的配色方案,不建议使用。 |
【卡片】卡片用于定义一块带圆角的区域。
.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} |
定义卡片的背景色,定义在卡片容器上 |
【边框】
.border |
含有边框 |
---|---|
.border-{primary | second | dark | light | warning | danger | success | info | white} |
边框的颜色 |
.border-0 |
四条边都不含边框 |
.border-{top | right | bottom | left }-0 |
指定哪一条边不含边框 |
【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同时设置 |
【折叠】可以很容易的实现内容的显示与隐藏。
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>
宽度百分比样式:
.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% |
- 深入理解 Java 并发之 synchronized 实现原理
- 你真的很熟分布式和事务吗?
- 基于Nginx负载均衡方案
- Android 使用android-support-multidex解决Dex超出方法数的限制问题
- Netty 实现原理浅析
- 上海2017QCon个人分享总结
- 为最佳性能调优 Nginx
- 《微信小程序七日谈》- 第一天:人生若只如初见
- 类加载器详解
- 《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维
- 《微信小程序七日谈》- 第三天:玩转Page组件的生命周期
- 《微信小程序七日谈》- 第四天:页面路径最多五层?导航可以这么玩
- 《微信小程序七日谈》- 第五天:你可能要在登录功能上花费大力气
- 《微信小程序七日谈》- 第六天:小程序devtool隐藏的秘密
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- (建议收藏)关于JS事件循环, 这一篇就够啦
- TensorFlow2 开发指南 | 02 回归问题之汽车燃油效率预测
- 腾讯云TKE-Ingress案例: TKE-Ingress与Nginx-Ingress共存
- 玩转Kotlin 彻底弄懂Lambda和高阶函数
- leetcode之仅仅反转字母
- 3分钟短文:Laravel的“南天门”,过滤掉七七八八的数据
- 【1024,Serverless】maimai_DX 查分器
- TRTC/MLVB/IM案例:SDK用户日志提取与管理的一种实现方案
- 从 1 到 0 构建博客项目(3) --LNMP--WordPress
- 4. Validator校验器的五大核心组件,一个都不能少
- leetcode之罗马数字转整数
- B站签到-云函数
- echarts常用功能封装|抽象为mixin
- TCB系列学习文章——云开发的云托管(八)
- TCB系列学习文章——云开发登录篇(九)