1 Bootstrap介绍
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。
响应式布局
* 同一套页面可以兼容不同分辨率的设备。
* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
* 步骤：
1. 定义容器。相当于之前的table
* 容器分类：
1. container：两边留白
2. container-fluid：每一种设备都是100%宽度
2. 定义行。相当于之前的tr 样式：row
3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
* 设备代号：
1. xs：超小屏幕 手机 (<768px)：col-xs-12
2. sm：小屏幕 平板 (≥768px)
3. md：中等屏幕 桌面显示器 (≥992px)
4. lg：大屏幕 大桌面显示器 (≥1200px)
* 注意：
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
2 为什么要使用Bootstrap？
在Bootstrap出现之前：
命名：重复、复杂、无意义（想个名字费劲）
样式：重复、冗余、不规范、不和谐
页面：错乱、不规范、不和谐
在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。
3 Bootstrap下载
官方地址：https://getbootstrap.com
我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。
4 Bootstrap环境搭建
bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css // 核心CSS样式压缩文件 │ └── bootstrap.min.css.map ├── fonts // 字体文件 │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 └── js // JS文件 ├── bootstrap.js ├── bootstrap.min.js // 核心JS压缩文件 └── npm.js
处理依赖：由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。
导入bootstrap.min.css 和 bootstrap.min.js使用：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta name='description' content="内容" http-equiv="refresh" charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>导入demo</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script> ..... </script> </body> </html>
5 Bootstrap全局样式
6 常用Bootstrap组件
7 响应式开发
7.1 为什么要进行响应式开发？
随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。
7.2 什么是响应式？
利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。
7.3 用到的技术
（1）viewport
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
设置viewport，一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
- width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
- height：和 width 相对应，指定高度。
- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
- user-scalable：用户是否可以手动缩放。
- container
- row
- column
注意事项： 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。
8 JavaScript插件
9 Bootstrap实例精选
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>viewport支持移动端</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css" rel="stylesheet"> </head> <body> <img width="600" src="http://i1.hdslb.com/bfs/archive/bb6d25e8b9bfd82ebecf4d084f7ab663e0cffe0b.jpg" alt=""> <h1>《钗头凤》</h1> <p> 唐婉 世情薄， 人情恶， 雨送黄昏花易落， 晓风干， 泪痕残， 欲笺心事， 独语斜阑， 难，难，难！ 人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽泪装欢， 瞒，瞒，瞒！ 唐婉 世情薄， 人情恶， 雨送黄昏花易落， 晓风干， 泪痕残， 欲笺心事， 独语斜阑， 难，难，难！ 人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽泪装欢， 瞒，瞒，瞒！ 唐婉 世情薄， 人情恶， 雨送黄昏花易落， 晓风干， 泪痕残， 欲笺心事， 独语斜阑， 难，难，难！ 人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽泪装欢， 瞒，瞒，瞒！ 唐婉 世情薄， 人情恶， 雨送黄昏花易落， 晓风干， 泪痕残， 欲笺心事， 独语斜阑， 难，难，难！ 人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽泪装欢， 瞒，瞒，瞒！ 唐婉 世情薄， 人情恶， 雨送黄昏花易落， 晓风干， 泪痕残， 欲笺心事， 独语斜阑， 难，难，难！ 人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽泪装欢， 瞒，瞒，瞒！ 唐婉 世情薄， 人情恶， 雨送黄昏花易落， 晓风干， 泪痕残， 欲笺心事， 独语斜阑， 难，难，难！ 人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽泪装欢， 瞒，瞒，瞒！ 唐婉 世情薄， 人情恶， 雨送黄昏花易落， 晓风干， 泪痕残， 欲笺心事， 独语斜阑， 难，难，难！ 人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽泪装欢， 瞒，瞒，瞒！ 唐婉 世情薄， 人情恶， 雨送黄昏花易落， 晓风干， 泪痕残， 欲笺心事， 独语斜阑， 难，难，难！ 人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽泪装欢， 瞒，瞒，瞒！ 唐婉 世情薄， 人情恶， 雨送黄昏花易落， 晓风干， 泪痕残， 欲笺心事， 独语斜阑， 难，难，难！ 人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽泪装欢， 瞒，瞒，瞒！ 唐婉 世情薄， 人情恶， 雨送黄昏花易落， 晓风干， 泪痕残， 欲笺心事， 独语斜阑， 难，难，难！ 人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽泪装欢， 瞒，瞒，瞒！ 唐婉 世情薄， 人情恶， 雨送黄昏花易落， 晓风干， 泪痕残， 欲笺心事， 独语斜阑， 难，难，难！ 人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽泪装欢， 瞒，瞒，瞒！ </p> <script src="jquery-3.2.1.min.js"></script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>bootstrap使用规范示例</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <style> .row div { border: 1px solid red; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1 col-xs-4">占1列</div> <div class="col-md-10 col-xs-4">占10列</div> <div class="col-md-1 col-xs-4">占1列</div> </div> <div class="row"> <div class="col-md-5 col-md-offset-2">第二行 左边空两列</div> </div> <div class="row"> <div class="col-md-3">占3列的div</div> <div class="col-md-6">占6列的div</div> <div class="col-md-6">占6列的div</div> </div> <div class="row"> <div class="col-md-3 col-md-push-9">占3列的div</div> <div class="col-md-6">占6列的div</div> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>媒体查询</title> <style> .c { height: 100px; width: 100px; } .c1 { background-color: red; } /*当打开网页的设备是一个显示器设备，并且显示器的宽度小于600px时，使用下面的样式*/ @media screen and (max- 400px) { .c1 { background-color: green; } } </style> </head> <body> <div class="c c1"></div> </body> <html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>登录注册示例</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <style> body { background-color: #eee; } #login-box { margin-top: 100px; } </style> </head> <body> <div class="container"> <div class="row"> <div id="login-box" class="col-md-4 col-md-offset-4"> <h3 class="text-center">请登录</h3> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">Email</label> <div class="col-sm-9 has-error"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> <span class="help-block">邮箱不能为空</span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">Password</label> <div class="col-sm-9"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-primary btn-block ">Sign in</button> </div> </div> </form> </div> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>信息收集卡示例</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="page-header"> <h1>信息收集卡 <small>共三步</small> </h1> </div> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style=" 33%">1/3 <span class="sr-only">33% Complete (success)</span> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <span class="panel-title">基本信息</span> <span class="glyphicon glyphicon-pushpin pull-right"></span> </div> <div class="panel-body"> <form class="form-horizontal"> <div class="form-group"> <label for="exampleInputName" class="col-sm-2 control-label">姓名</label> <div class="col-sm-4"> <input type="text" class="form-control" id="exampleInputName" placeholder="姓名"> </div> </div> <div class="form-group"> <label for="exampleInputMobile" class="col-sm-2 control-label">手机</label> <div class="col-sm-4"> <input type="text" class="form-control" id="exampleInputMobile" placeholder="手机"> </div> </div> <div class="form-group"> <label for="exampleInputEmail1" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-4"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="邮箱"> </div> </div> <div class="form-group"> <label for="exampleInputPassword1" class="col-sm-2 control-label">密码</label> <div class="col-sm-4"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码"> </div> </div> <div class="form-group"> <label for="exampleInputFile" class="col-sm-2 control-label">头像</label> <div class="col-sm-4"> <input type="file" id="exampleInputFile"> <p class="help-block">只支持png、jpg、gif格式。</p> </div> </div> <hr> <div class="form-group"> <label class="col-sm-2 control-label">属性</label> <div class="col-sm-4"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 我是一个好人 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 我是一个坏人 </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> 我真不是个人 </label> </div> </div> </div> </form> </div> </div> <div class=""> <button class="btn btn-success pull-right">下一步</button> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="progress"> <div id="myBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style=" 0%"> 0% </div> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script> // 定义一个进度条宽度的全局变量 var width = 0; // 定义一个保存定时器的变量 var t; var $myBar = $("#myBar"); function changeWidth() { if (width < 100){ // 自加1 width = width+1; // 修改width属性 $myBar.css("width",width+"%").text(width+"%"); }else { // 清除定时器 clearInterval(t); } } // // for (var i=0;i<100;i++){ // changeWidth(i); // } // 每隔200ms运行一次 t = setInterval(changeWidth, 200) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>轮播图示例</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="./imgs/banner_1.jpg" alt="..."> <div class="carousel-caption"> <h1>第一页介绍</h1> <p>老实人的恶毒，像...</p> </div> </div> <div class="item"> <img src="./imgs/banner_2.jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="./imgs/banner_3.jpg" alt="..."> <div class="carousel-caption"> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <hr> <button class="btn btn-success" data-toggle="modal" data-target="#i1">点我弹出</button> <div id="i1" class="modal fade" tabindex="-1" role="dialog"> <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">模态框</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> </form> </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><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script> $('.carousel').carousel({ interval: 2000 }); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <meta name="description" content=""> <meta name="author" content=""> <title>Blog</title> <!-- Bootstrap core CSS --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="./blog.css" rel="stylesheet"> </head> <body> <div class="blog-masthead navbar-fixed-top"> <div class="container"> <nav class="blog-nav"> <a class="blog-nav-item active" href="#">主页</a> <a class="blog-nav-item" href="#">日本专区</a> <a class="blog-nav-item" href="#">韩国专区</a> <a class="blog-nav-item" href="#">欧美专区</a> <a class="blog-nav-item" href="#">我的专区</a> </nav> </div> </div> <div class="container"> <div class="blog-header"> <h1 class="blog-title">Egon的博客</h1> <p class="lead blog-description">吾日三洗吾身，洗头、洗脸、洗身体。</p> </div> <div class="row"> <div class="col-sm-8 blog-main"> <div class="blog-post"> <h2 class="blog-post-title">那一夜</h2> <p class="blog-post-meta">2017-09-10 <a href="#">Egon</a></p> <p>这不是偶然，也不是祝愿， 这是上天对重逢的安排！ 不相信眼泪，不相信改变， 可是坚信彼此的请柬！ 我应该如何?如何回到你的心田， 我应该怎样?怎样才能走进你的梦. 我想呀想！盼呀盼！ 盼望回到我们的初恋， 我望呀望，看呀看， 在此重逢你的笑颜—— 那一夜，你没有拒绝我！ 那一夜，我伤害了你， 那一夜，你满脸泪水， 那一夜，你为我喝醉， 那一夜，我与你分手， 那一夜，我伤害了你， 那一夜，我举起酒杯， 那一夜，我心儿哭醉（那一夜，我不堪回味——</p> <hr> </div><!-- /.blog-post --> <div class="blog-post"> <h2 class="blog-post-title">那一晚</h2> <p class="blog-post-meta">2017-09-20<a href="#">Egon</a></p> <p>那一晚我的船推出了河心， 澄蓝的天上托着密密的星。 那一晚你的手牵着我的手， 迷惘的星夜封锁起重愁。 那一晚你和我分定了方向， 两人各认取个生活的模样。 . 到如今我的船仍然在海面飘， 细弱的桅杆常在风涛里摇。 到如今太阳只在我背后徘徊， 层层的阴影留守在我周围。 到如今我还记着那一晚的天， 星光、眼泪、白茫茫的江边！ 到如今我还想念你岸上的耕种： 红花儿黄花儿朵朵的生动。 . 那一天我希望要走到了顶层， 蜜一般酿出那记忆的滋润。 那一天我要跨上带羽翼的箭， 望着你花园里射一个满弦。 那一天你要听到鸟般的歌唱， 那便是我静候着你的赞赏。 那一天你要看到零乱的花影， 那便是我私闯入当年的边境！</p> </div><!-- /.blog-post --> <hr> <div class="blog-post"> <h2 class="blog-post-title">New feature</h2> <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <ul> <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li> <li>Donec id elit non mi porta gravida at eget metus.</li> <li>Nulla vitae elit libero, a pharetra augue.</li> </ul> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> </div><!-- /.blog-post --> <nav> <ul class="pager"> <li><a href="#">上一页</a></li> <li><a href="#">下一页</a></li> </ul> </nav> </div><!-- /.blog-main --> <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>关于</h4> <p>沙河街舞达人</p> <p>喊麦小能手</p> <p>被Python耽误的相声演员</p> </div> <div class="sidebar-module"> <h4>归档</h4> <ol class="list-unstyled"> <li><a href="#">2016/11</a></li> <li><a href="#">2016/12</a></li> <li><a href="#">2017/01</a></li> <li><a href="#">2017/02</a></li> <li><a href="#">2017/03</a></li> <li><a href="#">2017/04</a></li> <li><a href="#">2017/05</a></li> <li><a href="#">2017/06</a></li> <li><a href="#">2017/07</a></li> <li><a href="#">2017/08</a></li> <li><a href="#">2017/09</a></li> </ol> </div> <div class="sidebar-module"> <h4>友链</h4> <ol class="list-unstyled"> <li><a href="#">Alex</a></li> <li><a href="#">Yuan</a></li> </ol> </div> </div><!-- /.blog-sidebar --> </div><!-- /.row --> </div><!-- /.container --> <footer class="blog-footer"> <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p> <a href="#">Back to top</a> </p> </footer> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
blog.css
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>导航栏加面板和表格</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="my-style.css"> </head> <body> <nav class="navbar navbar-inverse navbar-default navbar-fixed-top"> <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="#">Brand</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="#">Link</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> <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="#">Link</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 --> </nav> <div class="container"> <div class="row"> <div class="col-md-12"> <h3>这里写标题</h3> </div> </div> <div class="panel panel-default"> <!-- Default panel contents --> <div class="my-panel-head"> <div class="my-title">Panel heading</div> </div> <div class="row"> <div class="my-table-toolbar"> <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="table-search">table search</label> <input type="text" class="form-control" id="table-search" placeholder="搜索"> </div> <button class="btn btn-primary">搜索</button> <button class="btn btn-success pull-right">添加</button> </form> </div> </div> <!-- Table --> <div class="my-table-wrapper"> <table class="table table-bordered table-striped"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> <td class="text-center"> <button type="button" class="btn btn-sm btn-success" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑 </button> <button type="button" class="btn btn-sm btn-danger" aria-label="Left Align"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </td> </tr> <tr> <th scope="row">2</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> <td class="text-center"> <button type="button" class="btn btn-sm btn-success" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑 </button> <button type="button" class="btn btn-sm btn-danger" aria-label="Left Align"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </td> </tr> <tr> <th scope="row">3</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> <td class="text-center"> <button type="button" class="btn btn-sm btn-success" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑 </button> <button type="button" class="btn btn-sm btn-danger" aria-label="Left Align"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </td> </tr> <tr> <th scope="row">4</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> <td class="text-center"> <button type="button" class="btn btn-sm btn-success" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑 </button> <button type="button" class="btn btn-sm btn-danger" aria-label="Left Align"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </td> </tr> <tr> <th scope="row">5</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> <td class="text-center"> <button type="button" class="btn btn-sm btn-success" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑 </button> <button type="button" class="btn btn-sm btn-danger" aria-label="Left Align"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </td> </tr> <tr> <th scope="row">6</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> <td class="text-center"> <button type="button" class="btn btn-sm btn-success" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑 </button> <button type="button" class="btn btn-sm btn-danger" aria-label="Left Align"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </td> </tr> <tr> <th scope="row">7</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> <td class="text-center"> <button type="button" class="btn btn-sm btn-success" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑 </button> <button type="button" class="btn btn-sm btn-danger" aria-label="Left Align"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </td> </tr> <tr> <th scope="row">8</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> <td class="text-center"> <button type="button" class="btn btn-sm btn-success" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑 </button> <button type="button" class="btn btn-sm btn-danger" aria-label="Left Align"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </td> </tr> <tr> <th scope="row">9</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> <td class="text-center"> <button type="button" class="btn btn-sm btn-success" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑 </button> <button type="button" class="btn btn-sm btn-danger" aria-label="Left Align"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </td> </tr> </tbody> </table> <div class="row"> <div class="col-md-7 col-xs-12 pull-right"> <nav aria-label="..."> <ul class=" pull-right pagination"> <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> </nav> </div> </div> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>