Bootstrap學習 Base

時間 2019-11-17

原文原文鏈接

Tapestry的學習不得不停一下了。由於Bootstrap再一次引發了個人注意，而且我不得再也不繫統地學習它一次。javascript

1 bootstrap須要一個HTML5的環境，也就是說必須是：html

<!DOCTYPE html>
<html>
　　...
</html>

2 bootstrap3是移動設備優先的，須要指定一個meta信息，viewport，視角：java

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3 響應式圖片的加入，img-responsive設定了一個圖片的width:100%; height:auto;可讓圖片按比例縮放，不超過其父元素的尺寸。bootstrap

<img src="..." class="img-responsive" alt="Responsive image">

4 用.container包裹頁面上的內容便可實現居中對齊。學習

注意，因爲設置了padding 和固定寬度，.container不能嵌套。字體

5 柵欄系統spa

row須要放到一個container中，以便追加適當的內補等；設計

row中只容許直接放置列（col-sm-6等）；code

內容放到列中。component

6 柵欄系統中若是一個列的高度超過其它列的高度，當出現折行的時候會有錯亂，須要在出現錯亂的地方加入以下代碼。。。

<div class="clearfix visible-xs"></div>

7 列嵌套須要追加一個新的row這樣會完美的嵌套，不然會出現一些padding。。。

8 經過使用.col-md-push-* 和 .col-md-pull-*就能夠很容易的改變列的順序。

真心不明白爲何會有這個設計，(^.^)

9 一些被自定義的字號相關的內容：

<small>小字號容器的85%，<strong>粗字體，<em>斜體

10 文本對其： text-left，text-center，text-right

11 ul，li

<ul class="list-unstyled"> 設置該ul的直接子節點的li的樣式爲基本樣式。

<ulclass="list-inline"> 設置直接子節點li處在一直線上。

12 .lead 讓段落突出顯示

text-muted
text-primary
text-success
text-info
text-warning
text-danger

14 咱們也許該試試把下面這些標籤放到咱們的HTML5中了：

<address> ：地址的設置，<br>是用來提供換行的；<strong>是用來提供突出顯示的。

<blockquote> ：引用別人的內容，其中須要<p>標籤。直接引用這樣就能夠了。若是有出處的話，加入以下的代碼就能夠了。

<small>Someone famous in <cite title="Source Title">Source Title</cite></small>

dl(定義列表，definition list), dt(定義項目，definition title), dd(定義描述，definition describe)

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

or

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

15 表格，爲任意的表格追加.table樣式便可得到bootstrap的支持。

利用.table-striped能夠給<tbody>以內的每同樣增長斑馬條紋樣式。（IE8，USELESS）

.table-striped > tbody > tr:nth-child(odd) > td { background-color: #f9f9f9; }

利用.table-bordered爲表格和其中的每一個單元格增長邊框。

利用.table-hover可讓<tbody>中的每一行響應鼠標懸停狀態。

利用.table-condensed可讓表格更加緊湊，單元格中的內部（padding）均會減半。

將任何.table包裹在.table-responsive中便可建立響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於768px寬度時，水平滾動條消失。

16 <span class="badge">能夠簡單方便的標記一個東西。

    <a href="#">
      <span class="badge pull-right">42</span>
      Home
    </a>

17 若是想要大屏幕顯示一個內容的話，須要用到以下的樣式，挺好看的說。。。。

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

18 警告框

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

可關閉的警告框，爲了保證在全部的設備上都能關閉，須要咱們制定這個data-dismiss

<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

咱們能夠在一個警告框中追加一個鏈接，這個鏈接的樣式以下：

<div class="alert alert-success">
  <a href="#" class="alert-link">...</a>
</div>

19 模態對話框，看上去相對簡單。。。

不需寫JavaScript代碼也可激活模態框。經過在一個起控制器做用的頁面元素（例如，按鈕）上設置data-toggle="modal"，並使用data-target="#foo"或href="#foo"指向特定的模態框便可。

    <button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal">
        Show Module!
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->