iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 12
0
Modern Web

無所不能的前+後端技術應用,一個小菜鳥的經驗談( ・`ω・´)系列 第 12

[day12]-好的網站和好的建築一樣,先打造好地基!-格線系統(Grid System)篇

  • 分享至 

  • xImage
  •  

不得不說這個鐵人賽真的和小編說的一樣,連續寫30天真得很辛苦啊~

推著自己在「不蘇湖」、「有點痛苦」、「咬牙硬撐」的情況下,才能蛻變成長←(認同認同!!)

好~那第12天了!要開始打造我們的個人網站了~

首先使用day6的程式碼去做編輯,目標是先寫好我們的電腦版網頁,在撰寫html時我會搭配昨天介紹的Chrome extension之Bootstrap Grid擴充工具來看物件對齊的變化

頁面大致規劃一下架構為

http://ithelp.ithome.com.tw/upload/images/20161213/20103130KtvfGqVhLL.png

我們一直提到的格線系統到底有什麼作用呢?

小妹我簡單打了一個範例文,可以讓大家了解到格線系統的運作方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>King-Tzeng Ying Chi</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
    html {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    #body {
        width: 100%;
        height: 100vh;
        border: 5px solid red;
        position: relative;
        top: 0;
        left: 0;
    }
    
    .container {
        /* height: 100%; */
        border: 1px solid blue;
    }
    
    .row {
        /*       height: 100%; */
        border: 1px solid green;
    }
    
    .wrapper {
        border: 2px solid #d4dcd6;
    }
    
    img {
        width: 100%;
        height: auto;
    }
    </style>
</head>

<body>
    <div id="body">
        <div class="container">
            <div class="row">
                <!-- <div class="wrapper"> -->
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                   <img src="https://api.fnkr.net/testimg/200x200/00CED1/FFF/?text=img+placeholder">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <img src="https://api.fnkr.net/testimg/200x200/00CED1/FFF/?text=img+placeholder">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <img src="https://api.fnkr.net/testimg/200x200/00CED1/FFF/?text=img+placeholder">
                </div>
                <!-- </div> -->
            </div>
        </div>
        <div class="container">
            <div class="row">
                <!-- <div class="wrapper"> -->
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <img src="img/mypic_desktop.png">
                </div>
                <!-- </div> -->
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>

DEMO影片在此

Yes

簡單的說,格線系統是一個寫好的CSS框架,我們只要去遵循好他的規則,便可輕鬆製作RWD的網頁佈局

此外格線系統是跨設備運作的,格線總共分為四種設備設定,分別為:

Extra small devices Phones (<768px)   → 手機設備
Small devices Tablets (≥768px)	 	→ 平板設備
Medium devices Desktops (≥992px)	→ 電腦版
Large devices Desktops (≥1200px)	→ 電腦版桌面(大型)

而如何設定我要的設備格線數為多少呢?

stylesheet上有寫到-

四種devices的前綴字

手機設備xs
平板設備sm
電腦版md
電腦版桌面(大型)lg

我做了一張圖 理解如何解析前綴字

http://ithelp.ithome.com.tw/upload/images/20161214/20103130faybQQ5kLA.png

所以得到了,如果你要在手機版做RWD的圖片且佔4格的話

前綴字寫法是

    .col-xs-4

而在網頁上完整的語法是

<div class="col-lg-4">
  <img src="test/test.jpg" />
</div>

以上範例以此類推.....

但有一點要注意的是,格線系統欄位只有12格,當你大出欄位數後,他就會往下掉,這點要多注意!

例如

<div class="container">
    <div class="row">
        <!-- <div class="wrapper"> -->
        <div id="A" class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            A
        </div>
        <div id="B" class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            B
        </div>
        <div id="C" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            C
        </div>
    </div>
</div>

上面id="c"的內容會往下掉,原因是
A佔4加上 B佔4加上 C佔6欄 總共佔14> 格線系統總欄數為12欄的限制!

~~ 這個範例我就不錄影了~ ~~

以上,格線系統大致上講解到此結束!


文後-

(趴......Orz)


同步連載於blogger-"King 學習前端之人生"
[ 著作權為 Ying-chi Tzeng所有,轉載請告知~]


上一篇
[day11]開發前!先來推薦好用的chrome extension好了~
下一篇
[day13]-好的網站和好的建築一樣,先打造好地基!頁面寬高的單位(vh、vw、%)篇
系列文
無所不能的前+後端技術應用,一個小菜鳥的經驗談( ・`ω・´)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言