Bootstrap基礎學習_javascript技巧

Bootstrap是一個基於柵格結構的前端結構框架（當然也有JS，JQuery）,它的優點是內容框架能夠迅速搭建起來，基於媒介查詢可以使搭建的頁面迅速的適應不同的用戶端，無論是手機，平板，還是PC,基本上都能自適應，當然新版本已經開始不支援IE6了，對IE8的支援也很有限，畢竟IE8對HTML5的支援不太好，（說實話，我自己也不喜歡IE6~8,對我這種初級選手來說，相容性有時候真費勁，不只專案上要用，連面試也要用，有沒有搞錯嘛，遇到了，上網查一下不就行了。發個牢騷，該會的還是得會啊！

閒言碎語不多講，開始總結自己這段時間BS筆記！

1.在結構內容方面,BS對結構內容的控制基本上是有類別來控制，例如對結構的控制就是

<div class="container">
  <div class="row">
   <div class="col-md-4 col-xs-6">
     这一块div的类名中，是由col-md-4,col-xs-6这两个类名来控制他的框架宽度；其中col代表是栅格,md代表客户端显示器的宽度为pc中屏，同样的xs则代表客户端显示器为超小屏，也就是手机屏；4，6就代表了栅格的长度，意思就是在中屏显示器下宽度为4个栅格，在手机端宽度为6个栅格 ，一般情况下把把一整块div最多可以划成12个栅格，所以他的兄弟div在中屏下则是8个栅格！ 
   </div>
   <div class="col-md-8  text-muted">这一块div的类名中，抛去col-md-8不说，来说说text-muted.这个类则是控制这个div下的内容字体颜色的，当你把BS的css下载到本地后，你在css我文件中搜索text-muted，就会看到他的定义只有颜色，和他在一起的其他类名就分别定义了不同的颜色 </div>
  </div>
</div>

2.結構上面說完了，那就說說頁面中具體的一些組件，先說說導航吧，原先我們自己製作導航是由一個基本的內聯ul組成（以下css在BS中可以實現） ，

<ul class="list-inline">
  <li>W3cplus</li>
  <li>Blog</li>
  <li>CSS3</li>
  <li>jQuery</li>
  <li>PHP</li>
</ul>

但在BS中，則有nav這個類來實現，但是nav這個類需要和其他類合用才能讓頁面效果發揮出來，譬如說nav-pills和nav-tabs,如果是垂直導航的話則在類名中加入nav-stacked

<ul class="nav nav-pill">
  <li><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li><a href="##">Responsive</a></li>
</ul>

3.說完導航條再來說下拉選單，BS中的下拉選單得依靠它自帶的一個js檔案來實現，而它本身的js還依靠了JQuery,所以這兩個檔案是必備的。值得說明的是關於這個下拉式選單程式碼方面有點複雜，button中的data-toggle="dropdown"必須和外層的div類別名稱相同。

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
 </ul>
</div>

 4.貌似該說說表單了，在Bootstrap框架中，透過客製化了一個類別名稱`form-control`，也就是說，如果這幾個元素使用了類別名稱“form-control”，將會實現一些設計上的客製化效果。

<form role="form">
 <div class="form-group">
  <label for="exampleInputEmail1">邮箱：</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox"> 记住密码
  </label>
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

以上所述就是本文的全部內容了，希望大家能夠喜歡