python-web开发[12]之css案例、bootstrap探索
2024-04-16 18:27:30
day12 CSS
今日概要：
- 案例应用（利用之前所学知识）
- CSS知识点
- 模板 + CSS + 构建页面
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>xiaomi_jasminexjf</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;border: 1px solid red;}.sub-header .logo a {margin-top: 22px; /**=(100-56)/2 **/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 { /** 菜单栏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="data:images/logo-mi2.png" alt=""></a></div><div class="ht menu-list"><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="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="data: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; /**a标签是一个行内标签，不能设置高度和局中等设置，需要先display **/line-height: 40px;display: inline-block;font-size: 12px;margin-right: 10px;text-decoration: none;}.header a:hover{color: red;}.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 { /*设置：当鼠标放到相应的a标签上时，a标签展示如下的样式*/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="data: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标签是行内标签，行内标签的高度、内外边距，默认无效，需要先display。
- 垂直方向居中
- 本文 + line-height
- 图片 + 边距
- 含href超链接的a标签默认有下划线，如果需要去掉使用： /** text-decoration: none **/
- 鼠标放上去之后展示相应的样式： 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: 100%;height: 100%;}</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="data: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="data: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 { /**全局设置图片，父亲的100%比例**/width: 100%;height: 100%;}.left {float: left;}.container {width: 1226px;margin: 0 auto;}/** 1: 顶部 **/.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: red;}/** 2: 菜单栏 **/.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;}/** 3.1 : 推荐区域上部分 **/.slider .sd-img {width: 1226px;height: 460px;}/** 3.2 : 推荐区域下部分 **/.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; /**透明度=1：原样； **/}.news .channel .item a:hover{opacity: 1; /**透明度=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="static/test2.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="static/test2.png" 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="static/test2.png" alt=""><span>保障服务1</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="static/test2.png" alt=""><span>保障服务2</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="static/test2.png" alt=""><span>保障服务3</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="static/test2.png" alt=""><span>保障服务4</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="static/test2.png" alt=""><span>保障服务5</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="static/test2.png" alt=""><span>保障服务6</span></a></div><div class="clear:both"></div></div><div class="list-item left" style="margin-left: 14px"><img src="data:image/w1.jpg"/></div><div class="list-item left" style="margin-left: 15px"><img src="data:image/w2.jpg"/></div><div class="list-item left" style="margin-left: 15px"><img src="data:image/w3.jpg"/></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="data: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>
很重要的应用：【可用于清楚浮动 float】
<!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>
案例：对话框
对话框： 不是固定在某个页面的固定位置，而是一直在窗口的正中间。【页面往下滑动，但对话框不移动位置】
所有涉及到对话框页面都是3层：
第一层： 原始网页内容
第二层： 幕布标签，如下mask
第三层： 对话框标签，如下dialog
上述三层在body也是按照这样的顺序，否则会出现问题。
问题： 当出现多个position: fixed标签样式时，为了更好的控制堆叠的层级，用z-index: 999进行控制，最大的z-index在最上层，逐层往里走，越来越小。
<!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
子层标签根据父层标签进行绝对位置的固定。父层：position: relative。子层：position: 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: 100px;bottom: 100px;}</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="data: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="data: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="data: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="data:images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="data:images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="data:images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="data:images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="data:images/v1.png" alt=""><span>保障服务</span></a></div><div class="item"><a href="https://www.mi.com/"><img src="data: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="data:images/w1.jpeg"/></div><div class="list-item left" style="margin-left: 15px"><img src="data:images/w2.jpeg"/></div><div class="list-item left" style="margin-left: 15px"><img src="data: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>
transparent 透明色：
<!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 背景色
background-color 背景色
<!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](https://v3.bootcss.com/css/#grid)
- 把整体划分为了12格
- 分类
- 响应式，根据屏幕宽度不同 。固定删格大小，如果拉窄页面窗口，删格可能变成2行。
.col-lg- 1170px(当页面小于1170px，则变成多行)
.col-md- 970px(当页面小于970px，则变成多行)
.col-sm- 750px(当页面小于750px，则变成多行)
- 非响应式 : col-xs-6
<div class="col-xs-6" style="background-color: red">1</div>
<div class="col-xs-6" style="background-color: green">2</div>
- 列偏移：col-sm-offset-2 col-sm-6
<!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"><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>
<!-- 导航顶部 Modal -->
<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"><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><a data-toggle="modal" data-target="#myModal">对话框</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><!-- 中间区域内容： 左中侧内容页面，左底部翻页栏，右侧面板推荐部分 Modal -->
<div class="container-fluid 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+PCFbQ0RBVEFbI2hvbGRlcl8xN2QzYzQyY2ZjNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3ZDNjNDJjZmM3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Top1 万里归途</h4><div><i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i><i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i><i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i><i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></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 nisivulputate 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 natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.</p><div class="more clearfix"><div class="more-item"><i class="fa fa-calendar" aria-hidden="true"></i> 2022-09-30</div><div class="more-item"><i class="fa fa-user-circle" aria-hidden="true"></i> 张译</div><div class="more-item"><i class="fa fa-comments-o" aria-hidden="true"></i> 1000</div><div class="more-item" style="float:right;"><i class="fa fa-comments-o" aria-hidden="true"></i> 1000</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+PCFbQ0RBVEFbI2hvbGRlcl8xN2QzYzQyY2ZjNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3ZDNjNDJjZmM3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Top2 你好，李焕英</h4><div><i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i><i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i><i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i><i class="fa fa-star-o" aria-hidden="true"></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 nisivulputate 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 natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.</p><div class="more clearfix"><div class="more-item"><i class="fa fa-calendar" aria-hidden="true"></i> 2022-02-01</div><div class="more-item"><i class="fa fa-user-circle" aria-hidden="true"></i> 贾玲</div><div class="more-item"><i class="fa fa-comments-o" aria-hidden="true"></i> 1000</div><div class="more-item" style="float:right;"><i class="fa fa-comments-o" aria-hidden="true"></i> 1000</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+PCFbQ0RBVEFbI2hvbGRlcl8xN2QzYzQyY2ZjNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3ZDNjNDJjZmM3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Top3 长津湖</h4><div><i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i><i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i><i class="fa fa-star-o" aria-hidden="true"></i><i class="fa fa-star-o" aria-hidden="true"></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 nisivulputate 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 natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.</p><div class="more clearfix"><div class="more-item"><i class="fa fa-calendar" aria-hidden="true"></i> 2021-09-30</div><div class="more-item"><i class="fa fa-user-circle" aria-hidden="true"></i> 吴京</div><div class="more-item"><i class="fa fa-comments-o" aria-hidden="true"></i> 1000</div><div class="more-item" style="float:right;"><i class="fa fa-comments-o" aria-hidden="true"></i> 1000</div></div></div></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><div class="col-sm-3"><div class="panel panel-default"><div class="panel-heading"><i class="fa fa-fire" aria-hidden="true" style="color:#f0ad4e;font-size: 18px"></i>最新推荐</div><div class="panel-body"><div> top1: xxx</div><div> top2: xxx</div><div> top3: xxx</div></div></div><div class="panel panel-primary"><div class="panel-heading">热门搜索</div><div class="panel-body"><div> top1: xxx</div><div> top2: xxx</div><div> top3: xxx</div></div></div><div class="panel panel-danger"><div class="panel-heading">猜你喜欢</div><div class="panel-body"><div> top1: xxx</div><div> top2: xxx</div><div> top3: xxx</div></div></div></div>
</div><!-- 分页模型，对话框 Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">用户信息处理</h4></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">确 定</button></div></div></div>
</div><!--引入下面的两行代码，可以实现所有动态的真正实现，借助jquery -->
<script src="static/js/jquery-3.6.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script></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>.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">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-primary">Submit</button></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="#">xxx电影手工录入系统</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><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-default"/><input type="button" value="增 加" class="btn btn-primary"/><input type="button" value="删 除" class="btn btn-danger"/></div><div style="margin-top: 20px"><table class="table table-bordered table-hover"><thead><tr><th>序号</th><th>电影</th><th>主演</th><th>电影评分</th></tr></thead><tbody><tr><th scope="row">1</th><td>长津湖</td><td>吴京</td><td>5</td></tr><tr><th scope="row">2</th><td>万里归途</td><td>张译</td><td>5</td></tr><tr><th scope="row">3</th><td>你好，李焕英</td><td>贾玲</td><td>4.5</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"><link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.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"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 表单区域</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"><i class="fa fa-save" aria-hidden="true"></i> 保 存</button></form></div></div><div class="panel panel-default"><div class="panel-heading"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 数据列表</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类库。
<!--引入下面的两行代码，可以实现所有动态的真正实现，借助jquery -->
<script src="static/js/jquery-3.6.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
4.提前聊JavaScript
- HTML，只是一个外壳
- CSS，好看
- JavaScript，控制“动态”的效果。
- 编程语言
- 类库（模块）【jQuery是javaScript的类库】
python-web开发[12]之css案例、bootstrap探索相关推荐
- python web开发 Bootstrap框架基础
文章目录 1. 安装 2. Bootstrap 5 基本应用 learning from <python web开发从入门到精通> Bootstrap 是最受欢迎的 前端组件库,用于 HT ...
- Python Web开发:Django+BootStrap实现简单的博客项目
创建blog的项目结构 关于如何创建一个Django项目,请查看[Python Web开发:使用Django框架创建HolleWorld项目] 创建blog的数据模型 创建一个文章类 所有开发都是数据 ...
- python web开发 CSS基础
文章目录 1. 基础知识 2. ID,Class 选择器 3. CSS盒子模型 4. 嵌入CSS样式 4.1 内联样式表 4.2 内部样式表 4.3 外部样式表 learning from <p ...
- 篇一、Flask打造 Python Web 开发的灵活框架，实现简易登录。要求有 Python、HTML 和 CSS 基础。
⭐ 简介:大家好,我是zy阿二,我是一名对知识充满渴望的自由职业者. ☘️ 最近我沉溺于Python的学习中.你所看到的是我的学习笔记. ❤️ 如果对你有帮助,请关注.点赞,让我们共同进步.有不足之处 ...
- python岗位任职要求-2020 python web开发就业要求锦集
郑州 Python程序员 河南三融云合信息技术有限公司 6-8k·12薪 7个工作日内反馈 郑州 1个月前 本科及以上2年以上语言不限年龄不限 微信扫码分享 收藏 Python程序员 河南三融云合信息 ...
- pythonweb开发-手把手教你写网站：Python WEB开发技术实战
摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...
- python web-手把手教你写网站：Python WEB开发技术实战
摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...
- python开发一个自己的技术网站_手把手教你写网站：Python WEB开发技术实战
摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...
- python web开发 网络编程 HTTP协议、Web服务器、WSGI接口
文章目录 1. HTTP协议 2. Web服务器 3. 静态服务器 创建 web_server.py 4. WSGI 接口 4.1 CGI 通用网关接口 4.2 WSGI 4.3 定义 WSGI 接口 ...
最新文章
- 习题7-6 统计大写辅音字母 (15 分)
- 9个JavaScript小技巧：写出更简洁，高效代码
- 全球及中国不锈钢商用厨刀行业营销战略及未来发展趋势分析报告2022年版
- wince怎么刷carplay_Carplay支持仪表/HUD显示 宝马为全球超750000辆车发布OTA升级
- Hibernate之加载策略(延迟加载与即时加载)和抓取策略(fetch)
- mysql中的comment用法
- 11个让你吃惊的 Linux 终端命令
- 数据解析（XML，JSON）
- 期待已久的Java 9 今日正式发布，新特性解读
- java构造方法编写_Java开发 Debug运行+类的编写+构造方法+方法重载+this【学习篇6】...
- toLocaleTimeString()方法在IE和谷歌浏览器上 根据本地时间格式，把 Date 对象的时间部分(不含日期)转换为“时间字符串”存在区别...
- oracle正则表达式非数字,oracle 判断是否数字 正则表达式法
- 和威金作者的聊天记录 (附:VIKING专杀及杀毒思路)
- ruby读dbf文件
- 电脑上打印准考证照片不清楚咋办
- Python——列表与元组
- 2000年数模B题 钢管订购和运输
- Minecraft我的世界云服务器搭建教程（小白看过来）
- iOS - AliPay 支付宝支付
- 跟着团子学SAP PS：CNS0 项目发货