欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

分享bootstrap學(xué)習(xí)筆記心得(組件及其屬性)

 Bootstrap是一種web框架，是基于HTML,CSS和JS的一種目前較為流行的前端框架。

創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、成都網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)東洲,十年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

Bootstrap包含有豐富的組件，根據(jù)提供的組件，開發(fā)者可以更加快速、便捷地搭建自己心儀的網(wǎng)站。通常包括有以下常用組件：下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航、導(dǎo)航條、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等。此外，bootstrap還包含有眾多jQuery插件：莫泰局昂、標簽頁、滾動條、彈出框等。

有關(guān)bootstrap的下載和文檔可到bootstrap中文網(wǎng)：www.bootcss.com查看。

那么使用bootstrap的優(yōu)勢在哪里？第一、利于開發(fā)響應(yīng)式網(wǎng)站，解決不同設(shè)備的兼容性問題。第二、提高了網(wǎng)站的開發(fā)速度和開發(fā)效率。

參考：如何使用Bootstrap的modal組件自定義alert，confirm和modal對話框

Bootstrap學(xué)習(xí)系列之使用 Bootstrap Typeahead 組件實現(xiàn)百度下拉效果

本篇文章將總結(jié)常用組件及其屬性。

1.1柵格系統(tǒng)

1、柵格系統(tǒng)是一種行和列構(gòu)成的一種布局。隨著，屏幕分辨率的變大，最多可展示12個列。

PC端：

PAD端：

手機終端：

2、柵格參數(shù)：

col-lg-*:(屏幕>=1200px) PC
col-md-*:（992px-1200px）
col-sm-*:（768px-992px）小平板
col-xs-*:（小于768px）手機

3.代碼示例：

<div class="container" > 
 <div class="row"> 
  <div class="col-lg-3 col-sm-4 col- xs-6"> 
   <div class="thumbnail"> 
    <img src="img/codeguide.png"> 
    <h3>靠譜研究所</h3> 
    <p>我們的口號是：靠譜、有趣、有料</p> 
   </div> 
  </div> 
  <div class="col-lg-3 col-sm-4 col- xs-6"> 
   <div class="thumbnail"> 
    <img src="img/codeguide.png"> 
    <h3>靠譜研究所</h3> 
    <p>我們的口號是：靠譜、有趣、有料</p> 
   </div> 
  </div> 
 </div>  
 </div>

1.2輔助類

1.文本顏色：

<span > </span> <h2 class="text-primary">text-primary靠譜研究所</h2> 
  <h2 class="text-success">text-success靠譜研究所</h2> 
  <h2 class="text-warning">text-warning靠譜研究所</h2> 
  <h2 class="text-danger">text-danger靠譜研究所</h2> 
  <h2 class="text-info">text-info靠譜研究所</h2> 
  <h2 class="text-muted">text-muted靠譜研究所</h2>

2、背景顏色：

<span > </span> <h2 class="bg-primary">text-primary靠譜研究所</h2> 
  <h2 class="bg-success">text-success靠譜研究所</h2> 
  <h2 class="bg-warning">text-warning靠譜研究所</h2> 
  <h2 class="bg-danger">text-danger靠譜研究所</h2> 
  <h2 class="bg-info">text-info靠譜研究所</h2> 
  <h2 class="bg-muted">text-muted靠譜研究所</h2>

3、關(guān)閉按鈕&三角圖標：

<span > </span> <!--關(guān)閉按鈕--> 
  <button class="close"><span>×</span></button> 
  <!--三角圖標--> 
  <span class="caret"></span>

4、快速浮動：

左浮動：pull-left

右浮動：pull-right 清除浮動：clearfix

浮動會將塊元素轉(zhuǎn)換成行內(nèi)元素

<div class="pull-left bg-primary">這是左邊的內(nèi)容</div> 
 <div class="pull-right bg-danger">這是右邊的內(nèi)容</div>

  5、塊元素居中、文字居中：

<!--塊元素垂直居中--> 
 <style> 
  #div2{ 
  position:absolute; 
  left:50%; 
  top:50%; 
  transform:translate(-50%,-50%);//平移 
  } 
 </style> 
<span > </span><!--實現(xiàn)塊元素水平居中--> 
 <div id="div1" class="center-block text-center" >塊元素水平居中</div> 
 <!--實現(xiàn)塊元素垂直居中--> 
 <div id="div2" class="center-block text-center" >塊元素垂直居中</div>

1.3表格

1.表格顏色：active,warning,danger,info,danger

2.鼠標懸停效果：table-hover

3.帶邊框表格：table-bordered

4.各行換色：table-striped

<table class="table table-striped table-hover table-bordered"><!--隔行換色、鼠標懸停、表格邊框--> 
   <thead> 
    <tr class="danger"><!--表格顏色--> 
     <th>姓名：</th> 
     <th>性別：</th> 
     <th>年齡：</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>張三</td> 
     <td>男</td> 
     <td>23</td> 
    </tr> 
    <tr> 
     <td>張三</td> 
     <td>男</td> 
     <td>23</td> 
    </tr> 
    <tr> 
     <td>張三</td> 
     <td>男</td> 
     <td>23</td> 
    </tr> 
   </tbody> 
  </table>

1.4列表：

class屬性：ul:list-group

li:list-group-item 徽章：span:badge                                                                                            

 列表項顏色：list-group-item-(success/warning/danger)

 <ul class="list-group"> 
 <li class="list-group-item"> 
 靠譜研究所 
 <!--列表徽章--><span class="badge">10</span> 
 </li> 
 <li class="list-group-item list-group-item-success">IT研究所</li> 
 <li class="list-group-item list-group-item-warning">美食研究所</li> 
 <li class="list-group-item list-group-item-info">美妝研究所</li> 
</ul>

1.5表單：

表單分組：form-group

表單項：(input/span/textarea):form-control

<style> 
 .container{ 
  width:450px; 
  height:300px; 
  background:#ffffff; 
  position:absolute; 
  left:50%; 
  top:50%; 
  transform:translate(-50%,-50%); 
  border-radius:20px; 
 } 
 </style> 
<span > </span><form role="form"> 
   <h4 class="text-center">靠譜研究所后臺管理系統(tǒng)</h4> 
   <div class="form-group has-success has-feedback"> 
    <label for="user">用戶名</label> 
    <input type="text" id="user" placeholder="請輸入用戶名" class="form-control"> 
    <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
   </div> 
   <div class="form-group has-error has-feedback"> 
    <label for="pass">密碼</label> 
    <input type="text" id="pass" placeholder="請輸入密碼" class="form-control"> 
    <span class="glyphicon glyphicon-remove form-control-feedback"></span> 
   </div> 
   <div class="checkbox"> 
    <label> 
     <input type="checkbox">請記住我 
    </label> 
   </div> 
   <button type="submit" class="btn btn-success btn-block">提交</button> 
  </form>

文章名稱：分享bootstrap學(xué)習(xí)筆記心得(組件及其屬性)
文章來源：http://www.chinadenli.net/article20/jigdjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、企業(yè)網(wǎng)站制作、App設(shè)計、ChatGPT、品牌網(wǎng)站設(shè)計、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)