BootStrap笔记
2019-09-23 08:44:07来源：博客园 阅读 ()
BootStrap笔记
# 今日内容
1. Bootstrap
## Bootstrap：
1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
* 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
* 好处：
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局。
* 同一套页面可以兼容不同分辨率的设备。
2. 快速入门
1. 下载Bootstrap
2. 在项目中将这三个文件夹复制
3. 创建html页面，引入必要的资源文件
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 8 <title>Bootstrap HelloWorld</title> 9 10 <!-- Bootstrap --> 11 <link href="css/bootstrap.min.css" rel="stylesheet"> 12 13 14 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> 15 <script src="js/jquery-3.2.1.min.js"></script> 16 <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> 17 <script src="js/bootstrap.min.js"></script> 18 </head> 19 <body> 20 <h1>你好，世界！</h1> 21 22 </body> 23 </html>
## 响应式布局
* 同一套页面可以兼容不同分辨率的设备。
* 实现：依赖于栅格系统：将一行平均分成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. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
## CSS样式和JS插件
1. 全局CSS样式：
* 按钮：class="btn btn-default"
* 图片：
* class="img-responsive"：图片在任意尺寸都占100%
* 图片形状
* <img src="..." alt="..." class="img-rounded">：方形
* <img src="..." alt="..." class="img-circle"> ： 圆形
* <img src="..." alt="..." class="img-thumbnail"> ：相框
* 表格
* table
* table-bordered
* table-hover
* 表单
* 给表单项添加：class="form-control"
2. 组件：
* 导航条
* 分页条
3. 插件：
* 轮播图
## 案例
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 8 <title>Bootstrap HelloWorld</title> 9 10 <!-- Bootstrap --> 11 <link href="css/bootstrap.min.css" rel="stylesheet"> 12 13 14 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> 15 <script src="js/jquery-3.2.1.min.js"></script> 16 <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> 17 <script src="js/bootstrap.min.js"></script> 18 <style> 19 .paddtop{ 20 padding-top: 10px; 21 } 22 .search-btn{ 23 float: left; 24 border:1px solid #ffc900; 25 width: 90px; 26 height: 35px; 27 background-color:#ffc900 ; 28 text-align: center; 29 line-height: 35px; 30 margin-top: 15px; 31 } 32 33 .search-input{ 34 float: left; 35 border:2px solid #ffc900; 36 width: 400px; 37 height: 35px; 38 padding-left: 5px; 39 margin-top: 15px; 40 } 41 .jx{ 42 border-bottom: 2px solid #ffc900; 43 padding: 5px; 44 } 45 .company{ 46 height: 40px; 47 background-color: #ffc900; 48 text-align: center; 49 line-height:40px ; 50 font-size: 8px; 51 } 52 </style> 53 </head> 54 <body> 55 56 <!-- 1.页眉部分--> 57 <header class="container-fluid"> 58 <div class="row"> 59 <img src="img/top_banner.jpg" class="img-responsive"> 60 </div> 61 <div class="row paddtop"> 62 <div class="col-md-3"> 63 <img src="img/logo.jpg" class="img-responsive"> 64 </div> 65 <div class="col-md-5"> 66 <input class="search-input" placeholder="请输入线路名称"> 67 <a class="search-btn" href="#">搜索</a> 68 </div> 69 <div class="col-md-4"> 70 <img src="img/hotel_tel.png" class="img-responsive"> 71 </div> 72 73 </div> 74 <!--导航栏--> 75 <div class="row"> 76 <nav class="navbar navbar-default"> 77 <div class="container-fluid"> 78 <!-- Brand and toggle get grouped for better mobile display --> 79 <div class="navbar-header"> 80 <!-- 定义汉堡按钮 --> 81 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 82 <span class="sr-only">Toggle navigation</span> 83 <span class="icon-bar"></span> 84 <span class="icon-bar"></span> 85 <span class="icon-bar"></span> 86 </button> 87 <a class="navbar-brand" href="#">首页</a> 88 </div> 89 90 <!-- Collect the nav links, forms, and other content for toggling --> 91 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 92 <ul class="nav navbar-nav"> 93 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 94 <li><a href="#">Link</a></li> 95 <li><a href="#">Link</a></li> 96 <li><a href="#">Link</a></li> 97 <li><a href="#">Link</a></li> 98 <li><a href="#">Link</a></li> 99 100 </ul> 101 </div><!-- /.navbar-collapse --> 102 </div><!-- /.container-fluid --> 103 </nav> 104 105 </div> 106 107 <!--轮播图--> 108 <div class="row"> 109 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 110 <!-- Indicators --> 111 <ol class="carousel-indicators"> 112 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 113 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 114 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 115 </ol> 116 117 <!-- Wrapper for slides --> 118 <div class="carousel-inner" role="listbox"> 119 <div class="item active"> 120 <img src="img/banner_1.jpg" alt="..."> 121 </div> 122 <div class="item"> 123 <img src="img/banner_2.jpg" alt="..."> 124 </div> 125 <div class="item"> 126 <img src="img/banner_3.jpg" alt="..."> 127 </div> 128 129 </div> 130 131 <!-- Controls --> 132 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 133 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 134 <span class="sr-only">Previous</span> 135 </a> 136 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 137 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 138 <span class="sr-only">Next</span> 139 </a> 140 </div> 141 142 143 144 </div> 145 146 </header> 147 <!-- 2.主体部分--> 148 <div class="container"> 149 <div class="row jx"> 150 <img src="img/icon_5.jpg"> 151 <span>黑马精选</span> 152 </div> 153 154 <div class="row paddtop"> 155 <div class="col-md-3"> 156 <div class="thumbnail"> 157 <img src="img/jiangxuan_3.jpg" alt=""> 158 <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p> 159 <font color="red">¥ 699</font> 160 </div> 161 </div> 162 <div class="col-md-3"> 163 <div class="thumbnail"> 164 <img src="img/jiangxuan_3.jpg" alt=""> 165 <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p> 166 <font color="red">¥ 699</font> 167 </div> 168 169 </div> 170 <div class="col-md-3"> 171 172 <div class="thumbnail"> 173 <img src="img/jiangxuan_3.jpg" alt=""> 174 <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p> 175 <font color="red">¥ 699</font> 176 </div> 177 </div> 178 <div class="col-md-3"> 179 180 <div class="thumbnail"> 181 <img src="img/jiangxuan_3.jpg" alt=""> 182 <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p> 183 <font color="red">¥ 699</font> 184 </div> 185 </div> 186 187 188 </div> 189 <div class="row jx"> 190 <img src="img/icon_6.jpg"> 191 <span>国内游</span> 192 </div> 193 <div class="row paddtop"> 194 <div class="col-md-4"> 195 <img src="img/guonei_1.jpg"> 196 </div> 197 <div class="col-md-8"> 198 <div class="row"> 199 <div class="col-md-4"> 200 <div class="thumbnail"> 201 <img src="img/jiangxuan_3.jpg" alt=""> 202 <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p> 203 <font color="red">¥ 699</font> 204 </div> 205 </div> 206 <div class="col-md-4"> 207 <div class="thumbnail"> 208 <img src="img/jiangxuan_3.jpg" alt=""> 209 <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p> 210 <font color="red">¥ 699</font> 211 </div> 212 213 </div> 214 <div class="col-md-4"> 215 216 <div class="thumbnail"> 217 <img src="img/jiangxuan_3.jpg" alt=""> 218 <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p> 219 <font color="red">¥ 699</font> 220 </div> 221 </div> 222 223 </div> 224 <div class="row"> 225 <div class="col-md-4"> 226 <div class="thumbnail"> 227 <img src="img/jiangxuan_3.jpg" alt=""> 228 <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p> 229 <font color="red">¥ 699</font> 230 </div> 231 </div> 232 <div class="col-md-4"> 233 <div class="thumbnail"> 234 <img src="img/jiangxuan_3.jpg" alt=""> 235 <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p> 236 <font color="red">¥ 699</font> 237 </div> 238 239 </div> 240 <div class="col-md-4"> 241 242 <div class="thumbnail"> 243 <img src="img/jiangxuan_3.jpg" alt=""> 244 <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p> 245 <font color="red">¥ 699</font> 246 </div> 247 </div> 248 249 250 </div> 251 252 </div> 253 254 </div> 255 </div> 256 <!-- 3.页脚部分--> 257 <footer class="container-fluid"> 258 <div class="row"> 259 <img src="img/footer_service.png" class="img-responsive"> 260 </div> 261 <div class="row company"> 262 江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882 263 </div> 264 265 </footer> 266 267 268 </body> 269 </html>
原文链接:https://www.cnblogs.com/freud-shen/p/11569945.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- HTML骨架 2020-06-10
- [书籍精读]《CSS世界》精读笔记分享 2020-05-17
- [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读 2020-05-07
- [书籍精读]《Web前端黑客技术揭秘》精读笔记分享 2020-04-26
- Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象 2020-04-20
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
