四天搞定bootstrap---第二天

阿新 • • 發佈：2018-11-07

1.Boostrap第二部分：全域性CSS樣式——輔助類

.pull-left

.pull-right

.caret

.close

.center-block

2.Boostrap第二部分：全域性CSS樣式——排版&程式碼

3.Boostrap第二部分：全域性CSS樣式——表格

.table

.table-bordered 帶邊框的表格

.table-striped 隔行變色的表格

.table-hover 滑鼠懸停變色的表格

.table-responsive 響應式表格，用於TABEL父元素DIV

Bootlint：官方提供的一個用於檢查HTML/CSS使用方面錯誤的工具。

練習：如何為tr和td修改背景顏色 —— 自己檢視手冊

4.Boostrap第二部分：全域性CSS樣式——柵格佈局系統——重點

頁面內容佈局的三種方式：

(1)TABLE佈局

好處：簡單容易控制

問題：語義錯誤，渲染效率低

(2)DIV+CSS佈局

好處：語義正確，渲染效率高

問題：不容易控制

(3)Bootstrap柵格佈局系統

好處：語義正確，渲染效率高，簡單容易控制，實現了響應式

不足：沒有！

柵格佈局系統的使用方法：

(1)柵格系統的父元素必須是：

div.container - 定寬容器

LG:1170px MD:970px SM: 750px XS:100%

div.container-fluid - 變寬容器

width:100%

(2)在容器中宣告“行”

div.container > div.row

(3)在“行”中宣告“列”

div.container > div.row > div.col-*-*

(4)列根據不同的螢幕尺寸分為四組：

.col-lg-*

.col-md-*

.col-sm-*

.col-xs-*

(5)一行均分為12等份，每個列必須指定自己的佔比：

.col-lg-1

.col-lg-2

.col-lg-3

.col-lg-...

.col-lg-12

(6)列可以向後“偏移”指定的寬度

.col-lg-offset-1

.col-lg-offset-2

.col-lg-offset-....

.col-lg-offset-12

(7)不同螢幕寬度下的列寬度佔比適用於指定螢幕以及更大螢幕

.col-xs-* 適用於xs/sm/md/lg螢幕

.col-sm-* 適用於sm/md/lg螢幕

.col-md-* 適用於md/lg螢幕

.col-lg-* 適用於lg螢幕

(8)一個列可以指定不同螢幕下的不同寬度佔比

(9)可以指定列在特定的螢幕下實現隱藏

.hidden-lg

.hidden-md

.hidden-sm

.hidden-xs

.hidden

注意：隱藏只對指定螢幕有效！

(10)柵格系統可以巢狀使用

</div>

(11)列的排序問題——待續

午間練習：使用柵格系統實現如下頁面佈局：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="./css/bootstrap.css" rel="stylesheet">
  <script src="./js/html5shiv.min.js"></script>
  <script src="./js/respond.min.js"></script>
</head>
<body>
  <div class="container">
    <!--標題欄-->
    <div class="row">
      <div class="col-md-12">
        <h1>Bootstrap <i>CSS </i> <small>type</small></h1>
      </div>
    </div>
    <!--搜尋框-->
    <div class="row">
      <div class="col-md-3 col-md-offset-9">
        <input class="form-control" type="text">
      </div>
    </div>
    <!--主體內容-->
    <div class="row">
      <div class="col-md-3">
        <ul class="list-unstyled">
          <li><a href="">startup</a></li>
          <li><a href="">globalcss</a></li>
          <li><a href="">component</a></li>
          <li><a href="">js plugin</a></li>
          <li><a href="">customize</a></li>
        </ul>
      </div>
      <div class="col-md-6">
        <blockquote>
          <h3>三人行必有我師焉</h3>
          <footer>摘自孔子 論語 </footer>
        </blockquote>
        <table class="table table-bordered table-striped">
          <thead>
          <tr>
            <th>編號</th>
            <th>書名</th>
            <th>價格</th>
            <th>作者</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>101</td>
            <td>三國志</td>
            <td>35.5</td>
            <td>羅貫中</td>
          </tr>
          <tr>
            <td>102</td>
            <td>西遊記</td>
            <td>35.5</td>
            <td>吳承恩</td>
          </tr>
          <tr>
            <td>103</td>
            <td>紅樓夢</td>
            <td>35.5</td>
            <td>曹雪芹</td>
          </tr>
          <tr>
            <td>104</td>
            <td>水滸傳</td>
            <td>35.5</td>
            <td>施耐庵</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="col-md-3">
        <h2>特色課程</h2>
        <dl>
          <dt>HTML</dt>
          <dd>hyper text markup language</dd>
          <dt>css</dt>
          <dd>cascade style sheet</dd>
          <dt>js</dt>
          <dd>javascript</dd>
        </dl>
        <blockquote class="blockquote-reverse">
          <h3>來自***</h3>
          <footer>總裁寄語</footer>
        </blockquote>
      </div>
    </div>
    <!--版權宣告條-->
    <div class="row">
      <div class="col-md-12">
        <p class="text-center">****&copy 2018</p>
      </div>
    </div>
  </div>


  <script src="./js/jquery-1.11.3.js"></script>
  <script src="./js/bootstrap.js"></script>

