Bootstrap學習(二)

1、div樣式：

• container 固定寬度並且具有響應式
• container-fluid自由寬高(100%)
• jumbotron 超大螢幕
• row 行
• col-sm-3 列數: 12意味了佔滿12個列，即全屏寬度（如果是6則佔一半）

  <div class="container"></div>
  <div class="container"></div>

//帶有邊距和圓角效果
<div class="container">
<div class="jumbotron">
        <h1>我的第一個 Bootstrap 頁面</h1>
        <p>重置視窗大小，檢視響應式效果！</p>
</div>
</div>

//不帶有邊距和圓角效果
<div class="jumbotron">
<div class="container">
        <h1>我的第一個 Bootstrap 頁面</h1>
        <p>重置視窗大小，檢視響應式效果！</p>
</div>
</div>

<div class="row">
        <div class="col-sm-3">
            <h3>第一列</h3>
            <p>學的不僅是技術，更是夢想！</p>
            <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
        </div>
        <div class="col-sm-3">
            <h3>第二列</h3>
            <p>學的不僅是技術，更是夢想！</p>
            <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
        </div>
        <div class="col-sm-3">
            <h3>第三列</h3>
            <p>學的不僅是技術，更是夢想！</p>
            <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
        </div>
        <div class="col-sm-3">
            <h3>第四列</h3>
            <p>學的不僅是技術，更是夢想！</p>
            <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
        </div>
    </div>

2、文字樣式：

• text-left 文字左對齊
• text-right 文字右對齊
• text-center 居中對齊
• text-justify 兩端對齊

<h1 class="text-center">早安</h1>
//字型大小
<font class="h1">行內塊樣式</font>

3、列表樣式：

• list-inline 行內塊
• list-unstyled 無符號，去掉前面的符號

//行內塊
<ul class="list-inline">
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVA</li>
</ul>

//無符號，去掉前面的符號 
<ul class="list-unstyled">
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVA</li>
</ul>

4、table樣式：

• table 表格全域性樣式（少量padding和水平方向的分割線）
• table-striped 有條紋的背景色行（隔行變色）
• table-bordered 帶邊框的表格
• table-hover 滑鼠懸聽效果
• table-condensed 緊湊的表格

<table class="table"></table>

//表格邊框
<table class="table table-striped table-bordered">

table行或單元格背景色樣式：

• active
• success
• info
• warning
• danger

 <tr class="active">
 <td class="active">

響應式table：將table元素包裹在table-responsive元素內，即可建立響應式表格

<div class="table-responsive">
    <table class="table table-hover table-condensed">
        <tr class="active">
            <td>編號</td>
            <td>新聞標題</td>
            <td>釋出者</td>
            <td>釋出時間</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    </div>

5、form樣式

• form-group 表單組樣式 ，將和表單元素包含其中，可以獲得更好的排列
• form-inline 可以使元素一行排列，用於form元素
• form-control 表單元素樣式，常用於，等元素
• placeholder 用於
• radio-inline 可以使一組單選框排列在同一行
• checkbox-inline 可以使一組核取方塊排列在同一行
• sr-only 可以用於隱藏元素

<!--form-inline 是表格橫向排列-->
    <form class="form-inline">
        <div class="form-group">
            <!--sr-only 設定隱藏-->
            <label for="username" class="sr-only">使用者名稱:</label>
            <input type="text" class="form-control" id="username" placeholder="請輸入您使用者名稱">
        </div>
        <div class="form-group">
            <label for="password">密碼:</label>
            <input type="text" class="form-control" id="password" placeholder="請輸入您的密碼">
        </div>
    </form>