Bootstrap 是一個用於快速開發 Web 應用程式和網站的前端框架。

Bootstrap 是基於 HTML、CSS、JAVASCRIPT

<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

運用了一個link標籤，href屬性引入一個外部樣式表文件

<script src="https://code.jquery.com/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>

以上3個檔案就可以使用Bootstrap，JQ一定是在最上邊的

<!--[if lt IE 9]>

<![endif]--> 這不是註釋語法，而是if語句

二網格系統

預設的把一行拆成12個格網格系統寬度同一級別的誰在下面用誰的，上邊的會被覆蓋掉

例：

<body>

<div class="container">      container  代表容器

 <div class="row"> 
 <div class="col-xs-6"></div>     * 是能替換掉的
 <div class="col-xs-6"></div>     
 </div>
</div>
</body>

注：在bootstrap裡的class名不能更改，因為預設了很多樣式，直接複製

如果做響應式的效果，選擇XS的效果更顯著

例：如何同時控制4個

*{ margin:0px auto; padding:0px}

.d1{ background-color:#F30; color:white; text-align:center; line-height:30px; height:30px; vertical-align:middle}

</style>

<body>

</div>

</body>

max-width max：最大寬

響應式實用工具

例：放置位置

</div>

練習圖

<title>無標題文件</title>

<link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

<script src="dist/js/jquery-1.11.2.min.js"/></script>

<script src="dist/js/bootstrap.min.js"/></script>

<style type="text/css">

*{ margin:0px auto; padding:0px}

@media (min-width:768px){.container{width:100%}}

@media (min-width:992px){.container{width:100%}}

@media (min-width:1200px){.container{width:100%}}

.d1{ background-color:#F60; color:#FFF; text-align:center; line-height:40px; height:40px; vertical-align:middle; font-weight:bold}

.t1{ max-width:400px;}

</style>

</head>

<body>

<div class="container">

   <div class="row">

      <div class="col-xs-2 d1">首頁</div>

      <div class="col-xs-4 d1">產品展示</div>

      <div class="col-xs-4 d1">售後服務</div>

      <div class="col-xs-2 d1">聯絡我們</div>

   </div>

</div>

<table class="table table-striped">

  <caption>條紋表格佈局</caption>

  <thead>

    <tr>

      <th>名稱</th>

      <th>城市</th>

      <th>郵編</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Tanmay</td>

      <td>Bangalore</td>

      <td>560001</td>

    </tr>

    <tr>

      <td>Sachin</td>

      <td>Mumbai</td>

      <td>400003</td>

    </tr>

    <tr>

      <td>Uma</td>

      <td>Pune</td>

      <td>411027</td>

    </tr>

  </tbody>

</table>

<input type="text" class="form-control t1" placeholder="請輸入使用者名稱">

</body>

Bootstrap的學習

Bootstrap的學習

Bootstrap 是一個用於快速開發 Web 應用程式和網站的前端框架。

Bootstrap 是基於 HTML、CSS、JAVASCRIPT

Bootstrap的學習

Bootstrap的學習

Bootstrap 是一個用於快速開發 Web 應用程式和網站的前端框架。

Bootstrap 是基於 HTML、CSS、JAVASCRIPT

最新文章