整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
介紹
前面我們以及學會了Bootstrap框架和jQuery庫的基本使用方法，并且已經把這兩個軟件包整合到了我們的TFPHP框架里面，接下來我們就可以使用它們去制作用戶管理系統的視圖模板了。
用戶管理系統包含幾個主頁模板：
1）用戶信息表
2）用戶登錄頁面
3）用戶注冊頁面
4）個人資料修改
5）登錄密碼重置
6）用戶頭像上傳
7）安全問題設置
8）綁定郵箱設置
9）忘記密碼頁面
頁面比較多，我們一點點地設計。萬事開頭難，福哥今天下帶著大家完成先完成第一個表單頁面——用戶登錄頁面。
HTML
登錄頁面的html部分包括一個頁頭和一個表單。
<div class="wrapper">
<div class="wrapper-header">
<!-- top bar begin -->
<div class="row topbar">
<div class="navbar navbar-text">
TFUMS v1.0 - TONGFU.net
</div>
<ul class="nav ml-md-auto">
<li class="nav-item"><a href="" class="nav-link">首頁</a></li>
<li class="nav-item"><a href="" class="nav-link">登錄</a></li>
<li class="nav-item"><a href="" class="nav-link">注冊</a></li>
</ul>
</div>
<!-- top bar end -->
</div>
<div class="wrapper-content">
<!-- login form begin -->
<div class="row login-form">
<div class="col-sm-12">
<h3 class="text-center">登錄</h3>
<p>請輸入正確的用戶名和密碼登錄用戶管理系統</p>
<form>
<div class="form-group">
<label>用戶名</label>
<input class="form-control" type="text" name="user" />
</div>
<div class="form-group">
<label>密碼</label>
<input class="form-control" type="password" name="pass" />
</div>
<div class="form-group overflow-hidden">
<label class="float-left">
<input type="checkbox" name="remember" value="Y" />
保存登錄狀態
</label>
<a href="" class="float-right">忘記密碼</a>
</div>
<div class="form-group">
<button class="btn btn-primary btn-sm form-control">登錄</button>
</div>
</form>
</div>
</div>
<!-- login form end -->
</div>
<div class="wrapper-footer">
</div>
</div>CSS
用戶登錄頁面的CSS也是一個top bar和一個login form兩個部分。
/**
* top bar
*/
.topbar{
padding: 0 12px;
margin-bottom: 12px;
border-bottom: 1px solid #eee;
}
.topbar a{
color: #333;
}
.topbar a:hover{
color: #007bff;
}
/**
* login form
*/
.login-form{
margin: 0 auto;
width: 350px;
}用戶登錄頁面
首先，因為這是TFUMS系統的第一個模板，所以福哥先設計了頁頭的樣式。這個頁頭也會作為其他頁面的共用的頁頭。頁頭使用了bs的nav樣式組的樣式，簡化了自己寫CSS的工作。
其次，表單部分使用了bs的form-group樣式作為每一行表單項的容器樣式，加上label和form-control簡簡單單就把一個漂亮的表單做出來了。
還有福哥使用浮動加清除實現了“保存登錄狀態”和“忘記密碼”的左右布局設計。
最后，福哥給button增加了form-control樣式，使按鈕撐滿了整個容器，看起來比較工整了。
今天我們完成了第一個表單頁面的模板，包括：HTML和CSS部分。有了這個基礎之后，再去制作其他表單頁面就容易多了。
下一課我們將嘗試完成用戶注冊頁面、忘記密碼頁面、登錄密碼重置三個頁面的模板的制作。
https://m.tongfu.net/home/35/blog/512901.html
起之前工作面試時，面試官問的一個問題：行內元素有哪些，和塊級元素有什么區別？這是一道蠻基礎的面試題，但是很多初學者平時只注重標簽語義，忽視了標簽行內和塊級的特性， 因此對于上述問題很有可能答不上來或者答不全。
HTML常見的行內元素有：
<span>、<a>、 <img>、 <input>、<textarea>、<select>、<label>
還有包括一些文本元素如：<br> 、<b>、 <strong>、<sup> 、<sub>、 <i> 、<em> 、<del> 、 <u>等。
要是只回答<span>和<img>那就說不過去了吧。
HTML常見的塊級元素有：
<div>、<table>、<form>、<p>、<ul>、
<h1>......<h6>、<hr> 、<pre>、<address>、<center>、<marquee> 、<blockquote> 等。
要是只回答<div>那就說不過去了吧。
那它們之間的區別是什么呢？
·塊級元素
1.總是從新的一行開始，即各個塊級元素獨占一行，默認垂直向下排列；
2.高度、寬度、margin及padding都是可控的，設置有效，有邊距效果；
3.寬度沒有設置時，默認為100%；
4.塊級元素中可以包含塊級元素和行內元素。
·行內元素
1.和其他元素都在一行，即行內元素和其他行內元素都會在一條水平線上排列；
2.高度、寬度是不可控的，設置無效，由內容決定。
設置margin左右有效，有邊距效果；
設置margin上下會撐大空間但是不會產生邊距效果（即盒模型margin-top/bottom有值，但頁面上沒有邊距效果）。
設置padding左右有效，設置padding上下會撐大空間但是不會產生邊距效果（同上）。
padding效果如下展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
span{
border:1px solid red;
padding:10px;
}
div{
border:1px solid blue;
}
</style>
<body>
<div>塊級元素</div>
<span> 行內元素</span>
<span> 行內元素</span>
<div>塊級元素</div>
</body>
</html>3.根據標簽語義化的理念，行內元素最好只包含行內元素，不包含塊級元素。
轉換
當然塊級元素與行內元素之間的特性是可以相互轉換的。HTML可以將元素分為行內元素、塊狀元素和行內塊狀元素三種。
使用display屬性能夠將三者任意轉換：
(1)display:inline;轉換為行內元素；
(2)display:block;轉換為塊狀元素；
(3)display:inline-block;轉換為行內塊狀元素。
行內塊狀元素綜合了行內元素和塊狀元素的特性：
(1)不自動換行，與其他行內元素都會在一條水平線上排列；
(2)高度、寬度、margin及padding都是可控的，設置有效，有邊距效果；
(3)默認排列方式為從左到右。
． HTML
1. img標記屬于什么類型元素？
答案：屬于行內(inline)元素.
2.結構標記有哪些？他們與div有什么相同之處，又有什么不同之處？
答案：header，nav，section，aside，footer，article
都是用來做布局的，但結構標記提高了語義性和可讀性.
3. 行內元素，塊元素，空元素有哪些？
答案：
（1）行內元素：
a， span，i，img，b ,s,u，sup,sub,label
（2）塊元素：
div ，dl，dt，dd，ul，li，ol，p，h1，h2，h3，h4，h5，結構標記
（3）空元素：
br-換行，hr-水平分割線
4. 什么是前端？
答案：
用HTML/CSS/JavaScript以及更多的框架技術，編寫網站頁面、App應用、小程序、2D&3D游戲、Web VR&AR等應用，通過內容設計、交互動畫、數據操作構建項目與用戶的交互界面。前端工程師在項目中可以與UI設計師和后臺程序員合作，實現設計意圖并調用后臺接口，也可以獨立工作完成強用戶交互的各類應用。
5. HTML、CSS、JavaScript的作用是什么，為什么會產生這三種語言？
答案：這三種語言都是用來編寫網頁的，HTML用于搭建網頁結構展示內容，CSS用于修飾HTML元素，JavaScript用于添加網頁的交互驗證。
6. 說說HTML5，CSS3的新特性，平時使用過哪些？
答案：
H5新特性：
結構標記（header，footer，section，article，aside，nav），新表單元素（url，email，number，date，month，color等），canvas，audio，video，地理定位，拖放，web存儲，Web Workers，WebSocket等。
CSS3新特性：
復雜選擇器器（屬性選擇器，偽類選擇器，偽元素選擇器，兄弟選擇器等），邊框倒角，邊框陰影，漸變，轉換，過渡，動畫，彈性盒子，媒體查詢技術等。
7、Doctype 作用? 嚴格模式與混雜模式如何區分？它們有何意義?
（1）、 聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器的解析器，用什么文檔類型 規范來解析這個文檔。
（2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。
（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）、DOCTYPE 不存在或格式不正確會導致文檔以混雜模式呈現。
8、對語義化如何理解？
答案：用正確的標簽做正確的事情！
HTML 語義化就是讓頁面的內容結構化，便于對瀏覽器、搜索引擎解析；在沒有樣式 CCS 情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于 SEO。使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。
9、iframe 有那些缺點？
iframe 會阻塞主頁面的 Onload 事件；
iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用 iframe 之前需要考慮這兩個缺點。如果需要使用 iframe，最好是通過 javascript 動態給 iframe 添加 src 屬性值，這樣可以可以繞開以上兩個問題。
10.對 WEB 標準以及 W3C 的理解與認識？
答案：
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈 css 和 js 腳本、結構與行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性.
11.XHTML 和 HTML 有什么區別？
答案：
HTML 是一種基本的 WEB 網頁設計語言，XHTML 是一個基于 XML 的置標語言最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
12.img 標簽上 title 與 alt 屬性的區別是什么?
答案：alt ,當圖片不顯示時，在圖片位置所顯示的文字。
title,鼠標移入到元素上時，為該元素添加提示信息。
13.你如何對網站的文件和資源進行優化?
答案：解決方案包括：
文件合并
文件最小化/文件壓縮
使用 CDN 托管
緩存的使用.
二． CSS3
1.隱藏網頁中的元素有幾種方式？這些方法有什么區別？
答案：三種方法，
display:none; 脫離文檔流，不占頁面空間,會改變頁面布局。
visivility:hidden ；不會脫離文檔流，不會改變頁面布局，仍占頁面空間
opacity:0，該元素隱藏起來了，但不會改變頁面布局，并且，如果該元素已經綁定一些事件，如click事件，那么點擊該區域，也能觸發點擊事件
2.如何解決子元素的上外邊距溢出？
答案：在父元素的第一個子元素位置處添加一個空的table標記.
3.常用來設置透明度的方式有幾種？他們之間有何區別？
答案：opacity或rgba
opacity能設置與元素相關各種顏色的透明度
rgba()只能設置當前某一種顏色的透明度
4.浮動會對父元素的高度帶來什么影響？如何解決這個問題？
答案：子元素一旦浮動，父元素的高度為0，在父元素最后一個子元素位置處添加一個空的塊級元素，并設置其clear屬性值為both.
.clear:after{
display:block;
content:””;
clear:both;
}
5.哪些元素默認有外邊距？
答案：body，p，h1-h6，ul，ol，dl，pre
6.網頁中如何定義錨點？如何連接到錨點位置？
答案：a標記用name定義錨點，其他標記用id屬性定義錨點，
連接到錨點的位置：href="#錨點名稱"
7.框模型默認的計算方式是什么？要改變默認的計算方式用哪個屬性及值？
答案：
實際占地寬度=左右外邊距+左右邊框+左右內邊距+width
實際占地高度=上下外邊距+上下邊框+上下內邊距+height
改變計算方式 box-sizing:border-box
8.實現時針轉動效果需要用到CSS中哪些關鍵技術？
答案：旋轉，動畫，絕對定位
9.設置行內元素居中對齊用什么屬性？
答案：text-align：center
10.如果要將表單中控件的值提交給服務器必須為控件設置什么屬性？
答案：name和value屬性
11.transition和animation的區別？
答案：
Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們的主要區別是transition需要觸發一個事件才能改變屬性，
而animation不需要觸發任何事件的情況下也會隨時間改變屬性值，并且transition為2幀，從from .... to，而animation可以一幀一幀的，也可以理解為一個animation是由多個transition組成。
12. 如何實現水平垂直居中？
答案：
1、定位+外邊距 盒子寬高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度;
2、定位+transform 盒子高寬已知，
#container{ position:relative; border:1px solid red; width:800px; height:600px; }
#center{ width:100px; height:100px; background:blue; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
3、flex 布局
父級：
display: flex;
align-items: center;
justify-content: center;
13. 盒子模型你是怎么理解的？
答案：
元素框處理元素內容，內邊距外邊距以及邊框的計算方式。
盒子模型有兩種，W3C和IE盒子模型
（1）w3c的盒模型width=content，不包括margin，padding,border
（2）IE盒模型width=content+padding+border
（3）box-sizng border-box在已設定的寬度和高度之內去設定padding和border
content-box在已設定的高度和寬度之外設置padding和border
14. src和href的區別？
答案：
（1）href：
href是Hypertext Reference的縮寫，表示超文本引用。用來建立當前元素和文檔之間的鏈接。
并行下載該文檔，不會停止對當前文檔的處理
（2）src：
src是source的縮寫，src指向的內容會嵌入到文檔當前標簽所在位置
如img、script、iframe當瀏覽器解析到該元素時，會暫停瀏覽器的渲染，直到該資源加載完畢。
15. 說出link和import的區別？
答案：
（1）使用方法不同：
link一般在html頭部定義，作為html標簽，鏈接資源，主要用于鏈接外部的樣式表
import一般定義在css內部，并且一定要在其他所有規則之前，也就是一般寫在文件頭部，并且專門拿來鏈css的。
（2）加載順序差別
import比link延遲一些，它會等到頁面下載完后才加載，因而可能會產生閃爍
16. 改變頁面元素位置的定位方式及他們的區別？
答案：
relative 相對定位 相對于自身原來位置進行偏移，仍處于標準文檔流中；
absolute 絕對定位 相對于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素為參考標準。如果無已定位祖先元素, 以body元素為偏移參照， 完全脫離文檔流；
fixed 固定定位的元素會相對于視窗來定位,這意味著即便頁面滾動，它還是會停留在固定的位置。固定定位也會脫離文檔流。
17. display有哪些值，說明他們的作用？
答案：
display的取值可以是none/inline/block/inline-block/table
none:元素隱藏不可見，并且元素也不占頁面空間。
Inline:元素將呈現行內元素的特點，多個元素在一行中顯示，不允許修改尺寸，也不能設置垂直外邊距。
block:元素將呈現塊級元素的特點，每個元素獨占一行，允許修改尺寸。
inline-block:元素將呈現行內塊元素的特點，多個元素在一行中顯示，但是可以修改尺寸。
table:元素將呈現表格的特點，由內容決定表格的顯示方式。元素獨占一行，允許修改尺寸。
18. 有兩個div，外框和內框高度寬度都不定，內框垂直水平居中，利用css如何實現？
答案：.center{
display:flex;
justify-content:center;
align-items:center;
}
19. 說說em和rem的區別
答案：rem是基于html元素的字體大小來決定，而em則根據使用它的元素的字體大小決定（很多人錯誤以為是根據父類元素，實際上是元素繼承了父類的屬性才會產生的錯覺）
20、瀏覽器的內核分別是什么?
答案：IE 瀏覽器的內核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、 Opera 內核原為 Presto，現為 Blink；
21、為什么要初始化 CSS 樣式？
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異。當然，初始化樣式會對 SEO 有一定的影響，但力求影響最小的情況下初始化。最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）淘寶的樣式初始化： body, h1, h2, h3, h4, h5, h6, hr, p,, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
ul, ol{ list-style:none;}
a{text-decoration:none; }
a:hover {text-decoration:underline; }
img{ border:0;}
button,input, select,textarea{ font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
22、CSS哪些屬性可以繼承？優先級算法如何計算？ CSS3 新增偽類有那些？
答案：
可繼承的樣式： font-size ,font-family ,color, background等;
不可繼承的樣式：border, padding ,margin ,width ,height ;
優先級就近原則，同權重情況下以最近者為準;
優先級為: !important > id > class > tag
important 比 內聯優先級高
CSS3 新增偽類：
:first-child 選擇屬于其父元素的首個元素。
:last-child 選擇屬于其父元素的最后一個元素。
:only-child 選擇屬于其父元素唯一的元素。
:nth-child(n) 選擇屬于其父元素的任意一個子元素。
:empty 選擇沒有子元素的元素。
:not(selector) 將滿足指定選擇器的元素給排除在外。
23.描述 css reset 的作用。
答案：reset 重置瀏覽器為元素設置的默認樣式，瀏覽器的種類不同，樣式可能不同，重置是為了讓他們統一樣式。
24.清除浮動帶來影響的幾種方式，各自的優缺點
答案：
1、直接設置父元素高度，但不是每次都知道父元素的高度。
2、設置父元素也浮動，但不是任何時候父元素都需要浮動，而且浮動會影響后續元素。
3、為父元素設置 overflow屬性，但如果有內容需要溢出顯示的話，也會一同被隱藏。
4、在父元素中，追加空子元素，并設置其clear:both,但頁面中會多出一個空元素。
5、用內容生成的方式:after{content:””;display:block;clear:both;}
25.px 和 em 的區別
px 和 em 都是長度單位，區別是，px 的值是固定的，指定是多少就是多少，計算比較容易。em 得值不是固定的，并且 em 會繼承父級元素的字體大小。
瀏覽器的默認字體高都是 16px。所以未經調整的瀏覽器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em
三． AJAX
1.用post方式異步向服務器端提交數據時，需要在發送請求前設置什么？提交的數據放在什么位置？
答案：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
數據放在send（）括號中
2.什么是異步數據加載？
答案：瀏覽器在向服務器發送請求的時候，不耽誤用戶在網頁上做其它操作，可以同時開啟多個任務，并且可以以無刷新的效果來更改頁面中的局部內容。
3.異步請求數據的步驟分為哪幾步？
答案：創建異步對象，綁定監聽事件，創建異步請求，發送異步請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var resText = xhr.responseText;
}
}
xhr.open(method,url,true);
xhr.send(body);
4.異步請求中滿足什么條件時才能取出響應的結果數據？
答案：請求狀態碼為4，響應狀態碼為200時
5.如何理解JSON？
答案：
JSON是JS對象的一種表現方式，即以js對象的數據格式表現出來的字符串，JSON中的兩個api如下：
將JSON字符串轉換成JSON對象 JSON.parse()
將JSON對象轉換成JSON字符串 JSON.stringify()
6. http和https的區別？
答案：
http傳輸的數據都是未加密的，也就是明文的
https協議是由http和ssl協議構建的可進行加密傳輸和身份認證的網絡協議，比http協議的安全性更高。
兩者使用不同的鏈接方式，端口也不同，一般而言，http協議的端口為80，https的端口為443
7.列舉幾種常見的3和4開頭的狀態碼以及他們的意義？
答案：
301 ：永久性重定向
302 ：臨時重定向
304 ：請求資源未被修改，命中緩存
400 (錯誤請求) 服務器不理解請求的語法。
403 (禁止) 服務器拒絕請求。
404 (未找到) 服務器找不到請求的網頁。
8. 什么是ajax？有哪些優缺點？
答案：AJAX是“Asynchronous JavaScript and XML”的縮寫。他是指一種創建交互式網頁應用的網頁開發技術。
優點：
1.局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗。
2.減輕服務器的壓力,按需取數據,最大程度的減少冗余數據請求。
3.基于xml標準化,并被廣泛支持,不需安裝插件。
4.促進頁面和數據的分離。
缺點：
1.AJAX破壞了瀏覽器的Back和History功能
2.AJAX安全問題
3.對搜索引擎支持較弱
4.破壞程序的異常處理機制
5.AJAX不是很好支持移動設備
四． Bootstrap
1.用bootstrap中的柵格做網頁布局的基本結構是什么？默認將一行分為多少列？
答案：容器中設置行，行內設置列
默認將一行分為12個單元格（列）
2.如何編寫響應式網頁？
答案：
(1)聲明viewport元標簽
(2)所有容器/文字/圖片 使用相對尺寸
(3)流式布局+彈性布局
(4)使用CSS3 Media Query技術
3.同時監聽多個scss文件的命令是什么？
答案：node-sass -w scss文件夾 –o css文件夾
4.在scss中如何定義混合器以及引用？
答案：
@mixin 混合器名稱{ 樣式聲明 }
通過@include來使用混合器。
5.對于各類尺寸的設備，Bootstrap設置的class前綴分別是什么？
答案
超小設備手機（<768px）：.col-xs-
小型設備平板電腦（>=768px）：.col-sm-
中型設備臺式電腦（>=992px）：.col-md-
大型設備臺式電腦（>=1200px）：.col-lg-
6.Bootstrap如何設置響應式表格？
增加class="table-responsive"
7、使用Bootstrap激活或禁用按鈕要如何操作？
激活按鈕：給按鈕增加.active的class
禁用按鈕：給按鈕增加disabled="disabled"的屬性
8、Bootstrap有哪些關于<img>的class？
（1）.img-rounded 為圖片添加圓角
（2）.img-circle 將圖片變為圓形
（3）.img-thumbnail 縮略圖功能
（4）.img-responsive 圖片響應式 (將很好地擴展到父元素)
9、Bootstrap中有關元素浮動及清除浮動的class？
class="clearfix" 清除浮動
10、Bootstrap如何制作下拉菜單？
（1）將下拉菜單包裹在class="dropdown"的<div>中；
（2）在觸發下拉菜單的按鈕中添加：class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"
（3）在包裹下拉菜單的ul中添加：class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"
（4）在下拉菜單的列表項中添加：role="presentation"。其中，下拉菜單的標題要添加class="dropdown-header"，選項部分要添加tabindex="-1"。
11、Bootstrap如何制作按鈕組？
用class="btn-group"的<div>去包裹按鈕組；class="btn-group-vertical"可設置垂直按鈕組。
12、Bootstrap中的導航都有哪些？
（1）導航元素：有class="nav nav-tabs"的標簽頁導航，還有class="nav nav-pills"的膠囊式標簽頁導航；
（2）導航欄：class="navbar navbar-default" role="navigation"；
（3）面包屑導航：class="breadcrumb"
13、Bootstrap中設置分頁的class？
默認的分頁：class="pagination"
14、Bootstrap中如何制作徽章？
<span class="badge">26</span>
15、Bootstrap中超大屏幕的作用是什么？
設置class="jumbotron"可以制作超大屏幕，該組件可以增加標題的大小并增加更多的外邊距。
16、Bootstrap 網格系統列與列之間的間隙寬度是多少？
間隙寬度為30px（一個列的每邊分別是15px）。
17、用Bootstrap，如何設置文字的對齊方式？
class="text-center" 設置居中文本
class="text-right" 設置向右對齊文本
class="text-left" 設置向左對齊文本.
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
