瞭解Bootstrap和開發響應式網站

時間 2019-11-13

原文原文鏈接

什麼是Bootstrap?前端

　　 Bootstrap是Twitter推出的一個開源的用於web前端開發的工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合做開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它便是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。 ^[1]。jquery

簡單來講Bootstap是一個開源的前端開發工具包，是一個前端框架。web

Bootstrap特色瀏覽器

　　1：跨設備、跨瀏覽器 (兼容如今全部如今使用的瀏覽器但 ie瀏覽器的較低版本 ie9一下的版本仍是有些毛病的，但如今應該用的比較少) 2：響應式開發（Bootstrap支持PC端網站開發還能夠實現兼容移動端的分辨率開發前端框架

　　3：提供許多樣式（Bootstrap提供了須要平時網站須要的樣式而咱們使用只要引用就OK了） 4：內置jquery插件 (能夠實現常規的特效) 5：支持HTML5 CSS3框架

響應式開發：jquery插件

　　響應式開發介紹：適用於設備不一樣屏幕尺寸不一樣實現網站的佈局和樣式的設置，從而適應不一樣尺寸的設備ide

　　　　設備的劃分爲：工具

　　　　　　　　　　　超小屏幕（手機） <768px 小屏設備（平板） >=768px ~ <992px 佈局

　　　　　　　　　　　中等屏幕（桌面顯示器）>=992px ~ <1200px 寬屏設備（大桌面顯示器）>=1200px

我也簡單的開發了一部分阿里百秀（https://www.alibaixiu.cn/ ）網站頁面的樣式，由於這個網站就是響應式網站因此就拿來試試手

簡單來講：響應式開發就是根據不一樣屏幕設置不一樣的樣式便於開發

HTML部分：

  1 <div class="container Box">
  2         <div class="row">
  3             <div  class="col-md-2 Noe">
  4                 <div class="logo">
  5                     <a href="#">
  6                         <!-- 超小屏幕下隱藏 其餘顯示 -->
  7                         <img  class="hidden-xs" alt="阿里百秀" src="https://www.alibaixiu.cn/wp-content/uploads/2016/03/logo.png">
  8                         <!-- 超小屏幕下顯示 其餘隱藏 -->
  9                         <span class="visible-xs">阿里百秀</span>
 10                     </a>
 11                 </div>
 12                 <div class="nav">
 13                     <ul>
 14                         <li><span class="glyphicon glyphicon-camera"></span><a>生活館</a></li>
 15                         <li><span class="glyphicon glyphicon-picture"></span><a>天然匯</a></li>
 16                         <li><span class="glyphicon glyphicon-phone"></span><a>科技潮</a></li>
 17                         <li><span class="glyphicon glyphicon-gift"></span><a>奇趣事</a></li>
 18                         <li><span class="glyphicon glyphicon-glass"></span><a>美食傑</a></li>
 19                     </ul>
 20                 </div>
 21             </div>
 22 
 23             <div class="col-md-7">
 24                 <!-- 新聞模塊 -->
 25                 <div class="Bav clearfix">
 26                     <ul>
 27                         <li>
 28                             <a>
 29                             <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/10/thumbnail.png" alt="">
 30                             <p>阿里百秀</p>
 31                             </a>
 32                         </li>
 33                         <li>
 34                             <a>
 35                             <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20151130092792289228-150x150.jpg" alt="">
 36                             <p>奇了 成都一小區護衛長得像馬雲 市民紛紛求合影</p>
 37                             </a>
 38                         </li>
 39                         <li>
 40                             <a>
 41                             <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20150907095629885.jpg" alt="">
 42                             <p>世界真美 使人驚歎 衛星拍地球風貌</p>
 43                             </a>
 44                         </li>
 45                         <li>
 46                             <a>
 47                             <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/E47E03D9108E63E-150x150.jpeg" alt="">
 48                             <p>震驚！ 巨型蜈蚣遭毒蛇吞噬 穿肚而出玉石俱焚</p>
 49                             </a>
 50                         </li>
 51                         <li>
 52                             <a>
 53                             <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/9D8A213E47E8822-150x150.jpeg" alt="">
 54                             <p>關於指甲的10個健康知識 你知道幾個？</p>
 55                             </a>
 56                         </li>
 57                     </ul>
 58                 </div>
 59                 <!-- 發表模塊 -->
 60                 <!-- 第一部分 -->
 61                 <div class="Dav visible-md visible-lg">
 62                     <h3><strong>一週熱門排行</strong></h3>
 63                     <ul><li>暫無文章！</li></ul>
 64                 </div>
 65                 <!-- 第二部分 -->
 66                 <div class="Nav">   
 67                     <div class="Nav-1 hidden-xs">
 68                         <h3><strong>熱門推薦</strong></h3>
 69                     </div>
 70                     <div class="row Nav-2 hidden-xs">
 71                         <div class="col-sm-3">
 72                             <a href="#">
 73                                 <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20151130092792289228-150x150.jpg" alt="">
 74                                 奇了成都一小區護衛長得像馬雲 市民紛紛求合影
 75                             </a>
 76                         </div>
 77                         <div class="col-sm-3">
 78                             <a href="#">
 79                                 <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20150907095629885.jpg" alt="">
 80                                 世界真美 使人驚歎 衛星拍地球風景地貌
 81                             </a>
 82                         </div>
 83                         <div class="col-sm-3">
 84                             <a href="#">
 85                                 <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/E47E03D9108E63E-150x150.jpeg" alt="">
 86                                 震驚！ 巨型蜈蚣遭毒蛇吞噬 穿肚而出玉石俱焚
 87                             </a>
 88                         </div>
 89                         <div class="col-sm-3">
 90                             <a href="#">
 91                                 <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/9D8A213E47E8822-150x150.jpeg" alt="">
 92                                 關於指甲的10個健康知識 你知道幾個？
 93                             </a>
 94                         </div>
 95                     </div>
 96                     <div class="Nav-3">
 97                         <h3><strong>最新發布</strong></h3>
 98                         <h6><strong>奇趣事</strong><i class="lavel"></i></h6>
 99                         <span>奇了 成都一小區護衛長得像馬雲 市民紛紛求合影</span>  
