首先在搜尋打Bootstrap就可到官網,然後選Getting started

B1  

往下拉可以看到Download,選擇Source code下載rar檔

B2  

我們要載入Bootstrap的檔案放置在dist資料夾下,有css,fonts和js

B3

然後我創個boot資料夾把剛剛看到三個資料夾放置裡面

B4    

接著新增網頁,引用bootstrap的css和js範例 

<link href="css/bootstrap.css" rel="stylesheet">

<script src ="js/bootstrap.js"></script>

然後我大概建個簡單版

simple

.container : 內容區塊

以下為簡單版程式碼: 

<!doctype html>       <<html 5文件
<html>
<head>
<meta charset="utf-8">     <<網頁支援utf-8
<title>bootstrap設計</title>       <<網頁標題
<link href="css/bootstrap.css" rel="stylesheet">     <<套用bootstrap 其中一個css
<script src ="js/bootstrap.js"></script>              <<套用bootstrap 其中一個js
</head>
<body>
<div style="background-color:#099">Bootstrap設計實作</div>
<div class="container" style="background-color:#0FC">
      Bootstrap是能讓我們更快速製作網頁的框架,在下載框架後會發現dist資料夾,裡面有css、fonts、js共三個資料夾,能讓我們引用Bootstrap寫好的檔案
      以下為引用範例
      link href="css/bootstrap.css" rel="stylesheet"
      script src ="js/bootstrap.js" /script
      當我們載入後但不知怎麼讓內容區塊置中,可用class的container
      div class="container"
         ...
       /div
      如果想讓內容隨著視窗大小變動,可用class的container-fluid
      div class=" container-fluid" >
         ...
      /div
</div>
<div style="background-color:#0F9">
請注意上方
</div>
</body>
</html>

說真的我不喜歡呆呆地用,而不知道他背後作啥,如果想讓css進步就該看他css寫什麼

cont

內容是左右各留白(padding)15px,然後使用margin左右開自動(auto)讓他浮動置中

突然發現下方container-fluid也跟上方container一樣,真不懂為何要重複寫兩次@@

 

Bootstrap最大特色是欄!

大部分網頁通常是1n,Bootstrap12n

會使用12這個數字是因為可以分成6 64 4 4,讓人看起來舒服的介面 

針對不同裝置,以下為設定值表格 

 

Grid Size

Grid Class

Offset Class

Screen Size

手機

Extra Small

col-xs-*

col-xs-offset-*

0px+

平板

Small

col-sm-*

col-sm-offset-*

768px+

筆電

Medium

col-md-*

col-md-offset-*

992px+

桌電

Large

col-lg-*

col-lg-offset-*

1200px+

.row:

.col-xx-* : xx為哪種款式螢幕,*1~12

.col-xx-offset-* : xx為哪種款式螢幕,*0~12,padding-left幾個欄位 

接著我把簡單版增加這些class

<body>
<div style="background-color:#099">Bootstrap設計實作</div>
<div class="container" style="background-color:#0FC">
    <div class="row">
         <div class="col-lg-12">
                 Bootstrap是能讓我們更快速製作網頁的框架,在下載框架後會發現dist資料夾,裡面有css、fonts、js共三個資料夾,能讓我們引用Bootstrap寫好的檔案
         </div>
    </div>
   <div class="row">
         <div class="col-lg-6" style="float:left">
           當我們載入後但不知怎麼讓內容區塊置中,可用class的container <br/>
           div class="container" <br/>
                 ... <br/>
           /div
         </div>
         <div class="col-lg-6" style="float:right">
           如果想讓內容隨著視窗大小變動,可用class的container-fluid <br/>
           div class=" container-fluid" > <br/>
                 ... <br/>
           /div
         </div>
   </div>
</div>
<div style="background-color:#0F9">
請注意上方
</div>
</body>

展示

B5

再來我們去逛逛css

row   

沒想到row只是把margin左右往內縮15px,接著他設定col開頭都往左靠

 

頭身尾都有只差指揮,於是我把導覽列增加上去

.navbar:導覽列 

.navbar-nav:清單列不顯示前點.不要換行 

<body>
<div class="navbar" style="background-color:#0FA; margin-bottom:0px; min-height:30px;">
    <ul class="navbar-nav" style="float:right;">
        <li class="nav"><a href="#">A</a></li>
        <li class="nav"><a href="#">B</a></li>
        <li class="nav"><a href="#">C</a></li>
    </ul>
</div>
<div style="background-color:#099;">Bootstrap設計實作</div>
<div class="container" style="background-color:#0FC">
    <div class="row">
          <div class="col-lg-12">
            Bootstrap是能讓我們更快速製作網頁的框架,在下載框架後會發現dist資料夾,裡面有css、fonts、js共三個資料夾,能讓我們引用Bootstrap寫好的檔案
          </div>
    </div>
    <div class="row">
          <div class="col-lg-6" style="float:left">
             當我們載入後但不知怎麼讓內容區塊置中,可用class的container <br/>
              div class="container" <br/>
                 ... <br/>
              /div
          </div>
          <div class="col-lg-6" style="float:right">
           如果想讓內容隨著視窗大小變動,可用class的container-fluid <br/>
             div class=" container-fluid" > <br/>
                ... <br/>
             /div
          </div>
    </div>
</div>
<div style="background-color:#0F9">
請注意上方
</div>
</body>

展示

navbar

再來又去逛css

navbarcss

雖然說要補強很多地方,不過個人還是喜歡一手打造全部,所以其餘bootstrap class或是js就請各位自行研究

創作者介紹
創作者 o迷苓o 的頭像
o迷苓o

~米漿牛奶~

o迷苓o 發表在 痞客邦 留言(0) 人氣()