首頁 > 開發者 > JavaScript
pc端的企業網站（IT修真院test9）詳解一個響應式完成的pc端項目，企業網站test9
一：引入bootstrap架構
昨天一直被bootstrap柵格系統折磨。
why?
我本來想一邊碼字，一邊學習柵格布局的。but不成功。這時我頭腦已經昏了。
下午，我查看了bootstrap的官網，帶著我的問題：究竟怎麼使用bootstrap的架構呢？
發現問題一：我原先外部引入的bootstrap，的確可以還原樣式。但是碼字的時候特麻煩。webstrom無法提示代碼。
為此，我在bootstrap中文網上download了bootstrap-3.3.7-dist.zip，好!
在html頁面也引入三段式
<!-- 新 Bootstrap 核心 CSS 檔案 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery檔案。務必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
but,My Code是這樣的。
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet"/>
這裡犯錯誤了，因為配件還沒齊。我就這麼地瞎弄，頁面沒效果。為此又用3個鐘找出問題所在。
怎麼我一路都是排雷啊！ ~~~x_x！
找到問題後，我上https://jquery.com/download/下載了最新的jquery-3.2.1.min.js放在我建立的test9-1.html的同層目錄lib的目錄下
然後在</body>上輸入如下代碼：
<script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
，好了，配置完畢。如果你看到我這篇文章，恭喜你，不用再踩這坑了！我其實這2天都在柬埔寨地雷中。
總結 ：如果你按照我說的樣式布局，那麼會有如下結構：
1自己項目下含有bootstrap的（css,fonts,js）三個檔案。
2在每個頁面的<head></head>標籤中有如下代碼1號
3在</body>前有引入js的代碼2號
花了那麼多天，當然要問自己，要花多少時間學會使用bootstrap呢？又與原生html+css布局有什麼區別呢？
二，bootstrap的柵格系統
其實，
twitter bootstrap的 container類的優點在於它是響應式的，它會以當前螢幕的寬度為基礎計算出最佳的寬度予以使用。
響應式嘛！這是當前最流行的布局啊！而且對自己說句不好聽的，你以為這班大茄會比你笨，和比你無聊的讓你學嗎?
立馬清醒了。
container類等價於建立了一個具有靜態寬度並且magin值為auto的一個置中的div盒子
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
而row類就是margin水平方向負15px；
當時我直接照搬container》row》cod-lg-4這樣的結構布局呢！所以在排版定位上跟我原先的思路脫軌了！
所以在中午的時候我帶著“如何消除左右邊的空白”在IT散修群上發問的時候，有一位師兄讓我搞個-15px；現在大概明白了！。
整個下來，柵格系統的理論就是：
最外層的container含有left，right的15px padding
順位row含有left，right的-15px margin
順位col-lg-12含有left，right的15px padding
這個結構，我想問：大神你確定不是中國墨家的繼承人？
還有一些傻逼的事情發生，我本來知道有.container-fluid 則是一個全寬的容器，使用整個寬度的事情。但是偏偏大半天在使用.container，然後調節水平的內外邊距。( ▼-▼ )被自己蠢哭。
經過今早的創作！，我瞭解到一般網上不提倡container內嵌套container，但是可以出現這種結構
1/container>row>直接是我們平時布局的代碼
2/container>row>col-lg-12
3/container-fluid>container>row>col-lg-12
不知道觀眾有沒有想我這種蠢哭的人，一開始還以為只能按照container>row>col-lg-12的結構布局，才算是柵格系統。8_8~憂傷啊！
回到我原先的提問，究竟與原生html+css布局的差別
讓我們拿個執行個體說話
放上我的test8-1.html和test9-1.html的footer設定講解一下
整體結構如上：左邊是原生html+css，右邊是柵格系統
先說最下面的f-row-2的設定吧！
原生h+c中，最底部著作權資訊的架構是
f-row-2>pct80 tr>內容
在這，我需要給個base樣式pct80{with:80%}來完成我的寬度分離原則。內容款只有80%寬，應該還要加入一個auto類，來讓我這div置中顯示。
而柵格系統，它的架構是這樣的
container-fluid>f-row-2 row>col-lg-12 col-md-12 col-xs-12>tr>內容
我還是通過f-row-2來確定內容顯示的空間高度，不過寬度是由柵格系統row和col-lg-12這種搭配來設定的。
而樣式，一點也沒改。
看完上面的例子，如果還沒弄明白，沒關係，還有下面栗子。
左邊我是通過一個父盒子<div class="pct80 auto df-jcsb">來包含三個子盒子（f-cess-1,f-cess-2,f-cess-3）的。
通過父盒子css樣式df-jcsb左右對齊，不換行來實現一行三個盒子自適應的（flex知識）
右邊我是通過
<div class="container">
<div id="f-row-1" class="row">
<div class="col-lg-4 col-md-4 col-xs-12">
放置每一個f-cess-1,f-cess-2的，f-cess-3我後來也應布局，使用position定位來實現。
還有就是：左邊我要為每個子盒子設定寬度和外邊距。右邊我是直接通過col-lg-4來操縱的。
可能我說的不是很清晰吧！大家可以上我的github，download項目test9和test8來做對比。
附上地址：https://github.com/hewasdrunk/
總結一下我要說明的地方：就是原生html+css的布局中是自由的設定div結構和寬度來實現我們要的布局。而柵格系統就是自己有一套方法，讓我們通過改變col-lg-12的這種形式來實現寬度。行就通過row來實現。
——菜鳥：幾裡路
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