100                         <i class="glyphicon glyphicon-picture text-muted"></i><i class="text-muted">4</i>
101                         <h6 style="display:block" class="text-muted">萬林論 發佈於 2015-11-30</h6>
102                         <div class="row Nav-3-2 hidden-xs">
103                             <div class="col-sm-3">
104                                 <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20151130092792289228-150x150.jpg" alt="">
105                             </div>
106                             <div class="col-sm-3">
107                                 <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/1117297020_14488423139621n-150x150.jpg" alt="">
108                             </div>
109                             <div class="col-sm-3">
110                                 <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20151130092444924492-150x150.jpg" alt="">
111                             </div>
112                             <div class="col-sm-3">
113                                 <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20151130093090989098-150x150.jpg" alt="">
114                             </div>
115                         </div>
116                     <h5 class="text-muted">2015年11月29日，四川成都，貌似馬雲的門衛柯全壽。日前，在新鴻路南一巷一小區內，一名叫柯全壽的門衛被許多小區住戶認爲其長相貌似阿里巴巴總裁 ...</h5>
117                     <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>
118                     </div>
119                 </div>
120                 <!-- 第三部分 -->
121                 <div class="Tav">
122                     <!-- 第三部分-1 -->
123                     <div class="row">
124                         <div class="col-sm-9 Tav-1">
125                                 <h6><strong>天然匯</strong><i class="lavel"></i></h6>
126                                 <span>世界真美 使人驚歎 衛星拍地球風景地貌</span>
127                                 <i class="glyphicon glyphicon-picture text-muted"></i><i class="text-muted">11</i>
128                                 <h6 style="display:block" class="text-muted">alibaixiu 發佈於 2015-11-29</h6>
129                                 <h5 class="text-muted">據英國《每日郵報》9月6日報道，近日，由人造衛星拍攝的地球上最美妙的風景地貌圖片將會在奧地利的林茨電子藝術中心展出。這些絕美的圖片由歐洲空 ...</h5>
130                                 <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>
131                         </div>
132                         <div class="col-sm-3 Tav-2">
133                             <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20150907095629885.jpg" alt="">
134                         </div>
135                     </div>
136                     <!-- 第三部分-2 -->
137                     <div class="row">
138                         <div class="col-sm-9 Tav-1">
139                                 <h6><strong>奇趣事</strong><i class="lavel"></i></h6>
140                                 <span>震驚！ 巨型蜈蚣遭毒蛇吞噬 穿肚而出玉石俱焚</span>
141                                 <i class="glyphicon glyphicon-picture text-muted"></i><i class="text-muted">3</i>
142                                 <h6 style="display:block" class="text-muted">alibaixiu 發佈於 2015-11-23</h6>
143                                 <h5 class="text-muted">獵殺與求生是動物在大天然的生存的技能，每每以一方勝利另外一方失敗了結。不過有研究人員在南歐一個島上發現玉石俱焚的大天然奇觀。一條蝰蛇與體型 ...</h5>
144                                 <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>
145                         </div>
146                         <div class="col-sm-3 Tav-2">
147                             <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/E47E03D9108E63E-150x150.jpeg" alt="">
148                         </div>
149                     </div>
150                     <!-- 第三部分-3 -->
151                     <div class="row">
152                             <div class="col-sm-9 Tav-1">
153                                     <h6><strong>生活館</strong><i class="lavel"></i></h6>
154                                     <span>關於指甲的10個健康知識 你知道幾個？</span>
155                                     <i class="glyphicon glyphicon-picture text-muted"></i><i class="text-muted">1</i>
156                                     <h6 style="display:block" class="text-muted">alibaixiu 發佈於 2015-11-23</h6>
157                                     <h5 class="text-muted">指甲是常常容易被人們忽略的身體部位，事實上從指甲的健康情況能夠看出一我的的身體健康情況，快來看看10個暗藏在指甲裏知識吧！</h5>
158                                     <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>
159                             </div>
160                             <div class="col-sm-3 Tav-2">
161                                 <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/9D8A213E47E8822-150x150.jpeg" alt="">
162                             </div>
163                     </div>
164                     <!-- 第四部分-4 -->
165                     <div class="row">
166                             <div class="col-sm-9 Tav-1">
167                                     <h6><strong>科技湖</strong><i class="lavel"></i></h6>
168                                     <span>神奇！ 可辦公可拍照的智能戒指</span>
169                                     <i class="glyphicon glyphicon-picture text-muted"></i><i class="text-muted">2</i>
170                                     <h6 style="display:block" class="text-muted">alibaixiu 發佈於 2015-11-23</h6>
171                                     <h5 class="text-muted">是否是看賭神的時候特別想擁有一個周潤發那樣的戒指？如今Neyya智能戒就跟那個有殊途同歸之妙，但Neyya智能戒不能幫你賭博，Neyya智能戒指經過藍 ...</h5>
172                                     <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>
173                             </div>
174                             <div class="col-sm-3 Tav-2">
175                                 <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/B6DEF25DD1B3EA0-150x150.jpeg" alt="">
176                             </div>
177                     </div>
178                     <!-- 第五部分 -->
179                     <div class="row">
180                         <div class="col-sm-9 Tav-1">
181                                 <h6><strong>奇趣事</strong><i class="lavel"></i></h6>
182                                 <span>竹子真的是大熊貓最愛嗎？ NO，國寶也吃肉</span>
183                                 <i class="glyphicon glyphicon-picture text-muted"></i><i class="text-muted">3</i>
184                                 <h6 style="display:block" class="text-muted">萬林論 發佈於 2015-11-19</h6>
185                                 <h5 class="text-muted">大多數人認爲熊貓最愛吃的食物就是竹子，是食草動物。卻不知，大熊貓仍是食肉動物。近日，研究者發現大熊貓的腸道菌羣不適合消化竹子更容易消化肉 ...</h5>
186                                 <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>
187                         </div>
188                         <div class="col-sm-3 Tav-2">
189                             <img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/EC8CCE0746F6E27-150x150.jpeg" alt="">
190                         </div>
191                     </div>
192                 </div>
193             </div>
194 
195             <div class="col-md-3 visible-md visible-lg">
196                 <div class="Uav">
197                     <a><img src="https://www.alibaixiu.cn/wp-content/uploads/2018/02/zgboke.jpg" alt=""></a>
198                 </div>
199                 <div class="Kav">
200                     <a href="#">
201                         <strong>熱搜</strong>
202                         <h3>歡迎加入中國博客聯盟</h3>
203                         <p class="text-muted">這裏收錄國內各個領域的優秀博客，是一個全人工編輯的開放式博客聯盟交流和展現平臺......</p>
204                     </a>
205                 </div>
206             </div>
207         </div>
208     </div>

View Code

CSS部分：（由於是響應式佈局因此CSS樣式會比較多些）

/* 修改container的最大寬度爲1280 */
@media screen and (min-width:1280px){
    .container{
        width:1280px;
    }
}
body{
    background-color:#ccc;
}
.Box{
    background-color:#fff;
}
.Noe{
    padding-left:0;
}
.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:0;
    padding:0;
}
.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:0;
}
.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:0;
    bottom: 0;
    margin-bottom: 0;
    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:0;
    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: 0;
    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:0;
    height: 0;
    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:0;
    height: 0;
    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;
    }
}