了解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 ...
随机推荐
- python读写配置文件使用总结与避坑指南
关于今天的内容 最近拿python在写项目部署的相关集成代码,本来两天的工作量,硬是在来回的需求变更中,拖到了一周的时间.今天算是暂时告一段落了.这次由于涉及多个系统的调用和配置参数,代码开发中出现了 ...
- shell 脚本运行 hive sql
#!/b START=$(date +%s); datebegin=`date -d "$1" "+%Y%m%d"` dateend=`date -d &quo ...
- [TimLinux] JavaScript 取消异步请求
1. xhr.abort() 这个函数可以用来取消XMLHttpRequest()发起的异步请求,不是xhr.close()哦. 2. 场景 比如说,在关闭一个模态框后,数据可能还没有过来,这个时候需 ...
- Pycharm-2018.3.1专业版破解教程
1.去官网下载并安装2018.3.1(目前最新)专业版本的Pycharm:(https://www.jetbrains.com/pycharm/download/#section=windows). ...
- Win32_Processor CPU 参数说明
转载自:https://blog.csdn.net/yeyingss/article/details/49385421 AddressWidth --在32位操作系统,该值是32,在64位操作系统是 ...
- JS实现链式调用 a().b().c()
function a() { this.b = function () { console.log('111') return this } this.c = function () { consol ...
- 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
总结: 结构: display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是 ...
- Java开发数据库设计的14个技巧，你知道几个？
1. 原始单据与实体之间的关系 可以是一对一.一对多.多对多的关系.在一般情况下,它们是一对一的关系:即一张原始单据对应且只对应一个实体.在特殊情况下,它们可能是一对多或多对一的关系,即一张原始单证对 ...
- 记录我的 python 学习历程-Day07 基础数据类型进阶 / 数据类型之间的转换 / 基础数据类型总结 / 编码的进阶
基础数据类型 str(字符串) str:补充方法练习一遍就行 s.capitalize() 首字母大写,其余变小写 s = 'dyLAn' print(s.capitalize()) # Dylan ...
- 算法题-Z 字形变换
描述 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L C I R ...