Bootstrap筆記2

柵格系統
Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲最多12列。它包含了易於使用的預定義類，還有強大的mixin用於生成更具語義的佈局。

簡介：
柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面佈局，你的內容就可以放入這些創建好的佈局中。

工作原理：
（1）“行（row）”必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
（2）通過“行（row）”在水平方向創建一組“列（column）”。
（3）你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作爲“行（row）”的直接子元素。
（4）類似.row和.col-xs-4這種預定義的類，可以用來快速創建柵格佈局。Bootstrap源碼中定義的mixin也可以用來創建語義化的佈局。
（5）通過爲“列（column）”設置padding屬性，從而創建列與列之間的間隔（gutter）。通過.row元素設置負值margin從而抵消掉爲.container元素設置的padding，也就間接爲“行（row）”所包含的“列（column）”抵消掉padding。
（6）負值的margin就是下面的示例爲什麼是向外突出的原因。在柵格列中的內容排成一行。
（7）柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個.col-xs-4來創建。
（8）如果一“行（row）”中包含了的“列（column）”大於12，多餘的“列（column）”所在的元素將被作爲一個整體另起一行排列。

搭建Bootstrap頁面骨架及項目目錄結構
|–/project/………………………………項目所在目錄
|___/css/………………………………我們自己的css文件
|–/font/………………………………使用到的字體文件
|–/img/………………………………使用到的圖片文件
|–/js/…………………………………自己寫的js腳本
|–/lib/…………………………………從第三方下載回來的庫【只用不改】
|–/favicon.ico………………………站點圖標
|–/index.html………………………入口文件

HTML約定
在head中引入必要的CSS文件，優先引用第三方CSS，方便自己的樣式覆蓋
在body末尾引入必要的JS文件，優先引用第三方的JS，注意JS文件之間的依賴關係，比如bootstrap.js依賴jQuery，那就應該先引用jQuery.js然後引用bootstrap.js

CSS約定
除了公共級別樣式，其餘樣式全部由模塊前綴
儘量使用直接子代選擇器，少用簡接子代，避免錯殺

瀏覽器兼容模式

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

html中插入兼容模式設置，可以通過emmet meta: compat插入

favicon（站點圖標）

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

html中插入圖標鏈接，可以通過emmet link: favicon插入

引入相應的第三方文件

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="my.css">
...
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="my.js"></script>

在默認樣式表中將默認字體設置爲

        body{
            font-family: "Helvetica Neue", 
                        Helvetica,
                        Microsoft Yahei,
                        Hiragino Sans GB,
                        WenQuanYi Micro Hei,
                        sans-serif;
            
        }

構建頂部通欄

<header>
	<div class="topbar"></div>
</header>

container類
用於定義一個固定寬度且居中的版心

<div class="topbar">
	<div class="container">
		<!--
			此處代碼會顯示在一個固定寬度且居中的容器中
			該容器的寬度會隨屏幕的變化而變化
		-->
	</div>
<div>

小屏幕隱藏

<div class="topbar hidden-xs hidden-sm"></div>

或者

<div class="topbar visible-md visible-lg"></div>

hidden-xx: 在某種屏幕下隱藏
visible-xx: 在某種屏幕尺寸下顯示
+visible-xx-xx: 最後一個xx是決定顯示時的display到底是啥