1.清除浮动：
父级元素：after{
content:\"\";
display:\"block\";
clear:both;
}
2.初始化：
box-sizing: border-box;
3.媒体查询
父元素设置宽度和居中，子元素设置百分比
4.Bootstrap
(1).条纹状表格:table-striped
表格边框:table-bordered
鼠标悬停:table-hover
响应式表格:table-reponsive
(2).块级按钮:btn-block
(3).首字母大写：text-capitalize
(4).加粗:font-weight-bold
(5).斜体:font-italic
(6).列表：ul:list-unstyled list-group
li:list-group-item list-group-item-success active
(7).左浮动:float-left
右浮动:float-right
清除浮动:clearfix
(8).居中对齐:mx-auto my-auto
(9).内、外边距、边框:p-1 m-1 border-danger
(10).响应式图片:img-fluid
(11).两端对齐文本:text-justify
(12).宽高百分比:w-25 h-25
(13).栅格布局:
行:.row
列:.col-sm/md/lg-3
偏移:offset-md-5
注意:.row一定要和.col一起使用
(14).字体大小:h1-h5标签
(15).输入框变块级元素:form-control
(16).块级元素变行级元素:用.col-md-4包住h1标签
(17).计算偏移的时候:注意把之前的位置算进去
(18).弹性布局:d-flex
水平方向:.flex-row .flex-row-reverse
垂直方向:.flex-column .flex-column-reverse
左中右内容排列:justify-content-between
间隔一定的距离:justify-content-around
(19).表单多选项:form-check
多选框:input:form-check-input
水平表单:form-inline
堆叠表单:form-group
(20).输入框变长:w-100
(21).水平表单:form-inline代替row
(22).下拉表单:
基本格式:<div class=\"dropdown|dropup\">
<button class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\">
<ul class=\"dropdown-menu\">
标题:dropdown-header
分割线:<li class=\"divider\"></li>
禁用:<li class=\"disabled\">
列表:dropdown-item
注意:上述data-toggle=\"dropdown\"会被bootstrap.js选中，添加事件监听。
(23).按钮组:a.基本按钮组:btn-group
b.垂直排列:btn-group-vertical
c.尺寸:.btn-group-lg|sm|xs
(24).导航:
水平导航:<ul class=\"nav nav-justified\">
<li class=\"nav-item\">
<a class=\"nav-link\">
注意:nav-justified类可以设置导航项等宽显示
选项卡导航:<ul class=\"nav nav-tabs\">
<li class=\"nav-item\">
<a class=\"nav-link\" data-toggle=\"tab\" href=\"#one\">
对应内容:<div class=\"tab-content\">
<div class=\"tab-pane\" id=\"one\">
胶囊式标签页:<ul class=\"nav nav-pills\">
(25)折叠:<button data-toggle=\"collapse\" data-target=\"#demo\">
<div class=\"collapse\" id=\"demo\">
(26)折叠导航栏
<nav class=\"navbar navbar-expand-sm\">
<!--最前面的标题文字不隐藏-->
<a class=\"navbar-brand\">
<!--在小屏幕下出现的按钮上面显示三条线-->
<button class=\"navbar-toggler\" data-toggle=\"collapse\" data-target=\"#c-navbar\">
<!--三个短横线图标-->
<span class=\"navbar-toggler-icon\"></span>
</button>
<!--导航列表内容-->
<div class=\"collapse navbar-collapse\" id=\"c-navbar\">
<ul class=\"navbar-nav\">
<li class=\"nav-item\">
<a class=\"nav-link\">
注意:使用.navbar类创建导航栏，后面紧跟.navbar-expand-xl/lg/md/sm类来创建响应式的导航栏（大屏幕铺开显示，小屏幕垂直堆叠）navbar-rexpand-xl/lg/md/sm一直垂直堆叠
(27)手风琴
<div id=\"accordion\">
<!--卡片1-->
<div class=\"card\">
<!--卡片头部-->
<div class=\"card-header\">
<a href=\"#collapseOne\" class=\"card-link\" data-toggle=\"collapse\">选项内容一</a>
</div>
<!--卡片内容-->
<div id=\"collapseOne\" class=\"collapse\" data-parent=\"#accordion\">
<div class=\"card-body\">
展示内容
</div>
注意：使用data-parent属性来确保所有折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时，其他选项隐藏。
(28).媒体对象:
<div class=\"media\">
<img src=\"a.jpg\" class=\"rounded align-self-start\">
<div class=\"media-body\">...</div>
</div>
图片圆角：rounded
图片位置：align-self-start/end
(29).轮播图:
<div class=\"carousel\" data-ride=\"carousel\">
<ul calss=\"carousel-indicators\">
<li data-target=\"#id\" data-slide-to=\"0\"></li>
</ul>
<div class=\"carousel-inner\">
<div class=\"carousel-item\"></div>
</div>
创建轮播：.carousel
为轮播添加一个指示符：.carousel-indicators
添加要切换图片：.carousel-inner
指定图片：.carousel-item
图片上提示文字：.carousel-caption
(30)模态框:
<button data-toggle=\"modal\" data-target=\"#myModal\"></button>
<div class=\"modal\" id=\"myModal\">
<div class=\"modal-dialog\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<div class=\"modal-title\"></div>
</div>
<div class=\"modal-body\"></div>
<div class=\"modal-footer\"></div>
</div>
</div>
</div>
(31)小组件:
1.徽章：badge-*
2.巨幕：jumbotron
<div class=\"jumbotron\">
内容
</div>
3.分页
要创建一个分页可以在<ul>元素上添加.pagination类，然后在<li>元素上添加.page-item类。
4.面包屑导航
<ul class=\"breadcrumb\">
<li class=\"breadcrumb-item\">
<a href=\"#\">...</a>
</li>
</ul>
5.缩略图
<div class=\"img-thumbnail\">
<img src=\"x.jpg\">
<div class=\"caption\">图片说明文字</div>
</div>
6.进度条
进度条可以显示用户任务的完成过程。
<div class=\"progress\">
<div calss=\"progress-bar\" style=\"width:60%;\"></div>
</div>
.progress-bar-striped 设置条纹进度条
.progress-bar-animated 设置进度条动画效果
.bg-* 设置进度条颜色
1.头部布局:
header:.container #header
nav:.navbar navbar-light
左:logo
logo:a.navbar-brand>img
中:搜索框
form.form-inline
>.input-group
>input.form-control+.input-group-append>img
右:列表
nav>
a>img
分割线:b.p-1
登录|注册:.p-1 text-muted
4.主导航:ul.nav mt-3>li.nav-item text-muted active>a.nav-link
2.公共样式设置：
body:p0;m0;background-color;min-width;box-sizing;
body>.container:w960;min-width960；margin:0 auto;
.my-header:w100%
.my-footer:w100%; h21rem;
3.头部样式设置：
#header>.navbar>.form-line>.input-group>input:w20rem !important
#header>.nav .nav-link.active,#header>.nav .nav-link:hover
background:None
color:#333 !important
4.底部样式设置：
ul.list-unstyle d-flex justify-content-around
注意:【1】上下两行:1.p
2.两个div
3..row>.col-md-12
【2】列表横向排列:ul.nav>li.nav-item>a.nav-link
列表纵向排列:ul.list-unstyle>li>a
列标题:h6
列表项:.text-muted small
上下间隔:mb-1
背景颜色:bg-white
5.首页
引入头部:header.mt-5>iframe.my-header
1F标题:h3.pb-3>.navbar border-secondary>a.navbar-brand font-weigh-bold>img+首页推荐
商品栏【左字右图】:.card border-0 flex-md-row
>card-body d-flex flex-column align-items-start
>h5+h6+span+a.btn btn-primary
图片:
.my-img:
margin-left:-10rem; height:18rem
商品栏之间间距变小:pl-0
字体设置小：.mysmallfont:.2rem
商品栏【上图下字】:.card
>img.card-img-top+.card-body d-flex flex-column align-item-start
>span+a.m-auto
按钮变得太长：m-auto
6.引用框出现滚动条的原因：p的错误使用，div嵌套错误
引入框使用:在基础样式：w100%
7.黑体字:text-dark
背景和父元素一致:bg-transparent
8.大小图片【上大图下小图】:.card>.card-img-top+
card-body
>d-inline-block
>ul.list-unstyled d-flex justify-content-around
>li>img
9.【绝对定位】：position-absolute
不显示：d-none
小图片左边按钮【写在list外面】：img.btn float-left btn-light border-0 p-1 py-4 disabled
左右按钮中间图片：width:248px; overflow:hidden
选中图片变色：img:hover{border:1px solid red}
【边框】:.alert .alert-secondary
渐变色：background: linear-gradient(to bottom,#f0f0f0,#e0e0e0);
边框阴影：box-shadow: 0 0 5px #bbb;
【块级元素变行内元素】：d-inline
注:子元素都要同一个标签直接在父元素上设置:small
10.【具体规格】:.float-left w-75>
a.btn btn-sm btn-outline-secondary
11.【浮动定位】:.float-left
.float-left w-75(第二个子元素要加宽度)
最后一个子元素div.clearfix
12.子代选择器：#details>div:nth-child(5)
#details的第5个子盒子，不管他的子元素是不是div
13.【按钮变大】:btn px-5 py-3
【按钮不要边框】:border-0
【按钮中上图下字】:br
14.【标题】:h1.d-inline
15.文字居中：text-center
【text-center失效】的时候：去掉h1标签
16.横向标题就用航向导航栏
17.【无边框】:border-0
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
