今日概要
- 案例应用（利用之前所学的知识）
- CSS知识点
-
1.CSS案例
1.1内容回顾
HTML标签 :::tips 固定格式，记住标签长什么样子。例如：
h/div/span/a/img/ul/li/table/input/form :::CSS样式
引用CSS标签：标签、头部、文件 :::tips .xx{
:::
…
}CSS样式 :::tips 高度/宽度/块级or行内or块级行内/浮动/字体/文字对齐方式/内边距/外边距
关于边距 :::
1.2案例：二级菜单
1.2.1划分区域
1.2.2搭建骨架
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*margin用户消除边框*/body{margin: 0;}.sub-header{height: 100px;background-color: darkgray;}.container{width: 1128px;margin: 0 auto;/*border-left: 1px solid red;*//*border-right: 1px solid red;*/}.sub-header .ht{height: 100px;}.sub-header .logo{width: 234px;border: 1px solid red;float: left;}.sub-header .menu-list{float: left;}.sub-header .search{float: right;}</style></head><body><div class="sub-header"><div class="container"><div class="ht logo">1</div><div class="ht menu-list">2</div><div class="ht search">3</div><div class="clear:both; "></div></div></div></body></html>
1.2.3 logo区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*margin用户消除边框*/
body{
margin: 0;
}
.sub-header{
height: 100px;
background-color: darkgray;
}
.container{
width: 1128px;
margin: 0 auto;
/*border-left: 1px solid red;*/
/*border-right: 1px solid red;*/
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width: 234px;
border: 1px solid red;
float: left;
border: 1px solid red;
/*line-height: 可以设置框里的文字，且只可一行文字;对图片不适用*/
/*line-height: 100px;*/
/*添加图像外边距，让它居中*/
}
/*.sub-header .logo a 标签中的样式*/
.sub-header .logo a{
margin-top: 22px;display: inline-block
}
/*.sub-header .logo a img标签的样式*/
.sub-header .logo a img{
height:56px;
width: 56px;
}
.sub-header .menu-list{
float: left;
}
.sub-header .search{
float: right;
}
</style>
</head>
<body>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- 变成块级标签 & 行内+块级标签 可以实现<a>标签中的图片居中，我们一般采用 行内+块级标签的方式 -->
<a href="https://www.mi.com/" >
<!-- 采用外边距的方式，进行图片居中，效果不行，因为<a>标签是行内标签，不支持定义高度，宽度，边距-->
<!-- <a href="https://www.mi.com/" style="margin-top: 22px">-->
<img src="/static/mi.png" >
</a>
</div>
<div class="ht menu-list">2</div>
<div class="ht search">3</div>
<div class="clear:both; "></div>
</div>
</div>
</body>
</html>
1.2.4 菜单部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*margin用户消除边框*/
body{
margin: 0;
}
.container{
/*中间部分容器宽度为1128像素*/
width: 1128px;
/*margin用户消除边框，auto自动居中*/
margin: 0 auto;
/*border-left: 1px solid red;*/
/*border-right: 1px solid red;*/
}
.sub-header{
/*头部高度为100像素*/
height: 100px;
/*背景颜色为灰色*/
/*background-color: darkgray;*/
}
.sub-header .ht{
/*header内标签高度为100像素*/
height: 100px;
}
.sub-header .logo{
/*logo所占区域像素234*/
width: 234px;
/*在sub-header区域下，右侧浮动*/
float: left;
/*logo所占区域，边框为1像素，红色*/
/*border: 1px solid red;*/
/*line-height: 可以设置框里的文字，且只可一行文字;对图片不适用*/
/*line-height: 100px;*/
/*添加图像外边距，让它居中*/
}
/*.sub-header .logo a 标签中的样式*/
.sub-header .logo a{
/*logo边框中的a标签，离顶部距离为22像素点，展示为行内+块级标签*/
margin-top: 22px;display: inline-block
}
/*.sub-header .logo a img标签的样式*/
.sub-header .logo a img{
/*logo图像高度56像素*/
height:56px;
/*logo图像宽度为56像素*/
width: 56px;
}
.sub-header .menu-list{
/*浮动*/
float: left;
/*边界1像素、边界颜色为红色*/
/*border: 1px solid red;*/
/*!*行内高度为100像素*!*/
line-height: 100px;
}
.sub-header .menu-list a{
/*变为行内+块级标签*/
display: inline-block;
/*内边框间距*/
padding: 0 20px;
/*字体颜色*/
color: #333333;
/*字体大小*/
font-size: 16px;
/*<a>标签的取消默认下划线*/
text-decoration: none;
}
.sub-header .menu-list a:hover{
color: #ff6788;
}
.sub-header .search{
float: right;
}
</style>
</head>
<body>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- 变成块级标签 & 行内+块级标签 可以实现<a>标签中的图片居中，我们一般采用 行内+块级标签的方式 -->
<a href="https://www.mi.com/" >
<!-- 采用外边距的方式，进行图片居中，效果不行，因为<a>标签是行内标签，不支持定义高度，宽度，边距-->
<!-- <a href="https://www.mi.com/" style="margin-top: 22px">-->
<img src="/static/mi.png" >
</a>
</div>
<div class="ht menu-list">
<span>
<a href="https://www.mi.com/mi12pro">红米手机</a>
</span>
<span>
<a href="https://www.mi.com/mi12pro">手环</a>
</span>
<span><a href="https://www.mi.com/mi12pro">电视</a></span>
<span><a href="https://www.mi.com/mi12pro">家具</a></span>
</div>
<div class="ht search">3</div>
<div class="clear:both; "></div>
</div>
</div>
</body>
</html>
1.3案例：顶部菜单+二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*这里必须用body作为，因为body就一个。margin 0 为消除边框*/
body{
margin: 0;
}
.header{
/*!*header下所有的字体颜色为 #b0b0b0*!*/
/*color: #b0b0b0;*/
/*header的背景颜色为#333333*/
background-color: #333333;
/*margin-left: auto;*/
/*width宽度不设置就是占满屏*/
/*width: 1920px;*/
/*margin-right: auto;*/
}
.container{
/*顶部所占宽度为1200像素*/
width: 1200px;
/*左右宽度自适应，即居中*/
margin-right: auto;
margin-left: auto;
}
.header .menu{
/*菜单左浮起*/
float: left;
}
.header .account{
/*右浮起*/
float: right;
}
.header a{
/*行高为40像素，可以撑起来，在子标签中定义高度，父标签可以不用定义，就把标签撑起来*/
line-height: 40px;
/*设置为行内+块级标签，因为a标签不可以设置默认宽度和高度等样式*/
display: inline-block;
/*字体宽度为12像素*/
font-size: 12px;
/*左外边距为10像素*/
margin-right: 10px;
/*a标签中的字体颜色为#b0b0b0*/
color: #b0b0b0;
text-decoration: none;
}
/*设置 鼠标放到超链接上面字符就变颜色*/
.header a:hover{
color: white;
}
.sub-header .ht{
/*header内标签高度为100像素*/
height: 100px;
}
.sub-header .logo{
/*logo所占区域像素234*/
width: 234px;
/*在sub-header区域下，右侧浮动*/
float: left;
/*logo所占区域，边框为1像素，红色*/
/*border: 1px solid red;*/
/*line-height: 可以设置框里的文字，且只可一行文字;对图片不适用*/
/*line-height: 100px;*/
/*添加图像外边距，让它居中*/
}
/*.sub-header .logo a 标签中的样式*/
.sub-header .logo a{
/*logo边框中的a标签，离顶部距离为22像素点，展示为行内+块级标签*/
margin-top: 22px;display: inline-block
}
/*.sub-header .logo a img标签的样式*/
.sub-header .logo a img{
/*logo图像高度56像素*/
height:56px;
/*logo图像宽度为56像素*/
width: 56px;
}
.sub-header .menu-list{
/*浮动*/
float: left;
/*边界1像素、边界颜色为红色*/
/*border: 1px solid red;*/
/*!*行内高度为100像素*!*/
line-height: 100px;
}
.sub-header .menu-list a{
/*变为行内+块级标签*/
display: inline-block;
/*内边框间距*/
padding: 0 20px;
/*字体颜色*/
color: #333333;
/*字体大小*/
font-size: 16px;
/*<a>标签的取消默认下划线*/
text-decoration: none;
}
.sub-header .menu-list a:hover{
color: #ff6788;
}
.sub-header .search{
float: right;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com/">小米商城</a>
<a href="https://www.mi.com/">MIUI</a>
<a href="https://www.mi.com/">loT</a>
<a href="https://www.mi.com/">云服务</a>
<a href="https://www.mi.com/">天星教科</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">小米开放平台</a>
<a href="https://www.mi.com/">企业团购</a>
<a href="https://www.mi.com/">资质证照</a>
<a href="https://www.mi.com/">协议规则</a>
</div>
<div class="account">
<a>登录</a>
<a>注册</a>
<a>消息通知</a>
</div>
<!-- 结束浮动，把标签样式撑起来，后面也不需要-->
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- 变成块级标签 & 行内+块级标签 可以实现<a>标签中的图片居中，我们一般采用 行内+块级标签的方式 -->
<a href="https://www.mi.com/" >
<!-- 采用外边距的方式，进行图片居中，效果不行，因为<a>标签是行内标签，不支持定义高度，宽度，边距-->
<!-- <a href="https://www.mi.com/" style="margin-top: 22px">-->
<img src="/static/mi.png" >
</a>
</div>
<div class="ht menu-list">
<span>
<a href="https://www.mi.com/mi12pro">红米手机</a>
</span>
<span>
<a href="https://www.mi.com/mi12pro">手环</a>
</span>
<span><a href="https://www.mi.com/mi12pro">电视</a></span>
<span><a href="https://www.mi.com/mi12pro">家具</a></span>
</div>
<div class="ht search">3</div>
<div class="clear:both; "></div>
</div>
</div>
</body>
</html>
小结
- a标签是行内标签，行内标签的高度，内外边距，默认无效。
- display: inline-block 变为行内标签，可以支持上述更改
- 垂直方向居中
- 文本+line-heiht
- 图片+边距
- a标签默认有下划线
鼠标放上去之后hover :::tips 应用c1样式的标签 鼠标放上去，对应更改红色
.c1:hover{
color:red
}
所有的a标签 鼠标放上去，对应更改颜色
a:hover{
color:red
} :::1.4案例
1.4.1划分区域
1.4.2搭建骨架
<div class="news"> <div class="container"> <div class="channel"></div> <div class="list-item"></div> <div class="list-item"></div> <div class="list-item"></div> </div> </div>1.4.3案例的实现
```html <!DOCTYPE html>
3
<a name="WZXls"></a>
### 小结：设置透明度
:::tips
opacity:0.5
:::
<a name="w5Tsm"></a>
## 2.CSS案例
<a name="aQIYk"></a>
### 2.1hover（伪类）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red;
font-size: 18px;
}
.c1:hover{
color: green;
font-size: 50px;
}
.c2{
height: 300px;
width: 500px;
border: 1px solid red;
}
.c2:hover{
border: 3px solid red;
}
.download{
display: none;
}
.app:hover .download{
display: block;
}
.app:hover .title{
color: lightcoral;
}
</style>
</head>
<body>
<div class="c1">联通</div>
<div class="c2">联通</div>
<div class="app">
<div class="title">下载APP</div>
<div class="download">
<img src="/static/QR%20code.png" alt="">
</div>
</div>
</body>
</html>
2.2after（伪类）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*float需要clear: both结束。采用。.area:after标签可以不用在结尾后添加*/
/*清除浮动*/
.clearfix:after{
content: "";
display: block;
clear: both;
}
.item{
float: left;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</body>
</html>
2.3position
2.3.1fixed
案例：返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*返回顶部代码*/
.back{
/*位置固定*/
position: fixed;
/*宽度为60像素*/
width: 60px;
/*高低为60像素*/
height: 60px;
/*边框为红色1像素宽度*/
border: 1px solid red;
/*距离右边10像素点*/
right: 10px;
/*距离底部20像素点*/
bottom: 50px;
}
</style>
</head>
<body>
<div class="back"> 6666</div>
</body>
</html>
案例：对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.dialog{
position: fixed;
height: 300px;
width: 500px;
background-color: white;
/*第一种：测量像素点居中*/
/*margin-left: -250px;*/
/*left: 50%;*/
/*第二种：百分比居中*/
left: 0px;
right: 0px;
margin: auto;
top: 200px;
/*通过比较z-index来设置图层的排序 z-index较大的在会在图层的上边*/
z-index: 1000;
}
.mask{
background-color: black;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: 0.5;
/*通过比较z-index来设置图层的排序 z-index较大的在会在图层的上边*/
z-index: 999;
}
</style>
</head>
<body>
<div style="height: 1000px ">中国电信</div>
<div class="mask"></div>
<div class="dialog"></div>
</body>
</html>
relative和absolute
效果图：绿色边框的位置时相对于红色边框固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 300px;
width: 500px;
border: 1px solid red;
margin: 100px;
/*c1的位置时相对位置*/
position: relative;
}
.c1 .c2{
height: 50px;
width: 59px;
background-color: green;
/*在c1的样式下，c2的位置时绝对位置*/
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>
案例：下载app
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*这里必须用body作为，因为body就一个。margin 0 为消除边框*/
body{
margin: 0;
}
/*设置图片格式继承父亲*/
img{
width: 100%;
height: 100%;
}
.header{
/*!*header下所有的字体颜色为 #b0b0b0*!*/
/*color: #b0b0b0;*/
/*header的背景颜色为#333333*/
background-color: #333333;
/*margin-left: auto;*/
/*width宽度不设置就是占满屏*/
/*width: 1920px;*/
/*margin-right: auto;*/
}
.container{
/*顶部所占宽度为1200像素*/
width: 1226px;
/*左右宽度自适应，即居中*/
margin-right: auto;
margin-left: auto;
}
.left{
float: left;
}
.header .menu{
/*菜单左浮起*/
float: left;
}
.header .account{
/*右浮起*/
float: right;
}
.header a{
/*行高为40像素，可以撑起来，在子标签中定义高度，父标签可以不用定义，就把标签撑起来*/
line-height: 40px;
/*设置为行内+块级标签，因为a标签不可以设置默认宽度和高度等样式*/
display: inline-block;
/*字体宽度为12像素*/
font-size: 12px;
/*左外边距为10像素*/
margin-right: 10px;
/*a标签中的字体颜色为#b0b0b0*/
color: #b0b0b0;
text-decoration: none;
}
/*设置 鼠标放到超链接上面字符就变颜色*/
.header a:hover{
color: white;
}
.sub-header .ht{
/*header内标签高度为100像素*/
height: 100px;
}
.sub-header .logo{
/*logo所占区域像素234*/
width: 234px;
/*在sub-header区域下，右侧浮动*/
float: left;
/*logo所占区域，边框为1像素，红色*/
/*border: 1px solid red;*/
/*line-height: 可以设置框里的文字，且只可一行文字;对图片不适用*/
/*line-height: 100px;*/
/*添加图像外边距，让它居中*/
}
/*.sub-header .logo a 标签中的样式*/
.sub-header .logo a{
/*logo边框中的a标签，离顶部距离为22像素点，展示为行内+块级标签*/
margin-top: 22px;display: inline-block
}
/*.sub-header .logo a img标签的样式*/
.sub-header .logo a img{
/*logo图像高度56像素*/
height:56px;
/*logo图像宽度为56像素*/
width: 56px;
}
.sub-header .menu-list{
/*浮动*/
float: left;
/*边界1像素、边界颜色为红色*/
/*border: 1px solid red;*/
/*!*行内高度为100像素*!*/
line-height: 100px;
}
.sub-header .menu-list a{
/*变为行内+块级标签*/
display: inline-block;
/*内边框间距*/
padding: 0 20px;
/*字体颜色*/
color: #333333;
/*字体大小*/
font-size: 16px;
/*<a>标签的取消默认下划线*/
text-decoration: none;
}
.sub-header .menu-list a:hover{
color: #ff6788;
}
.sub-header .search{
float: right;
}
.slider{
color: white;
}
/*第二种方式 ：在父亲上设置，子通过100%来继承 */
.slider .sd-img {
width: 1226px;
height: 460px;
}
/*上边距为14像素*/
.news{
margin-top: 14px;
}
/*设置news channel的样式*/
.news .channel{
width: 228px;
height: 164px;
background-color: #5f5750;
padding: 3px;
}
/*图片格式：宽度、高度*/
.news .list-item{
width: 316px;
height: 170px;
}
/*小图标所占区域格式：宽度、高度*/
.news .channel .item{
height: 82px;
width: 76px;
float: left;
text-align: center;
}
/*小图标所占区域 图片格式*/
.news .channel .item img{
height: 24px;
width: 24px;
display: block;
margin: 0px auto 4px;
}
/*图标所占区域下a标签的格式*/
.news .channel .item a{
/*取消超链接默认样式*/
text-decoration: none;
/*a变迁为行内标签，将a标签设置为行内块级标签*/
display: inline-block;
/*字体大小设置为12像素*/
font-size: 12px;
/*外边距到顶端18像素*/
padding-top: 18px;
/*字体颜色*/
color: darkgray;
/*a标签透明度*/
opacity: 0.7;
}
/*.new .channel a标签下的超链接。颜色改变*/
.news .channel a:hover{
color: white;
}
.back{
position: fixed;
width: 60px;
height: 60px;
border: 1px solid red;
right: 10px;
bottom: 50px;
}
.app{
position: relative
}
.app .download{
position: absolute;
height: 80px;
width: 80px;
top: 50px;
display: none;
}
/*.app 下的a标签会有hover时间，在download处应用*/
.app:hover .download{
display: block;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com/">小米商城</a>
<a href="https://www.mi.com/">MIUI</a>
<a href="https://www.mi.com/">loT</a>
<a href="https://www.mi.com/">云服务</a>
<a href="https://www.mi.com/">天星教科</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">小米开放平台</a>
<a href="https://www.mi.com/" class="app">下载app
<div class="download" >
<img src="/static/QR%20code.png" alt="">
</div>
</a>
<a href="https://www.mi.com/">资质证照</a>
<a href="https://www.mi.com/">协议规则</a>
</div>
<div class="account">
<a>登录</a>
<a>注册</a>
<a>消息通知</a>
</div>
<!-- 结束浮动，把标签样式撑起来，后面也不需要-->
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header" style="height: 100px">
<div class="container">
<div class="ht logo">
<!-- 变成块级标签 & 行内+块级标签 可以实现<a>标签中的图片居中，我们一般采用 行内+块级标签的方式 -->
<a href="https://www.mi.com/" >
<!-- 采用外边距的方式，进行图片居中，效果不行，因为<a>标签是行内标签，不支持定义高度，宽度，边距-->
<!-- <a href="https://www.mi.com/" style="margin-top: 22px">-->
<img src="/static/mi.png" >
</a>
</div>
<div class="ht menu-list">
<span>
<a href="https://www.mi.com/mi12pro">红米手机</a>
</span>
<span>
<a href="https://www.mi.com/mi12pro">手环</a>
</span>
<span><a href="https://www.mi.com/mi12pro">电视</a></span>
<span><a href="https://www.mi.com/mi12pro">家具</a></span>
</div>
<div class="ht search">3</div>
<div class="clear:both; "></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img" >
<img src="/static/b1.jpg" alt="" >
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left" style="margin-right: 14px">
<div class="item">
<a href="https://www.mi.com/">
<img src="/static/p1.png" alt="" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/static/p1.png" alt="" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/static/p1.png" alt="" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/static/p1.png" alt="" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/static/p1.png" alt="" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/static/p1.png" alt="" >
<span>保障服务</span>
</a>
</div>
<div style="clear: both"></div>
</div>
<div class="list-item left" style="margin-right: 15px" >
<img src="/static/n1.jpg" alt="">
</div>
<div class="list-item left"style="margin-right: 14px" >
<img src="/static/n2.jpg" alt="">
</div>
<div class="list-item left" >
<img src="/static/n3.jpg" alt="">
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="back"> 6666</div>
<div></div>
</body>
</html>
2.4border
边框覆盖效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 300px;
width: 500px;
margin: 100px;
/*!*一种：边框宽度为1像素，红色实线*!*/
/*border: 1px solid red;*/
/*!*二种：左边框长度为1像素，红色*!*/
/*border-left: 1px solid red;*/
border: 1px solid red;
/*覆盖已有边框*/
border-left: 3px solid black;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
border 中 solid的transparent 效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 300px;
width: 500px;
margin: 100px;
/*先把边框加上去，只不过变成隐藏的了*/
border-left: 2px solid transparent;
}
.c1:hover{
border-left: 2px solid red;
}
</style>
</head>
<body>
<div class="c1">这是边框样式哦</div>
</body>
</html>
2.5背景色
背景色效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 300px;
width: 500px;
margin: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="c1">这是边框样式哦</div>
</body>
</html>
注意
-
总结
至此，CS部分的知识全部讲完
大家：大致了解页面的样式和标签
模板
下载Bootstrap
使用
- 在页面上引用引入Bootstrap
- 编写HTML时，按照Bootstrap的规定来编写+自定义
3.1初始Bootstrap
下载地址：https://v3.bootcss.com/
创建目录结构
- 引入Bootstrap格式
- 应用Bootstrap样式
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发版本-->
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<!--<!– 生产版本 较小，压缩成一行，项目上线后用此–>-->
<!-- <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">-->
</head>
<body>
<input type="button" value="提交">
<input type="button" value="提交" class="btn btn-primary">
<input type="button" value="提交" class="btn btn-success">
<input type="button" value="提交" class="btn btn-danger">
<input type="button" value="提交" class="btn btn-primary btn-xs">
</body>
</html>
3.2导航
效果图
导航源代码应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.navbar{
border-radius: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">中国电信</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">深圳 <span class="sr-only">(current)</span></a></li>
<li><a href="#">上海</a></li>
<li><a href="#">北京</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">购票 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</body>
</html>
3.3栅格系统
https://v3.bootcss.com/css/#grid
- 把整理划分了12格
分类
响应式，根据屏幕宽度不同 :::tips .col-lg- 1170px
.col-md- 970px
.col-sm- 750px :::非相应式 :::tips
12:::
列偏移
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"> </head> <body> <div> <!-- col-sm-offset-2代表：列偏移2行--> <!-- 不用去特意填充--> <div class="col-sm-offset-2 col-sm-6" style="background-color: red">2</div> </div> </body> </html>3.4container
:::tips
3.5面板
效果图
<div class="panel panel-primary">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
3.6分页
效果图
<ul class="pagination" style="margin: 0 auto;display: table">
<!-- 组件居中：style="margin: 0 auto;display: table":-->
<li>
<a href="#" aria-label="Previous" >
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
3.7表单
效果图
<form>
<div class="form-group">
<label for="exampleInputEmail1">账号</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="账号">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
3.8列表
效果图
<div class="bs-example " data-example-id="bordered-table" style="margin-top: 40px">
<table class="table table-bordered table-hover">
<!-- table-bordered:带有边框的表格 -->
<!-- table-hover：鼠标滑动后会变颜色的表格-->
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
案例：博客
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.navbar {
border-radius: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<!-- 第二种：container-fluid,完全平铺-->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">中国电信</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">深圳 <span class="sr-only">(current)</span></a></li>
<li><a href="#">上海</a></li>
<li><a href="#">北京</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">购票 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
<div class="container clearfix">
<!-- clearfix用于清除浮动-->
<div class="col-sm-9">
<!-- 组件功能：媒体-->
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODA5YzY2ZDgxYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4MDljNjZkODFjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Top aligned media</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODA5YzY2ZDgxYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4MDljNjZkODFjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Top aligned media</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODA5YzY2ZDgxYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4MDljNjZkODFjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Top aligned media</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
<div class="col-sm-3 ">
<!-- 组件功能：面板-->
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
<ul class="pagination" style="margin: 0 auto;display: table">
<!-- 组件居中：style="margin: 0 auto;display: table":-->
<li>
<a href="#" aria-label="Previous" >
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
</body>
</html>
案例：登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入bootst样式-->
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
/*.login的应用格式*/
.login {
/*.login区域：所占宽度为400像素*/
width: 400px;
/*.边界宽度为1像素，颜色为红色*/
border: 1px solid darkgray;
/*外边距上下宽度为30像素，左右宽度为20像素*/
padding: 30px 20px;
/*外边距左右自动对齐，居中*/
margin-right: auto;
margin-left: auto;
/*.login所占区域距离顶部为60像素*/
margin-top: 60px;
/*边框弧度为4像素*/
border-radius: 4px;
/*阴影距离左边为5像素，下面为5像素，阴影距离为5像素，颜色为灰色。*/
box-shadow: 5px 5px 5px #aaa;
}
.login h3{
/*.login下的h3标签文字居中*/
text-align: center;
}
</style>
</head>
<body>
<div class="login">
<h3>用户登录</h3>
<form>
<div class="form-group">
<label for="exampleInputEmail1">账号</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="账号">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</div>
</body>
</html>
案例：后台管理
预览图
- 导航
- 新建，按钮
- 表格
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.navbar {
border-radius: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">中国电信</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">深圳 <span class="sr-only">(current)</span></a></li>
<li><a href="#">上海</a></li>
<li><a href="#">北京</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div style="margin-top: 40px">
<button type="button" class="btn btn-primary">（首选项）Primary</button>
</div>
<div class="bs-example " data-example-id="bordered-table" style="margin-top: 40px">
<table class="table table-bordered table-hover">
<!-- table-bordered:带有边框的表格 -->
<!-- table-hover：鼠标滑动后会变颜色的表格-->
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
3.9图标
- bootst提供了一些，不多
font awesome 专业做图标 :::tips https://fontawesome.dashgame.com/ :::
- 下载
- 引入
使用 :::tips :::
效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"> <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css"> <style> .navbar { border-radius: 0; } <!-- 引入的评论等，在块内居中--> .more .more-item{ display: inline-block; margin-right: 20px; } </style> </head> <body> <div class="navbar navbar-default"> <!-- 第二种：container-fluid,完全平铺--> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">中国电信</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">深圳 <span class="sr-only">(current)</span></a></li> <li><a href="#">上海</a></li> <li><a href="#">北京</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">购票 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">注册</a></li> <li><a href="#">登录</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div> </div> <div class="container clearfix"> <!-- clearfix用于清除浮动--> <div class="col-sm-9"> <!-- 组件功能：媒体--> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODA5YzY2ZDgxYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4MDljNjZkODFjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="width: 64px; height: 64px;"> </a> </div> <div class="media-body"> <h4 class="media-heading">Top aligned media</h4> <div> <!-- 设置热度小星星--> <i class="fa fa-star" aria-hidden="true" style="color: gold"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold"></i> <i class="fa fa-star-o" aria-hidden="true"></i> </div> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <div class="more clearfix"> <!-- 如果采用过了float，就要clearfix哟--> <div class="more-item"> <i class="fa fa-calendar " aria-hidden="true" ></i>2022-02-04 </div> <div class="more-item"> <i class="fa fa-user-circle-o" aria-hidden="true"></i>邓凯 </div> <div class="more-item"> <i class="fa fa-comment-o " aria-hidden="true"></i>10000 </div> <div class="more-item" style="float:right"> <i class="fa fa-comment-o " aria-hidden="true"></i>10000 </div> </div> </div> </div> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODA5YzY2ZDgxYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4MDljNjZkODFjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="width: 64px; height: 64px;"> </a> </div> <div class="media-body"> <h4 class="media-heading">Top aligned media</h4> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODA5YzY2ZDgxYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4MDljNjZkODFjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="width: 64px; height: 64px;"> </a> </div> <div class="media-body"> <h4 class="media-heading">Top aligned media</h4> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> </div> <div class="col-sm-3 "> <!-- 组件功能：面板--> <!-- 6.后台管理.html--> <div class="panel panel-primary"> <div class="panel-heading"> <i class="fa fa-fire" aria-hidden="true"style="color: gold;font-size: 15px"></i>最新推荐 </div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-primary"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-danger"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div> </div> </div> <ul class="pagination" style="margin: 0 auto;display: table"> <!-- 组件居中：style="margin: 0 auto;display: table":--> <li> <a href="#" aria-label="Previous" > <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </div> </body> </html>总结
bootstrap居中
组件居中 :::tips style=”margin: 0 auto;display: table” :::
3.10Bootstrap依赖
Bootstrap依赖JavaScript的类库，jQuery
下载jQuery，在页面上应用上jQuery
-
4.提前聊
HTML，裸体
- CSS，好看
- JavaScript,动态
- 编程语言
- 类库（模块）
- 解锁动态效果
若有收获，就点个赞吧
0 人点赞
