CSS快速入门
- 1.CSS案例
- 1.1 内容回顾
- 1.2 案例：二级菜单
- 1.2.1 划分区域
- 1.2.2 搭建骨架
- 1.2.3 Logo区域
- 1.2.4 菜单部分
- 1.3 案例：顶部菜单 + 二级菜单
- 小结
- 1.4 案例：推荐区域
- 1.4.1 划分区域
- 1.4.2 搭建骨架
- 1.4.3 案例的实现
- 小结
- 2. CSS知识点
- 2.1 hover（伪类）
- 2.2 after（伪类）
- 2.3 position
- 1. fixed
- 案例：返回顶部
- 案例：对话框
- 2. relative和absolute
- 案例：小米商城下载app
- 2.4 border
- 2.5 背景色
- 总结
- 3.BootStrap
- 3.1 初识
- 3.2 导航
- 3.3 栅格系统
- 3.4 container
- 3.5 面板
- 案例：博客
- 案例：登录
- 案例：后台管理
- 案例：后台管理+面板
- 3.6 图标
- 3.7 BootStrap依赖
- 4.提前聊JavaScript
1.CSS案例
1.1 内容回顾
-
HTML标签
固定格式，记住标签长什么样子，例如： h/div/span/a/img/ul/li/table/input/form -
CSS样式
-
引用CSS：标签、头部、文件
.xx{ ... } <div class='xx xx'></div> -
CSS样式
高度/宽度/块级or行内or块级行内/浮动/字体/文字对齐方式/内边距/外边距 关于边距： - body - 区域居中 -
页面布局
根据你看到的页面把他们划分成很多的小区域，再去填充样式。
-
1.2 案例：二级菜单
1.2.1 划分区域
1.2.2 搭建骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.sub-header{
height: 100px;
background-color: #b0b0b0;
}
.container{
width: 1128px;
margin: 0 auto;
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width: 234px;
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>
body {
margin: 0;
}
.sub-header {
height: 100px;
background-color: #b0b0b0;
}
.container {
width: 1128px;
margin: 0 auto;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
border: 1px solid red;
}
.sub-header .logo a {
margin-top: 22px;
display: inline-block
}
.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/">
<img src="images/logo-mi2.png" alt="">
</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>
body {
margin: 0;
}
.sub-header {
height: 100px;
}
.container {
width: 1128px;
margin: 0 auto;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img {
height: 56px;
width: 56px;
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a{
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover{
color: #ff6700;
}
.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/">
<img src="images/logo-mi2.png" alt="">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi红米</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="ht search"></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 {
margin: 0;
}
.container {
width: 1226px;
margin: 0 auto;
}
.header {
background: #333;
}
.header .menu {
float: left;
color: white;
}
.header .account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover{
color: white;
}
.sub-header {
height: 100px;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img {
height: 56px;
width: 56px;
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a {
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover {
color: #ff6700;
}
.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/">云服务</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">开放平台</a>
</div>
<div class="account">
<a href="https://www.mi.com/">登录</a>
<a href="https://www.mi.com/">注册</a>
<a href="https://www.mi.com/">消息通知</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/">
<img src="images/logo-mi2.png" alt="">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi红米</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="ht search"></div>
<div class="clear:both;"></div>
</div>
</div>
</body>
</html>
小结
-
a标签是行内标签，行内标签的高度、内外边距，默认无效。
-
垂直方向居中
- 本文 + line-height
- 图片 + 边距
-
a标签默认有下划线。
-
鼠标放上去之后hover
.c1:hover{ ... } a:hover{ }
1.4 案例：推荐区域
1.4.1 划分区域
1.4.2 搭建骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
img {
width: 100%;
height: 100%;
}
.container {
width: 1226px;
margin: 0 auto;
}
.header {
background: #333;
}
.header .menu {
float: left;
color: white;
}
.header .account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover {
color: white;
}
.sub-header {
height: 100px;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img {
height: 56px;
width: 56px;
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a {
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover {
color: #ff6700;
}
.sub-header .search {
float: right;
}
.slider .sd-img {
width: 1226px;
height: 460px;
}
</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/">云服务</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">开放平台</a>
</div>
<div class="account">
<a href="https://www.mi.com/">登录</a>
<a href="https://www.mi.com/">注册</a>
<a href="https://www.mi.com/">消息通知</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/">
<img src="images/logo-mi2.png" alt="">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi红米</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="ht search"></div>
<div class="clear:both;"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="images/b1.jpeg" alt="">
</div>
</div>
</div>
<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>
</body>
</html>
1.4.3 案例的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
img {
width: 100%;
height: 100%;
}
.left {
float: left;
}
.container {
width: 1226px;
margin: 0 auto;
}
.header {
background: #333;
}
.header .menu {
float: left;
color: white;
}
.header .account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover {
color: white;
}
.sub-header {
height: 100px;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img {
height: 56px;
width: 56px;
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a {
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover {
color: #ff6700;
}
.sub-header .search {
float: right;
}
.slider .sd-img {
width: 1226px;
height: 460px;
}
.news{
margin-top: 14px;
}
.news .channel {
width: 228px;
height: 164px;
background-color: #5f5750;
padding: 3px;
}
.news .channel .item {
height: 82px;
width: 76px;
float: left;
text-align: center;
}
.news .channel .item a{
display: inline-block;
font-size: 12px;
padding-top: 18px;
color: #fff;
text-decoration: none;
opacity: 0.7;
}
.news .channel .item a:hover{
opacity: 1;
}
.news .channel .item img{
height: 24px;
width: 24px;
display: block;
margin: 0 auto 4px;
}
.news .list-item {
width: 316px;
height: 170px;
}
</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/">云服务</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">开放平台</a>
</div>
<div class="account">
<a href="https://www.mi.com/">登录</a>
<a href="https://www.mi.com/">注册</a>
<a href="https://www.mi.com/">消息通知</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/">
<img src="images/logo-mi2.png" alt="">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi红米</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="ht search"></div>
<div class="clear:both;"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="images/b1.jpeg" alt="">
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left">
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="clear:both"></div>
</div>
<div class="list-item left" style="margin-left: 14px">
<img src="images/w1.jpeg"/>
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="images/w2.jpeg"/>
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="images/w3.jpeg"/>
</div>
<div class="clear:both"></div>
</div>
</div>
</body>
</html>
小结
-
设置透明度
opacity:0.5; /* 0 ~ 1 */
2. CSS知识点
2.1 hover（伪类）
<!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: 3px solid red;
}
.c2:hover {
border: 3px solid green;
}
.download {
display: none;
}
.app:hover .download {
display: block;
}
.app:hover .title{
color: red;
}
</style>
</head>
<body>
<div class="c1">联通</div>
<div class="c2">广西</div>
<div class="app">
<div class="title">下载APP</div>
<div class="download">
<img src="images/qcode.png" alt="">
</div>
</div>
</body>
</html>
2.2 after（伪类）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:after{
content: "大帅哥";
}
</style>
</head>
<body>
<div class="c1">吴阳军</div>
<div class="c1">梁吉宁</div>
</body>
</html>
很重要的应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:after{
content: "";
display: block;
clear: both;
}
.item{
float: left;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
2.3 position
- fixed
- relative
- absolute
1. fixed
固定在窗口的某个位置。
案例：返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
position: fixed;
width: 60px;
height: 60px;
border: 1px solid red;
right: 10px;
bottom: 50px;
}
</style>
</head>
<body>
<div style="height: 1000px;background-color: #5f5750"></div>
<div class="back"></div>
</body>
</html>
案例：对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.dialog {
position: fixed;
height: 300px;
width: 500px;
background-color: white;
left: 0;
right: 0;
margin: 0 auto;
top: 200px;
z-index: 1000;
}
.mask {
background-color: black;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.7;
z-index: 999;
}
</style>
</head>
<body>
<div style="height: 1000px">asdfasdfasd</div>
<div class="mask"></div>
<div class="dialog"></div>
</body>
</html>
2. 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;
position: relative;
}
.c1 .c2{
height: 59px;
width: 59px;
background-color: #00FF7F;
position: absolute;
right: 20px;
bottom: 10px;
}
</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 {
margin: 0;
}
img {
width: 100%;
height: 100%;
}
.left {
float: left;
}
.container {
width: 1226px;
margin: 0 auto;
}
.header {
background: #333;
}
.header .menu {
float: left;
color: white;
}
.header .account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover {
color: white;
}
.sub-header {
height: 100px;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img {
height: 56px;
width: 56px;
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a {
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover {
color: #ff6700;
}
.sub-header .search {
float: right;
}
.slider .sd-img {
width: 1226px;
height: 460px;
}
.news {
margin-top: 14px;
}
.news .channel {
width: 228px;
height: 164px;
background-color: #5f5750;
padding: 3px;
}
.news .channel .item {
height: 82px;
width: 76px;
float: left;
text-align: center;
}
.news .channel .item a {
display: inline-block;
font-size: 12px;
padding-top: 18px;
color: #fff;
text-decoration: none;
opacity: 0.7;
}
.news .channel .item a:hover {
opacity: 1;
}
.news .channel .item img {
height: 24px;
width: 24px;
display: block;
margin: 0 auto 4px;
}
.news .list-item {
width: 316px;
height: 170px;
}
.app {
position: relative
}
.app .download {
position: absolute;
height: 100px;
width: 100px;
display: none;
}
.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/">云服务</a>
<a href="https://www.mi.com/">云服务</a>
<a href="https://www.mi.com/" class="app">下载app
<div class="download">
<img src="images/qcode.png" alt="">
</div>
</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 href="https://www.mi.com/">登录</a>
<a href="https://www.mi.com/">注册</a>
<a href="https://www.mi.com/">消息通知</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/">
<img src="images/logo-mi2.png" alt="">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi红米</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="ht search"></div>
<div class="clear:both;"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="images/b1.jpeg" alt="">
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left">
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="clear:both"></div>
</div>
<div class="list-item left" style="margin-left: 14px">
<img src="images/w1.jpeg"/>
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="images/w2.jpeg"/>
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="images/w3.jpeg"/>
</div>
<div class="clear:both"></div>
</div>
</div>
</body>
</html>
2.4 border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 300px;
width: 500px;
border: 1px solid red;
border-left: 3px solid #00FF7F;
margin: 100px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
透明色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 50px;
width: 500px;
margin: 100px;
background-color: #5f5750;
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: 50px;
width: 500px;
margin: 100px;
background-color: #5f5750;
}
</style>
</head>
<body>
<div class="c1">菜单</div>
</body>
</html>
注意：以上不是所有的CSS样式。
总结
至此，CSS部分的知识全部讲完。
- 大家：大致了解了页面的样式和标签。
- 模板：
- 模板的基本使用逻辑。
- 模板 + 自己CSS知识点（开发页面）
3.BootStrap
是别人帮我们已写好的CSS样式，我们如果想要使用这个BootStrap：
- 下载BootStrap
- 使用
- 在页面上引入BootStrap
- 编写HTML时，按照BootStrap的规定来编写 + 自定制。
3.1 初识
https://v3.bootcss.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- HTML注释：开发版本 -->
<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-danger 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="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">广西</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">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">四川</a></li>
<li><a href="#">上海</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格
-
分类
-
响应式，根据屏幕宽度不同
.col-lg- 1170px .col-md- 970px .col-sm- 750px -
非响应式
<div class="col-xs-6" style="background-color: red">1</div> <div class="col-xs-6" style="background-color: green">2</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"> </head> <body> <div> <div class="col-sm-offset-2 col-sm-6" style="background-color: green">2</div> </div> </body> </html> -
3.4 container
<div class="container-fluid">
<div class="col-sm-9">左边</div>
<div class="col-sm-3">右边</div>
</div>
<div class="container">
<div class="col-sm-9">左边</div>
<div class="col-sm-3">右边</div>
</div>
3.5 面板
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</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>
.account {
width: 400px;
border: 1px solid #dddddd;
border-radius: 5px;
box-shadow: 5px 5px 20px #aaa;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
padding: 20px 40px;
}
.account h2 {
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="account">
<h2>用户登录</h2>
<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>
<input type="submit" value="登 录" class="btn btn-primary">
</form>
</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">
<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="#">中国联通xx系统</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<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>
<input type="button" value="新 建" class="btn btn-primary"/>
</div>
<div style="margin-top: 20px">
<table class="table 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>
案例：后台管理+面板
<!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">
<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="#">中国联通xx系统</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<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 class="panel panel-default">
<div class="panel-heading">表单区域</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<button type="submit" class="btn btn-success">保 存</button>
</form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">数据列表</div>
<!--
<div class="panel-body">
注意：以下我们经过筛选出来的重要数据。
</div>
-->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>
<a class="btn btn-primary btn-xs">编辑</a>
<a class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>
<a class="btn btn-primary btn-xs">编辑</a>
<a class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>
<a class="btn btn-primary btn-xs">编辑</a>
<a class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></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>
3.6 图标
-
bootstrap提供，不多。
-
fontawesome组件
https://fontawesome.dashgame.com/-
下载
-
引入
<link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css"> -
使用
-
示例见：
- 博客
- 后台管理 + 面板
3.7 BootStrap依赖
BootStrap依赖JavaScript的类库，jQuery。
- 下载 jQuery，在页面上应用上jQuery。
- 在页面上应用BootStrap的JavaScript类库。
4.提前聊JavaScript
- HTML，静态
- CSS，好看
- JavaScript，动态。
- 编程语言
- 类库（模块）【jQuery是javaScript的类库】