</body>
</html>

重點練習：響應式網頁示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="./css/bootstrap.css" rel="stylesheet">
  <script src="./js/html5shiv.min.js"></script>
  <script src="./js/respond.min.js"></script>
  <style>
    .navbg{
      background:rgb(3,76,80);
      margin-bottom:10px;
      margin-top:5px;
      border-radius:5px;
      padding-top:5px;
      padding-bottom:5px;
    }
    .leftbg{
      background:rgb(87,8,91);
      color:#fff;
      border-radius:5px;
    }
    .leftbg>ul>li>a{
      background:#fff;
      color:#000;
      margin:5px 10%;
      display:inline-block;
      width:80%;
      height:50px;
      text-align:center;
      line-height:50px;
      border-radius:5px;
    }
    .centerbg{
      background:rgb(255,185,81);
      border-radius:5px;
    }
    .rightbg{
      background:rgb(91,87,8);
      color:#fff;
      border-radius:5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <!--第一行:導航條-->
    <div class="row navbg">
      <div class="col-xs-12 col-sm-6 col-md-4">
        <ul class="list-inline">
          <li><a href="">首頁</a></li>
          <li><a href="">影集</a></li>
          <li><a href="">活動</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-4">
        <input  class="form-control" type="text">
      </div>
    </div>
    <!--第二行:主體-->
    <div class="row">
      <div class="col-xs-12 col-sm-4 col-md-3 leftbg">
        <ul class="list-unstyled">
          <li><a href="">豆蔻年華</a></li>
          <li><a href="">花樣青春</a></li>
          <li><a href="">激情歲月</a></li>
          <li><a href="">遲暮之年</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-8 col-md-6 centerbg">
        <!--柵格系統的巢狀使用-->
        <div class="row">
          <div class="col-xs-6 col-sm-3 ">
            <img  class="img-responsive" src="./img/1.jpg" alt="">
          </div>
          <div class="col-xs-6 col-sm-3 ">
            <img  class="img-responsive" src="./img/2.jpg" alt="">
          </div>
          <div class="col-xs-6 col-sm-3 ">
            <img  class="img-responsive" src="./img/3.jpg" alt="">
          </div>
          <div class="col-xs-6 col-sm-3 ">
            <img  class="img-responsive" src="./img/4.jpg" alt="">
          </div>
        </div>
        <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda harum nemo obcaecati, omnis provident rem repellendus! Accusamus asperiores consectetur delectus eligendi eveniet hic iusto porro ratione totam, unde? Repudiandae?</span><span>Adipisci debitis eius eos exercitationem, fugit maxime natus nisi numquam officia quasi quisquam sunt suscipit, voluptas! A accusantium cum eligendi ex inventore magni sit? Atque dicta error quasi quo ullam.</span><span>Accusamus culpa dignissimos, dolore ducimus et exercitationem expedita nemo quae qui saepe suscipit voluptate voluptatem. A, aut dolore ex expedita incidunt modi mollitia nesciunt nobis, omnis praesentium, quia vero vitae.</span><span>A at consequuntur cum, cupiditate dolores fugiat hic, illum nam nisi reprehenderit similique suscipit veniam voluptate! Ab eveniet iusto laboriosam modi nemo nisi perspiciatis provident quas, repellendus saepe sunt voluptas?</span><span>Accusamus aliquam animi architecto aut debitis delectus, deleniti deserunt dolor, exercitationem explicabo fugiat fugit id labore laboriosam libero minus nam necessitatibus nesciunt numquam odio quam, repellat tempora temporibus vel vitae?</span><span>Alias aperiam blanditiis, cumque deserunt doloremque, eaque enim esse ex hic itaque laboriosam minima mollitia nesciunt quasi ratione sequi vero? Assumenda blanditiis debitis eius inventore ipsam nisi, quae ut veritatis.</span><span>Accusantium animi eaque eius est eveniet exercitationem fugiat impedit minima mollitia nesciunt perspiciatis possimus quidem reiciendis repellat rerum, sit velit. Accusamus ea id magnam modi repellendus. Blanditiis deleniti et quis.</span><span>Dolor excepturi harum itaque, magni numquam pariatur quos recusandae. Aut commodi earum eius eum, illum, laborum magni nihil perspiciatis porro quam quas quasi quidem quis quo ratione tenetur ut voluptatibus.</span></p>
      </div>
      <div class="hidden-xs hidden-sm col-md-3 rightbg">
        <p>右側廣告 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut corporis dolor dolore dolorum ducimus incidunt iure, laborum maxime mollitia natus obcaecati porro quaerat quisquam, sed sequi tempore temporibus! Obcaecati, totam?</span><span>Ab amet consectetur culpa doloremque eligendi error est fuga harum impedit itaque magnam magni molestias nobis odio pariatur possimus praesentium quas qui, quis ratione reiciendis sint suscipit unde, veritatis voluptate.</span></p>
      </div>
    </div>
    <!--第三行:版權宣告-->
    <div class="row">

    </div>
  </div>
  <script src="./js/jquery-1.11.3.js"></script>
  <script src="./js/bootstrap.js"></script>

</body>
</html>

5.Boostrap第二部分：全域性CSS樣式——表單——難點

難點：(1)相關class較多 (2)HTML結構複雜——HTML5規範

Bootstrap提供了三種形式的表單：

(1)預設表單

<form>

</div>

</form>

(2)行內表單

</div>

</form>

(3)水平表單

提示：水平表單指在一行中放置label、input、span，需要整合柵格佈局系統(變種) 和表單相關內容。

	標準柵格系統	水平表單中柵格
外層容器	div.container 或 div.container-fluid	form.form-horizontal
行	div.row	div.form-group
列	div.col--	div.col--

</div>

</div>

</form>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="./css/bootstrap.css" rel="stylesheet">
  <script src="./js/html5shiv.min.js"></script>
  <script src="./js/respond.min.js"></script>
  <style>
    .form-horizontal .control-label{
      width:100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>全域性css樣式---表單</h1>
    <p>提示:注意h5規範中推薦的表單寫法</p>
    <h3>1.預設表單</h3>
    <form action="">
      <div class="form-group">
        <label class="control-label" for="uname">使用者名稱:</label>
        <input  class="form-control" type="text" id="uname">
        <span class="help-block">使用者名稱中可以包含數字,字母</span>
      </div>
      <div class="form-group">
        <label class="control-label" for="upwd">密碼:</label>
        <input  class="form-control" type="text" id="upwd">
        <span class="help-block">密碼長度在6-12位之間</span>
      </div>

      <!--注意h5規範推薦的複選框和單選框的寫法-->
      <!--SRP:單一責任原則-->
      <div class="form-group">
        <div class="checkbox">
          <label>
            <input type="checkbox">七天之內不再登入
          </label>
        </div>
      </div>
      <div class="form-group">
        <input class="btn btn-success" type="button" value="提交">
        <input class="btn btn-danger" type="button" value="取消">
      </div>
    </form>

    <h3>2.行內表單</h3>
    <form class="form-inline" action="">
      <div class="form-group">
        <!--screen reader only 僅螢幕閱讀器可見-->
        <label class="sr-only" for="uname2">使用者名稱:</label>
        <input  class="form-control" type="text" id="uname2" placeholder="請輸入使用者名稱">
      </div>
      <div class="form-group">
        <label class="sr-only" for="upwd2">密碼:</label>
        <input  class="form-control" type="text" id="upwd2" placeholder="請輸入密碼">
      </div>
      <div class="form-group">
        <input class="btn btn-success" type="button" value="提交">
      </div>
    </form>

    <h3>3.水平表單</h3>
    <form class="form-horizontal" action="">
      <div class="form-group">
        <div class="col-xs-2">
          <label class="control-label" for="uname3">使用者名稱:</label>
        </div>
        <div class="col-xs-5">
          <input  class="form-control" type="text" id="uname3">
        </div>
        <div class="col-xs-5">
          <span class="help-block">使用者名稱中可以包含數字,字母</span>
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-2">
          <label class="control-label" for="upwd3">密碼:</label>
        </div>
        <div class="col-xs-5">
          <input  class="form-control" type="text" id="upwd3">
        </div>
        <div class="col-xs-5">
          <span class="help-block">密碼長度在6-12位之間</span>
        </div>
      </div>

      <!--注意h5規範推薦的複選框和單選框的寫法-->
      <!--SRP:單一責任原則-->
      <div class="form-group">
        <div class="col-xs-10 col-xs-offset-2">
          <div class="checkbox">
            <label>
              <input type="checkbox">七天之內不再登入
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-4 col-xs-offset-3">
          <input class="btn btn-success" type="button" value="提交">
          <input class="btn btn-danger" type="button" value="取消">
        </div>
      </div>
    </form>
  </div>
  <script src="./js/jquery-1.11.3.js"></script>
  <script src="./js/bootstrap.js"></script>

</body>
</html>

練習：如何在輸入框中放置一個對勾、叉號、放大鏡？

8.Bootstrap第三部分：元件 —— 下拉選單

下拉選單必需的三級結構：

<ul class="dropdown-menu">隱藏的選單</ul>

</div>

提示：後面必需引入bootstrap.js，其中會查詢data-toggle="dropdown"元素，為其繫結事件監聽函式。

9. Bootstrap第三部分：元件 —— 警告框

任意文字內容

</div>

課後練習：

(1)面試題：Bootstrap為什麼把一行等分為12份？

(2)完成“英特爾中國官網首頁”的內容和佈局

提示：不用處理字型和顏色相關樣式

四天搞定bootstrap---第二天

1.Boostrap第二部分：全域性CSS樣式——輔助類 .pull-left .pull-right .caret .close .center-block 2.Boo

四天搞定bootstrap---第一天

1.什麼是響應式網頁？ &

四天搞定bootstrap---第四天

1.Bootstrap外掛概述 Bootstrap一共提供了十幾個外掛函式，可以單個引入，也可以一次性全部引入(bootstrap.js) 使用方法有兩種： (1)使用JS方式呼叫

四天搞定bootstrap---第三天

1.補充知識點：Bootstrap全域性CSS樣式——柵格系統列偏移(offset)：控制某列向右錯位，並影響後續所有的列 &

30天搞定大數據爬蟲項目

jquery 監控原理分析 redis myba 掌握算法與數據結構報表 nic 詳情請交流 QQ 709639943 00、30天搞定大數據爬蟲項目 00、零基礎實戰機器學學習 00、企業級實戰 Spark離線和實時電影推薦系統 00、三大項目掌握Sto

21天搞定Python分布式爬蟲-知了課堂

保存 css 單元素 mongod mysql數據庫 god 圖片騰訊 beautiful 01 【爬蟲前奏】什麽是網絡爬蟲【錄播】【爬蟲前奏】什麽是網絡爬蟲(24分鐘) 免費試學 02 【爬蟲前奏】HTTP協議介紹【錄播】【爬蟲前奏】HTTP協議介紹

20天搞定Python程式設計

大家好，歡迎大家閱讀篇文章，Python是當前火爆的程式語言之一；從後臺開發到自動化，從資料分析到人工智慧，都有Python的身影。我們掌握Python，就有了進入這些行業的可能。下面簡單介紹下老貓和這個專欄。 Who Am I? 自稱老貓，三線網際網路公司開發人員一枚，30多歲依然奮鬥開發一線，從

編程學習第一步，讓你20天搞定Python編程

目標如何解決從零學習人工參考每次遇到的問題批量上傳智能大家好，歡迎大家閱讀篇文章，Python是當前火爆的編程語言之一；從後臺開發到自動化，從數據分析到人工智能，都有Python的身影。我們掌握Python，就有了進入這些行業的可能。下面簡單介紹下老貓和這

bootstrap第二天

今天本來想要寫柵格系統的，但是感覺還不能寫好，所以今天暫時寫bootstrap按鈕、表格、程式碼、排版等等！先來按鈕下面是bootstrap最常見的按鈕格式效果如下圖然後是大中小按鈕效果圖還有獨佔一行的按鈕效果圖最後<a>和<input

大資料專案實戰30天搞定大資料爬蟲專案超清視訊教程

大資料專案實戰30天搞定大資料爬蟲專案超清視訊教程《大資料專案實戰30天搞定大資料爬蟲專案超清視訊教程》本專案採用JAVA語言實現，絕對基於真實的爬蟲專案進行改進和優化，希望進一步提升大家的大資料專案經驗。本專案基本涵蓋了爬蟲專案的整個流程，包括資料爬蟲、全文檢索、資料視覺化、爬蟲專案

零基礎21天搞定Python分散式爬蟲_分散式網路爬蟲入門進階（雲盤下載）

課程簡介：適用人群 1、有Python基礎，想學習爬蟲的。 2、想系統學習網路爬蟲的。 3、想學習分散式爬蟲的。課程概述本課程完全從零基礎出發，只要你有一點Python基礎就可以聽懂本課程！課程從基礎到高階，讓你21天破繭成蝶成為高階爬蟲工程師！

21天搞定Python分佈爬蟲，零基礎也不怕

本課程完全從零基礎出發，只要你有一點 Python 基礎就可以聽懂本課程！課程從基礎到高階，讓你 21 天破繭成蝶成為高階爬蟲工程師！適用人群： 1、有 Python 基礎，想學習爬蟲的。 2、想系統學習網路爬蟲的。 3、想學習分散式爬蟲的。

一天搞定CSS：層級(z-index)--18

因為定位的出現，所以有了元素重疊的情況，此時就出現了顯示誰的情況。在多層佈局時，容易出現這種情況 1.預設層級規則但層級規則可以通過z-index來設定 1.在正常情況下，層級的

3天搞定的小型B/S內部管理類軟體定製開發專案【軟體開發實戰10步驟詳解】

十一休假，杭州西湖邊逛了一圈只能用人山人海來形容，浙大紫金港校區也逛了一圈風景如畫，建設得真不錯很棒，假期就去了這2個地方，然後在家裡陪老婆、看孩子、洗尿布、打了幾局星際爭霸，在網上接了一個B/S架構的內部管理類定製軟體、淘寶上收了600元辛苦費後就開始行動了、現在把整個開發過程講解分享如下文

1天搞定Python進階課程-Matplotlib繪圖-覃秉豐-專題視訊課程

1天搞定Python進階課程-Matplotlib繪圖—1569人已學習課程介紹 matplotlib是python中非常常用的繪圖工具包，可用於檢視顯示資料分析的結果，檢視程式執行流

零基礎：21天搞定Python分佈爬蟲視訊教程

課程目錄第1章:爬蟲前奏小節1【爬蟲前奏】什麼是網路爬蟲23:05 小節2【爬蟲前奏】HTTP協議介紹16:29 小節3【爬蟲前奏】抓包工具的使用24:49

一天搞定CSS：盒模型content、padding、border、margin--06

1.盒模型網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模式。 2.

一天搞定CSS：表格（table）--19

1.表格標籤表格標籤的巢狀關係 <table>  <thead>

[php基礎] 零基礎：21天搞定Python分佈爬蟲視訊教程

課程目錄第1章:爬蟲前奏小節1【爬蟲前奏】什麼是網路爬蟲23:05 小節2【爬蟲前奏】HTTP協議介紹16:29 小節3【爬蟲前奏】抓包工具的使用24:49

一天搞定CSS：浮動（float）的副作用--12

我們通常使用浮動來實現某些元素的佈局，但是往往這些元素浮動會影響其他元素的佈局，因此會產生副作用。浮動帶來的副作用 1. 塊狀元素，會鑽進浮動元素的下面，被浮動元素所覆蓋，像這樣

四天搞定bootstrap---第二天

相關推薦