Bootstrap中樣式Jumbotron，row, table的實例應用

時間  2019-11-19
標籤 bootstrap 樣式 jumbotron row table 實例 應用 欄目 Bootstarp 简体版
原文   原文鏈接

    以前只是大概預覽了下Bootstrap中涉及到的相關元素，插件等的使用。接下來將經過實例演練增強對Bootstrap的瞭解。實例來自http://www.runoob.com/有興趣的能夠上去學習跟w3cschool上的差很少。 爲了加深理解，決定先在本地用google瀏覽器測試後，再寫到這裏。加深印象。javascript

 

 第一：首先是基本的網頁標籤的定義。採用的是html5的寫法以下：css

<!DOCTYPE html>html

<html>html5

<head>java

<title>Bootstrap 實例<title>jquery

<meta charset="utf-8">bootstrap

<meta name="viewport" content="width=device-width,initial-scale=1">瀏覽器

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

<script src="script/jquery.min.js"  type="text/javascript" > </script>學習

<script src="script/boostrap.min.js" type="text/javascript" /></script>

</head>

<body>

</body>

</html>

 

第二： 咱們將在<body></body>裏面寫class="jumbotron"所對應的代碼：

<div class="container">

              <div class="jumbotron">

                        <h2>這是個人第一個Bootstap 頁面</h2>

                         <p>重置窗口大小查看響應式效果！</p>

             </div>

</div>

 

第三：一行三列的div佈局代碼：

<div class="container">

           <div class="row">

<div class="col-sm-4"> <h3>第一列<h3><p>學的不只是技術，更是夢想</p></div>

<div class="col-sm-4"><h3>第二列</h3><p>長的醜不是你的錯，不努力就是你的不對了</p></div>

<div class="col-sm-4"><h3>第三列</h3><p>夢想是要有的，萬一實現了呢？</p></div>

             </div>

</div>

 

第四：表格的基本呈現(響應式表格、加邊框、行顏色的切換)：

<div class="container">

     <div class="table-responsive">

                  <div class="table table-striped table-bordered">

                        <caption>我是表格的標題</caption>

                         <thead>

                               <tr>

                                    <th>序號</th>

                                    <th>手機</th>

                                   <th>理財</th>

                                 </tr>

                        </thead>

                        <tbody>

                                 <tr>

                                         <td>1</td>

                                         <td>小米</td>

                                         <td>股票</td>

                                  </tr>

                         </tbody>

                         <tfoot>

                                <tr>

                                      <td>num</td>

                                      <td>phone</td> 

                                      <td>money</td>   

                              </tr>

                        <tfoot>

                  </div>

      </div>

</div>

 

大致效果圖以下：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程