Bootstrap入門（一）

時間 2019-11-19

原文原文鏈接

引入bootsrap，Bootstrap中的JS插件依賴jQuery,所以jQuery要在Bootstrap以前引用

<!DOCTYPE html>css

<html lang="zh-CN"> <head> <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Bootstrap 101 Template</title>html

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

前端

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head> <body> <h1>你好，世界！</h1>html5

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

</body> </html> 在製做Web頁面時，前端人員都習慣爲網站設置一個全局樣式（reset.css）。那麼在Bootstrap框架中也不例外。Bootstrap框架的核心是輕量的CSS基礎代碼庫，他並無一味的重置樣式，而是注重各瀏覽器基礎表現，下降開發難度。大部分前端人員都具備歸零的思想，但實際你會發現，歸零以後的樣式在開發過程當中會存在着潛在的問題，例如，在全局樣式表中將em變成一個普通標記，明明應該是斜體，怎麼就沒效果了呢？jquery

Bootstrap框架在這一部分作了必定的變動，再也不一味追求歸零，而是更注重重置可能產生問題的樣式（如，body,form的margin等），保留和堅持部分瀏覽器的基礎樣式，解決部分潛在的問題，提高一些細節的體驗，具體說明以下：bootstrap

1）移除body的margin聲明
2）設置body的背景色爲白色
3）爲排版設置了基本的字體、字號和行高
4）設置全局連接顏色，且當連接處於懸浮「:hover」狀態時纔會顯示下劃線樣式

三、form表單在<form>元素上使用類名「form-horizontal」主要有如下幾個做用： 1）設置表單控件padding和margin值。 2）改變「form-group」的表現形式，相似於網格系統的「row」。瀏覽器

<form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="請輸入您的郵箱地址"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密碼</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="請輸入您的郵箱密碼"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 記住密碼 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">進入郵箱</button> </div> </div> </form> 四、在Bootstrap框架中，若是fieldset設置了disabled屬性，整個域都將處於被禁用狀態。聽說對於整個禁用的域中，若是legend中有輸入框的話，這個輸入框是沒法被禁用的。實驗證實：但是爲啥我在沒被禁用下的輸入框，再寫一段同樣的代碼，它就被禁用了五、在製做表單時，難免要作表單驗證。一樣也須要提供驗證狀態樣式，在Bootstrap框架中一樣提供這幾種效果。一、.has-warning:警告狀態（黃色）二、.has-error：錯誤狀態（紅色）三、.has-success：成功狀態（綠色）使用的時候只須要在form-group容器上對應添加狀態類名。框架

<form role="form"> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功狀態</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" > </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">警告狀態</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">錯誤狀態</label> <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態"> </div> </form> 運行效果以下或查看右側結果窗口：字體

從效果能夠看出，三種狀態下效果都是同樣的，只是顏色不同而以。網站

其餘兩種狀態省略源碼不在此展現。不少時候，在表單驗證的時候，不一樣的狀態會提供不一樣的 icon，好比成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。若是你想讓表單在對應的狀態下顯示 icon 出來，只須要在對應的狀態下添加類名「has-feedback」。請注意，此類名要與「has-error」、「has-warning」和「has-success」在一塊兒：

<form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功狀態</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" > <span class="glyphiconglyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> ...... </div> <div class="form-group has-error has-feedback"> ...... </div> </form> 運行效果以下或查看右側結果窗口：

從效果圖中能夠看出，圖標都居右。在 Bootstrap 的小圖標都是使用@font-face來製做（後面的內容中將會着重用一節內容來介紹）。並且必須在表單中添加了一個 span 元素：

1. BootStrap入門教程 (一)
2. Bootstrap入門（第一天）
3. Bootstrap入門！
4. Bootstrap入門
5. 入門bootstrap
6. bootstrap入門1
7. 01.Bootstrap入門
8. Bootstrap基礎入門
9. bootstrap框架入門
10. BootStrap基礎入門
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。