# 今日内容
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 chart="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 chart="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，所以必须放在前边) -->1湖南文理学院官网5 <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 .arch-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 .arch-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="arch-input" placeholder="请输入线路名称">67 <a class="arch-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 collapd" data-toggle="collap" data-target="#bs-example-navbar-collap-1" aria-expanded="fal">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="collap navbar-collap" id="bs-example-navbar-collap-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-collap -->102 </div><!-- /.container-fluid -->103 </nav>104 105 </div>106 107 <!--轮播图-->108 <div class="row">109 <div id="caroul-example-generic" class="caroul slide" data-ride="caroul">110 <!-- indicators -->111 <ol class="caroul-indicators">112 <li data-target="#caroul-example-generic" data-slide-to="0" class="active"></li>113 <li data-target="#caroul-example-generic" data-slide-to="1"></li>114 <li data-target="#caroul-example-generic" data-slide-to="2"></li>115 </ol>116 117 <!-- wrapper for slides -->118 <div class="caroul-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 caroul-control" href="#caroul-e辫字组词xample-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 caroul-control" href="#caroul-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_rvice.png" class="img-responsive">260 </div>261 <div class="row company">262 江苏传智播客教育科技股份有限公司 版权所有copyright 2006-2018, all rights rerved 苏icp备16007882263 </div>264 265 </footer>266 267 268 </body>269 </html>
本文发布于:2023-04-07 05:11:34，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/1ef43f1d51848453df1bbfe968095d4a.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：BootStrap笔记.doc
本文 PDF 下载地址：BootStrap笔记.pdf
| 留言与评论（共有 0 条评论） |
