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">&times;</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">&times;</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%

 

相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页
实付 39.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值