了解Bootstrap和开发响应式网站
什么是Bootstrap?
Bootstrap是Twitter推出的一个开源的用于web前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1]。
简单来说Bootstap是一个开源的前端开发工具包，是一个前端框架。
Bootstrap特点
1：跨设备、跨浏览器 (兼容现在所有现在使用的浏览器 但 ie浏览器的较低版本 ie9一下的版本还是有些毛病的，但现在应该用的比较少) 2：响应式开发 （Bootstrap支持PC端网站开发还可以实现兼容移动端的分辨率开发
3：提供许多样式 （Bootstrap提供了需要平时网站需要的样式 而 我们使用只要引用就OK了） 4： 内置jquery插件 (可以实现常规的特效) 5： 支持HTML5 CSS3
响应式开发：
响应式开发介绍： 适用于设备不同 屏幕尺寸不同实现网站的布局和样式的设置，从而适应不同尺寸的设备
设备的划分为：
超小屏幕 （手机） <768px 小屏设备 （平板） >=768px ~ <992px
中等屏幕（桌面显示器）>=992px ~ <1200px 宽屏设备（大桌面显示器）>=1200px
我也简单的开发了一部分阿里百秀（https://www.alibaixiu.cn/ ）网站页面的样式，因为这个网站就是响应式网站所以就拿来试试手
简单来说： 响应式开发就是根据不同屏幕设置不同的样式 便于开发
HTML部分：
<div class="container Box">
<div class="row">
<div class="col-md-2 Noe">
<div class="logo">
<a href="#">
<!-- 超小屏幕下隐藏 其他显示 -->
<img class="hidden-xs" alt="阿里百秀" src="https://www.alibaixiu.cn/wp-content/uploads/2016/03/logo.png">
<!-- 超小屏幕下显示 其他隐藏 -->
<span class="visible-xs">阿里百秀</span>
</a>
</div>
<div class="nav">
<ul>
<li><span class="glyphicon glyphicon-camera"></span><a>生活馆</a></li>
<li><span class="glyphicon glyphicon-picture"></span><a>自然汇</a></li>
<li><span class="glyphicon glyphicon-phone"></span><a>科技潮</a></li>
<li><span class="glyphicon glyphicon-gift"></span><a>奇趣事</a></li>
<li><span class="glyphicon glyphicon-glass"></span><a>美食杰</a></li>
</ul>
</div>
</div> <div class="col-md-7">
<!-- 新闻模块 -->
<div class="Bav clearfix">
<ul>
<li>
<a>
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/10/thumbnail.png" alt="">
<p>阿里百秀</p>
</a>
</li>
<li>
<a>
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20151130092792289228-150x150.jpg" alt="">
<p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
</a>
</li>
<li>
<a>
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20150907095629885.jpg" alt="">
<p>世界真美 令人惊叹 卫星拍地球风貌</p>
</a>
</li>
<li>
<a>
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/E47E03D9108E63E-150x150.jpeg" alt="">
<p>震惊！ 巨型蜈蚣遭毒蛇吞噬 穿肚而出同归于尽</p>
</a>
</li>
<li>
<a>
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/9D8A213E47E8822-150x150.jpeg" alt="">
<p>关于指甲的10个健康知识 你知道几个？</p>
</a>
</li>
</ul>
</div>
<!-- 发表模块 -->
<!-- 第一部分 -->
<div class="Dav visible-md visible-lg">
<h3><strong>一周热门排行</strong></h3>
<ul><li>暂无文章！</li></ul>
</div>
<!-- 第二部分 -->
<div class="Nav">
<div class="Nav-1 hidden-xs">
<h3><strong>热门推荐</strong></h3>
</div>
<div class="row Nav-2 hidden-xs">
<div class="col-sm-3">
<a href="#">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20151130092792289228-150x150.jpg" alt="">
奇了成都一小区护卫长得像马云 市民纷纷求合影
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20150907095629885.jpg" alt="">
世界真美 令人惊叹 卫星拍地球风景地貌
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/E47E03D9108E63E-150x150.jpeg" alt="">
震惊！ 巨型蜈蚣遭毒蛇吞噬 穿肚而出同归于尽
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/9D8A213E47E8822-150x150.jpeg" alt="">
关于指甲的10个健康知识 你知道几个？
</a>
</div>
</div>
<div class="Nav-3">
<h3><strong>最新发布</strong></h3>
<h6><strong>奇趣事</strong><i class="lavel"></i></h6>
<span>奇了 成都一小区护卫长得像马云 市民纷纷求合影</span>
<i class="glyphicon glyphicon-picture text-muted"></i><i class="text-muted">4</i>
<h6 style="display:block" class="text-muted">万林论 发布于 2015-11-30</h6>
<div class="row Nav-3-2 hidden-xs">
<div class="col-sm-3">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20151130092792289228-150x150.jpg" alt="">
</div>
<div class="col-sm-3">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/1117297020_14488423139621n-150x150.jpg" alt="">
</div>
<div class="col-sm-3">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20151130092444924492-150x150.jpg" alt="">
</div>
<div class="col-sm-3">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20151130093090989098-150x150.jpg" alt="">
</div>
</div>
<h5 class="text-muted">2015年11月29日，四川成都，貌似马云的门卫柯全寿。日前，在新鸿路南一巷一小区内，一名叫柯全寿的门卫被许多小区住户认为其长相貌似阿里巴巴总裁 ...</h5>
<h6 class="text-muted Nav-3-3"><i>阅读(6043)</i> <i>评论(12)</i> <i>赞(100)</i> <i>标签：</i><a>成都</a> / <a>长相</a> / <a>门卫</a> / <a>马云</a></h6>
</div>
</div>
<!-- 第三部分 -->
<div class="Tav">
<!-- 第三部分-1 -->
<div class="row">
<div class="col-sm-9 Tav-1">
<h6><strong>自然汇</strong><i class="lavel"></i></h6>
<span>世界真美 令人惊叹 卫星拍地球风景地貌</span>
<i class="glyphicon glyphicon-picture text-muted"></i><i class="text-muted">11</i>
<h6 style="display:block" class="text-muted">alibaixiu 发布于 2015-11-29</h6>
<h5 class="text-muted">据英国《每日邮报》9月6日报道，近日，由人造卫星拍摄的地球上最美妙的风景地貌图片将会在奥地利的林茨电子艺术中心展出。这些绝美的图片由欧洲空 ...</h5>
<h6 class="text-muted Tav-1-1"><i>阅读(3306)</i> <i>评论(1)</i> <i>赞(41)</i> <i>标签：</i><a>世界</a> / <a>全球</a> / <a>卫星</a> / <a>地貌</a> / <a>真美</a></h6>
</div>
<div class="col-sm-3 Tav-2">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20150907095629885.jpg" alt="">
</div>
</div>
<!-- 第三部分-2 -->
<div class="row">
<div class="col-sm-9 Tav-1">
<h6><strong>奇趣事</strong><i class="lavel"></i></h6>
<span>震惊！ 巨型蜈蚣遭毒蛇吞噬 穿肚而出同归于尽</span>
<i class="glyphicon glyphicon-picture text-muted"></i><i class="text-muted">3</i>
<h6 style="display:block" class="text-muted">alibaixiu 发布于 2015-11-23</h6>
<h5 class="text-muted">猎杀与求生是动物在大自然的生存的技能，往往以一方胜利另一方失败告终。不过有研究人员在南欧一个岛上发现同归于尽的大自然奇观。一条蝰蛇与体型 ...</h5>
<h6 class="text-muted Tav-1-1"><i>阅读(2905)</i> <i>评论(3)</i> <i>赞(25)</i> <i>标签：</i><a>奇闻趣事</a> / <a>尸体</a> / <a>毒蛇</a> / <a>自然</a> / <a>蜈蚣</a></h6>
</div>
<div class="col-sm-3 Tav-2">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/E47E03D9108E63E-150x150.jpeg" alt="">
</div>
</div>
<!-- 第三部分-3 -->
<div class="row">
<div class="col-sm-9 Tav-1">
<h6><strong>生活馆</strong><i class="lavel"></i></h6>
<span>关于指甲的10个健康知识 你知道几个？</span>
<i class="glyphicon glyphicon-picture text-muted"></i><i class="text-muted">1</i>
<h6 style="display:block" class="text-muted">alibaixiu 发布于 2015-11-23</h6>
<h5 class="text-muted">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧！</h5>
<h6 class="text-muted Tav-1-1"><i>阅读(2394)</i> <i>评论(1)</i> <i>赞(17)</i> <i>标签：</i><a>健康</a> / <a>感染</a> / <a>指甲</a> / <a>疾病</a> / <a>皮肤</a> / <a>营养</a> / <a>趣味生活</a></h6>
</div>
<div class="col-sm-3 Tav-2">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/9D8A213E47E8822-150x150.jpeg" alt="">
</div>
</div>
<!-- 第四部分-4 -->
<div class="row">
<div class="col-sm-9 Tav-1">
<h6><strong>科技湖</strong><i class="lavel"></i></h6>
<span>神奇！ 可办公可拍照的智能戒指</span>
<i class="glyphicon glyphicon-picture text-muted"></i><i class="text-muted">2</i>
<h6 style="display:block" class="text-muted">alibaixiu 发布于 2015-11-23</h6>
<h5 class="text-muted">是不是看赌神的时候特别想拥有一个周润发那样的戒指？现在Neyya智能戒就跟那个有异曲同工之妙，但Neyya智能戒不能帮你赌博，Neyya智能戒指通过蓝 ...</h5>
<h6 class="text-muted Tav-1-1"><i>阅读(1550)</i> <i>评论(3)</i> <i>赞(13)</i> <i>标签：</i><a>奇趣科技</a> / <a>戒指</a> / <a>手机</a> / <a>智能手机</a> / <a>照片</a></h6>
</div>
<div class="col-sm-3 Tav-2">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/B6DEF25DD1B3EA0-150x150.jpeg" alt="">
</div>
</div>
<!-- 第五部分 -->
<div class="row">
<div class="col-sm-9 Tav-1">
<h6><strong>奇趣事</strong><i class="lavel"></i></h6>
<span>竹子真的是大熊猫最爱吗？ NO，国宝也吃肉</span>
<i class="glyphicon glyphicon-picture text-muted"></i><i class="text-muted">3</i>
<h6 style="display:block" class="text-muted">万林论 发布于 2015-11-19</h6>
<h5 class="text-muted">大多数人认为熊猫最爱吃的食物就是竹子，是食草动物。殊不知，大熊猫还是食肉动物。近日，研究者发现大熊猫的肠道菌群不适合消化竹子更容易消化肉 ...</h5>
<h6 class="text-muted Tav-1-1"><i>阅读(2174)</i> <i>评论(2)</i> <i>赞(8)</i> <i>标签：</i><a>动物</a> / <a>吃肉</a> / <a>大熊猫</a> / <a>研究</a> / <a>竹子</a> / <a>肠道</a></h6>
</div>
<div class="col-sm-3 Tav-2">
<img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/EC8CCE0746F6E27-150x150.jpeg" alt="">
</div>
</div>
</div>
</div> <div class="col-md-3 visible-md visible-lg">
<div class="Uav">
<a><img src="https://www.alibaixiu.cn/wp-content/uploads/2018/02/zgboke.jpg" alt=""></a>
</div>
<div class="Kav">
<a href="#">
<strong>热搜</strong>
<h3>欢迎加入中国博客联盟</h3>
<p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
</a>
</div>
</div>
</div>
</div>
CSS部分：（因为是响应式布局所以CSS样式会比较多些）
/* 修改container的最大宽度为1280 */
@media screen and (min-width:1280px){
.container{
width:1280px;
}
}
body{
background-color:#ccc;
}
.Box{
background-color:#fff;
}
.Noe{
padding-left:;
}
.logo{
background-color:#429ad9;
}
.logo a{
text-decoration: none;
}
.logo img{
max-width:100%;
display:block;
text-align: center;
margin:0 auto;
}
/* 在超小屏幕下把img图片隐藏 显示span元素 */
.logo span{
display:block;
width:100%;
height:50px;
line-height:50px;
font-size:18px;
color:#fff;
text-align: center;
}
.nav{
width:100%;
border-bottom:1px solid #ccc;
}
.nav ul{
margin:;
padding:;
}
.nav ul li{
display:block;
height:44px;
background-color:#eee;
list-style: none;
cursor: pointer;
}
/* 在小屏幕下 li宽度变化 */
@media screen and (max-width:991px){
.nav ul li{
float: left;
width:20%;
}
}
.nav ul li span{
display:inline-block;
padding:0 17px 0px 30px;
color:#666; }
.nav ul li a{
text-decoration: none;
color:#666666;
font-size:16px;
text-align:center;
line-height:44px;
}
/* 在超小屏幕下 文字会变小 内边距变小 */
@media screen and (max-width:767px){
.nav ul li span{
padding:0 17px 0 10px;
}
.nav ul li a{
font-size: 14px;
}
}
.nav ul li:hover{
background-color:#fff;
}
/* .row div:nth-child(2){
padding-left: 0;
padding-right: 0;
} */
.Bav ul{
padding-left:;
}
.Bav li{
float: left;
list-style: none;
width:25%;
height: 128px;
padding-right: 10px;
margin-bottom: 10px;
}
.Bav li a{
position: relative;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.Bav li a p{
position: absolute;
background-color:rgb(0, 0, 0,.7);
width:100%;
height: 41px;
left:;
bottom:;
margin-bottom:;
color:#fff;
font-size:12px;
padding:4px 10px 0;
}
.Bav li img{
width:100%;
height: 100%;
}
.Bav li:nth-child(1){
width:50%;
height: 266px;
}
.Bav li:nth-child(1) img{
width:100%;
height:100%;
}
.Bav li:nth-child(1) p{
line-height: 41px;
font-size:16px;
padding:0 10px 0; }
.Bav li p:hover{
background-color:#428bca;
transition: background-color 0.3s linear;
}
.Dav{
width:100%;
}
.Dav h3{
width:100%;
height:36px;
margin-top:;
padding-top:10px;
padding-bottom:2px;
border-bottom:2px solid #ccc;
}
.Dav strong{
position: relative;
color:inherit;
font-size:22px;
border-bottom:3px solid #429ad9;
bottom: 2px;
line-height: 25.4px;
font-family: FangSong;
}
.Dav ul{
width:100%;
padding-left:;
margin-bottom:20px;
padding-top:20px;
}
.Dav ul li{
list-style: none;
}
.Nav-3{
border-bottom:2px solid #ccc;
}
.Nav-1 h3{
border-bottom:2px solid #ccc;
}
.Nav-1 strong{
width:100%;
height: 32px;
border-bottom:3px solid #429ad9;
font-family: FangSong;
color:inherit;
}
.Nav-2{
padding-top:10px;
}
.Nav img{
width:100%;
}
.Nav a{
text-decoration: none;
color:#666;
font-size:14px;
}
.Nav a:hover{
color:#429ad9;
}
.Nav-3 h3{
border-bottom:2px solid #ccc;
}
.Nav-3 h3 strong{
width:100%;
height: 32px;
border-bottom:3px solid #429ad9;
font-family: FangSong;
color:inherit;
}
.Nav-3 h6{
display:inline-block;
position: relative;
}
.Nav-3 h6 strong{
color:#fff;
background-color:#429ad9;
padding:5px 7px;
}
.Nav-3 h6 .lavel{
position: absolute;
width:;
height:;
border-left: 4px solid #000000;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left-color: #429ad9;
top:3px;
left: 50px;
}
.Nav-3 span{
display:inline-block;
font-size:20px;
color:#444;
margin-left:8px;
margin-right: 8px;
}
.Nav-3-2 img{
width:100%;
height:100%;
}
.Nav-3-2 img:hover{
filter:brightness(60%);
transition:filter 0.5s linear;
}
.Nav-3-3 i{
margin-right: 15px;
} .Tav .row{
border-bottom:2px solid #ccc;
padding:15px 0;
}
.Tav-1{
margin-top:10px;
}
.Tav-1 h6{
position: relative;
display:inline-block;
}
.Tav-1 h6 strong{
color:#fff;
background-color:#429ad9;
padding:5px 7px;
}
.Tav-1 h6 .lavel{
position: absolute;
width:;
height:;
border-left: 4px solid #000000;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left-color: #429ad9;
top:3px;
left: 50px;
}
.Tav-1 span{
display:inline-block;
font-size:20px;
color:#444;
margin-left:8px;
margin-right: 8px;
}
.Tav-1-1 i{
margin-right: 15px;
}
.Tav-1 h6 a{
color:#444;
font-size: 14px;
text-decoration: none;
}
.Tav-1-1 a:hover{
color:#429ad9;
}
.Tav-2{
margin-top: 10px;
}
.Tav-2 img{
width:100%;
}
.Uav{
margin-bottom:20px;
}
.Uav img{
width:100%;
}
.Kav{
border:1px solid #ccc;
}
.Kav:hover{
border-color:#428bca;
}
.Kav a{
display:inline-block;
padding:0 15px 15px 15px;
text-decoration: none;
}
.Kav a strong{
display:block;
width:58px;
height:28px;
line-height:28px;
text-align:center;
background-color:#428bca;
color:#fff;
font-size:14px;
}
.Kav h3{
font-size:20px;
}
.Kav p{
font-size:12px;
}
/* 在小屏幕下 */
@media screen and (max-width:991px){
.Bav{
margin-top:20px;
}
}
/* 在超小屏幕下 */
@media screen and (max-width:767px){
.Bav li{
width:50%;
}
.Bav li:nth-child(1){
width:100%;
}
.Bav li:nth-child(1) p {
text-align:center;
}
.Tav-2 img{
height:200px;
}
}
整个代码的页面效果如下：
2019-10-29 22:39:36
了解Bootstrap和开发响应式网站的更多相关文章
- 使用Bootstrap 3开发响应式网站实践07,页脚
页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...
- 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容
□ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...
- 使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息
本篇体验用Tab插件显示内容.Html部分为: <div class="row" id="moreInfo"> <div class=&quo ...
- 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容
在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...
- 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版
通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...
- 使用Bootstrap 3开发响应式网站实践02,轮播
本篇体验图片轮播.html部分为: <div class="carousel slide" id="myCarousel" > <!--Ind ...
- 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等
"使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...
- 7 个 Bootstrap 在线编辑器用于快速开发响应式网站
Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...
- Bootstrap 简介: 创建响应式、移动项目的工具
原文链接: Introduction to Bootstrap: A Tool for Building Responsive, Mobile-First Projects 下载: 示例代码Boots ...
随机推荐
- openstack网络（三）
openstack网络架构 Neutron中的基本网络元素 插件扩展功能 ML2Modular Layer 2 plugin Neutron架构图 参考资料 openstack网络架构 Neutron ...
- SpringBoot使用freemarker模板
导入依赖 <!-- 添加freemarker模版的依赖 --> <dependency> <groupId>org.springframework.boot< ...
- 2018 牛客国庆集训派对Day4 - H 树链博弈
链接:https://ac.nowcoder.com/acm/contest/204/H来源:牛客网 题目描述 给定一棵 n 个点的树,其中 1 号结点是根,每个结点要么是黑色要么是白色 现在小 Bo ...
- 洛谷 题解 P5015 【标题统计】 NOIP2018 普及组 T1
没有人用 scanf("%c", &ch) != EOF 吗? scanf 和 EOF 会伤心的. 思路:逐个读入字符,遇到EOF中止,对于每个读入的字符进行判断. 附上考 ...
- SpringBoot系列之集成Druid配置数据源监控
SpringBoot系列之集成Druid配置数据源监控 继上一篇博客SpringBoot系列之JDBC数据访问之后,本博客再介绍数据库连接池框架Druid的使用 实验环境准备: Maven Intel ...
- 重新精读《Java 编程思想》系列之组合与继承
Java 复用代码的两种方式组合与继承. 组合 组合只需将对象引用置于新类中即可. 比如我们有一个B类,它具有一个say方法,我们在A类中使用B类的方法,就是组合. public class B { ...
- Java工作流系统jflow向工作处理器传值的方法大全
关键词:工作流快速开发平台 工作流流设计 业务流程管理 asp.net 开源工作流 bpm工作流系统 java工作流主流框架 自定义工作流引擎 表单设计器 流程设计器 在启动开始节点时, ...
- VMware中Bridged、NAT、host-only三种网络连接模式的原理及其区别
VMnet0:这是VMware用于虚拟桥接网络下的虚拟交换机: VMnet1:这是VMware用于虚拟Host-Only网络下的虚拟交换机: VMnet8:这是VMware用于虚拟NAT网络下的虚拟交 ...
- Nginx热升级流程，看这篇就够了
在之前做过 Nginx 热升级的演示,他能保证nginx在不停止服务的情况下更换他的 binary 文件,这个功能非常有用,但我们在执行 Nginx 的 binary 文件升级过程中,还是会遇到很多问 ...
- eclipse配置svn导出项目
eclipse安装svn 菜单栏help-->eclipse marketspace-->find中搜索subclipse,安装-->ok windows-->show vie ...