第五模塊·WEB開發基礎-第3章jQuery&Bootstrap

  • 01-jQuery介紹

  • 02-如何使用jQuery

  • 03-jQuery的入口函數

  • 04-jQuery對象和JS對象的相互轉換

  • 05-jQuery如何操做DOM

  • 06-底層選擇器

  • 07-基本過濾器

  • 08-屬性選擇器

  • 09-過濾器選擇方法

  • 10-siblings選擇器方法的基本使用

  • 11-jQuery操做選項卡深刻

  • 12-index()索引的選取

  • 13-基本的動畫

  • 14-捲簾門的動畫效果

  • 15-淡入淡出的自定義動畫

  • 16-二級菜單動畫的使用

  • 17-jQuery的標籤屬性操做

  • 18-jQuery對DOM對象屬性操做

  • 19-jQuery對類樣式的操做

  • 20-jQuery對值的操做

  • 21-父子之間插入操做一

  • 22-父子之間插入操做二

  • 23-兄弟之間插入操做

  • 24-替換操做

  • 25-刪除和清空操做

  • 26-操做input的value值

  • 27-jQuery的位置信息

  • 28-JS的事件流

  • 29-事件冒泡的處理

  • 30-抽屜評論簡易佈局

  • 31-抽屜評論收起操做實現

  • 32-事件對象

  • 33-jQuery的單雙擊事件

  • 34-jQuery的鼠標移入和移出事件

  • 35-jQuery的移入和移出事件

  • 36-jQuery的表單事件

  • 37-jQuery的聚焦、失焦和鍵盤事件

  • 38-事件委託

  • 39-BS端那點兒事

  • 40-什麼是Ajax

  • 41-MVC思想和jQuery的ajax_GET請求

  • 42-jQuery的POST請求

  • 43-POST請求的Bug修復

  • 44-和風天氣API接口文檔介紹

  • 45-jQuery插件庫介紹

  • 46-jQuery總結和做業分析(必看)

  • 47-響應式介紹

  • 48-@media媒體查詢

  • 49-Bootstrap介紹

  • 50-Boostrap的下載和基本使用

  • 51-Bootstrap的佈局容器

  • 52-Bootstrap的柵格系統

  • 53-Bootstrap柵格的實現原理

  • 54-Boostrap的列偏移

  • 55-Boostrap的排版

  • 56-Bootstrap的表格

  • 57-Boostrap的表單

  • 58-全局CSS樣式

  • 59-導航條

  • 60-面板和下拉菜單

  • 61-按鈕組和按鈕式的下拉菜單

  • 62-分頁、路徑導航、徽章

  • 63-警告框和進度條

  • 64-Boostrap的插件

  • 65-我的經歷分享

01-jQuery介紹

02-如何使用jQuery

03-jQuery的入口函數

04-jQuery對象和JS對象的相互轉換

05-jQuery如何操做DOM

06-底層選擇器

07-基本過濾器

08-屬性選擇器

09-過濾器選擇方法

10-siblings選擇器方法的基本使用

11-jQuery操做選項卡深刻

12-index()索引的選取

13-基本的動畫

14-捲簾門的動畫效果

15-淡入淡出的自定義動畫

16-二級菜單動畫的使用

17-jQuery的標籤屬性操做

18-jQuery對DOM對象屬性操做

19-jQuery對類樣式的操做

20-jQuery對值的操做

21-父子之間插入操做一

22-父子之間插入操做二

23-兄弟之間插入操做

24-替換操做

25-刪除和清空操做

26-操做input的value值

27-jQuery的位置信息

28-JS的事件流

29-事件冒泡的處理

30-抽屜評論簡易佈局

31-抽屜評論收起操做實現

32-事件對象

33-jQuery的單雙擊事件

34-jQuery的鼠標移入和移出事件

35-jQuery的移入和移出事件

36-jQuery的表單事件

37-jQuery的聚焦、失焦和鍵盤事件

38-事件委託

39-BS端那點兒事

40-什麼是Ajax

41-MVC思想和jQuery的ajax_GET請求

42-jQuery的POST請求

43-POST請求的Bug修復

44-和風天氣API接口文檔介紹

45-jQuery插件庫介紹

46-jQuery總結和做業分析(必看)

47-響應式介紹

48-@media媒體查詢

49-Bootstrap介紹

  • 49.1 Boostrap的基本使用
  • 49.2 Bootstrap的柵格系統
  • 49.3 Boostrap的全局CSS樣式
  • 49.4 Boostrap的組件

使用Boostrap開發的優秀站點:http://www.youzhan.org/css

50-Boostrap的下載和基本使用

50.1 Boostrap的基礎介紹及使用;

https://v3.bootcss.com/getting-started/#templatehtml

less介紹:http://lesscss.cn/html5

<!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">
    <!-- 上述3個meta標籤*必須*放在最前面,任何其餘內容都*必須*跟隨其後! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢(media queries)功能 -->
    <!-- 警告:經過 file:// 協議(就是直接將 html 頁面拖拽到瀏覽器中)訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>你好,世界!</h1>

<!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery,因此必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

 

51-Bootstrap的佈局容器

51.1 Boostrap中的佈局容器初識; 

<div class="container">
  ...
</div>
//幾乎是全局的;
<div class="container-fluid">
  ...
</div>

52-Bootstrap的柵格系統

52.1 柵格系統初識;jquery

52.2 鼻祖是960grid;https://960.gs/ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>03-柵格系統</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-3">
            Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨着屏幕或視口(viewport)尺寸的增長,系統會自動分爲最多12列。它包含了易於使用的預約義類,還有強大的mixin 用於生成更具語義的佈局。
            在 Bootstrap 2 中,咱們對框架中的某些關鍵部分增長了對移動設備友好的樣式。而在 Bootstrap 3
            中,咱們重寫了整個框架,使其一開始就是對移動設備友好的。此次不是簡單的增長一些可選的針對移動設備的樣式,而是直接融合進了框架的內核中。也就是說,Bootstrap
            是移動設備優先的。針對移動設備的樣式融合進了框架的每一個角落,而不是增長一個額外的文件。
        </div>
        <div class="col-lg-3">
            Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨着屏幕或視口(viewport)尺寸的增長,系統會自動分爲最多12列。它包含了易於使用的預約義類,還有強大的mixin 用於生成更具語義的佈局。
            在 Bootstrap 2 中,咱們對框架中的某些關鍵部分增長了對移動設備友好的樣式。而在 Bootstrap 3
            中,咱們重寫了整個框架,使其一開始就是對移動設備友好的。此次不是簡單的增長一些可選的針對移動設備的樣式,而是直接融合進了框架的內核中。也就是說,Bootstrap
            是移動設備優先的。針對移動設備的樣式融合進了框架的每一個角落,而不是增長一個額外的文件。
        </div>
        <div class="col-lg-3">
            Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨着屏幕或視口(viewport)尺寸的增長,系統會自動分爲最多12列。它包含了易於使用的預約義類,還有強大的mixin 用於生成更具語義的佈局。
            在 Bootstrap 2 中,咱們對框架中的某些關鍵部分增長了對移動設備友好的樣式。而在 Bootstrap 3
            中,咱們重寫了整個框架,使其一開始就是對移動設備友好的。此次不是簡單的增長一些可選的針對移動設備的樣式,而是直接融合進了框架的內核中。也就是說,Bootstrap
            是移動設備優先的。針對移動設備的樣式融合進了框架的每一個角落,而不是增長一個額外的文件。
        </div>
        <div class="col-lg-3">
            Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨着屏幕或視口(viewport)尺寸的增長,系統會自動分爲最多12列。它包含了易於使用的預約義類,還有強大的mixin 用於生成更具語義的佈局。
            在 Bootstrap 2 中,咱們對框架中的某些關鍵部分增長了對移動設備友好的樣式。而在 Bootstrap 3
            中,咱們重寫了整個框架,使其一開始就是對移動設備友好的。此次不是簡單的增長一些可選的針對移動設備的樣式,而是直接融合進了框架的內核中。也就是說,Bootstrap
            是移動設備優先的。針對移動設備的樣式融合進了框架的每一個角落,而不是增長一個額外的文件。
        </div>
    </div>
</div>
</body>
</html>

 

 

53-Bootstrap柵格的實現原理

53.1 12柵格系統的實現原理是由於使用了媒體查詢;

54-Boostrap的列偏移

54.1 col-md-offset-4

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>05-柵格系統中的列偏移</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
    </div>
</div>

</body>
</html>

55-Boostrap的排版

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>05-全局的CSS樣式</title>
    <style type="text/css">
        .thumbnail .project {
            /*display: block;*/
            /*margin-left: auto;*/
            /*margin-right: auto;*/
            /*text-align: center;*/
            /*max-width: 310px;*/
            /*margin-bottom: 30px;*/
            /*border-radius: 0;*/
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row project">
        <div class="col-md-4">
            <div class="thumbnail" style="height: 536px;">
                <h1>h1. Bootstrap BootstrapBootstrap</h1>
                <h2>h2. Bootstrap</h2>
                <h3>h3. Bootstrap</h3>
                <!--<h4>h4. Bootstrap</h4>-->
                <!--<h5>h5. Bootstrap</h5>-->
                <!--<h6>h6. Bootstrap</h6>-->
                <p>你是個人眼,<span class="lead">帶我找尋<mark>四季</mark>的變化</span>,由於你是個人眼,讓我看見幸福就在眼前!</p>
                <p class="lead">cuixiaozhao</p>
                <p>
                    <del>我這裏是刪除線</del>
                </p>
                <p><s>我這裏是無用的文本</s></p>
                <p>
                    <small>我這裏是small</small>
                </p>
            </div>


            <div class="thumbnail" style="height: 336px;">
                <p class="text-left">我這裏是左對齊</p>
                <p class="text-right">我這裏是右對齊</p>
                <p class="text-center">我這裏是中心對齊</p>
                <p class="text-justify">這裏是兩端對齊,應用於英文!</p>
                <p class="text-nowrap">這裏是不對齊!</p>
                <p class="text-lowercase">LOWERcased,所有變爲小寫</p>
                <p class="text-uppercase">Uppercased,所有變爲大寫</p>
                <p class="text-capitalize">capitalized,首字母大寫</p>
            </div>
            <div class="thumbnail" style="height: 333px;">
                <addr>
                    <strong>北京市朝陽區<br>
                        崔各莊鎮奶東村<br>
                        11排19號201室<br></strong>
                    <abbr title="Phone">P:</abbr>138-1122-1893
                    <a href="mailto:#">tqtl@tqtl.org</a>
                </addr>
                <blockquote>
                    <p>這裏是Bootstrap中的引用!</p>
                </blockquote>
            </div>
        </div>
    </div>
</body>
</html>

 

56-Bootstrap的表格

56.1 Bootstrap中的表格;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>07-Boostrap中的表格</title>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="thumbnail table-responsive" style="height: 336px;">
                <table class="table table-striped table-bordered table-hover table-condensed ">
                    <thead>
                    <tr class="active">
                        <th>id</th>
                        <th>name</th>
                        <th>age</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="success">
                        <td>1</td>
                        <td>cuixiaozhao</td>
                        <td>18</td>
                    </tr>
                    <tr class="warning">
                        <td>2</td>
                        <td>崔工</td>
                        <td>28</td>
                    </tr>
                    <tr class="info">
                        <td>3</td>
                        <td>天晴天朗</td>
                        <td>38</td>
                    </tr>
                    <tr class="danger">
                        <td>4</td>
                        <td>天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911</td>
                        <td>58</td>
                    </tr>
                    </tbody>
                </table>

            </div>

        </div>

    </div>

</div>
</body>
</html>

 

57-Boostrap的表單

57.1 Boostrap中的form表單;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>08-Bootstrap中的表單</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="thumbnail" style="height: 336px;">
                <form action="">
                    <div class="form-group">
                        <label for="user">form表單學習啦</label>
                        <input class="form-control" type="text" name="user" id="user">
                    </div>
                </form>


                <form>
                    <div class="form-group">
                        <label for="username">用戶名:</label>
                        <input type="text" class="form-control" id="username" placeholder="請輸入用戶名">
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" id="password" placeholder="請輸入密碼">
                    </div>
                    <div class="form-group">
                        <label for="file">請選擇文件</label>
                        <input type="file" id="file">
                        <p class="help-block">點擊此處可上傳文件</p>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> 已閱讀
                        </label>
                    </div>
                    <button type="submit" class="btn btn-default">提交</button>
                    <button type="submit" class="btn btn-success">提交</button>
                    <button type="submit" class="btn btn-info">提交</button>
                    <button type="submit" class="btn btn-warning">提交</button>
                    <button type="submit" class="btn btn-danger">提交</button>
                </form>
            </div>

        </div>
        <div class="col-md-4">
            <div class="thumbnail" style="height: 336px;">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-jpy"></span></div>
                            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                            <div class="input-group-addon">.00</div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm">Transfer cash</button>
                </form>
            </div>

        </div>
    </div>

</div>
</body>
</html>

 

 

58-全局CSS樣式

58.1 全局CSS樣式內容較多,請參考Boostrap官網說明; https://v3.bootcss.com/css/

59-導航條

60-面板和下拉菜單

61-按鈕組和按鈕式的下拉菜單

62-分頁、路徑導航、徽章

63-警告框和進度條

64-Boostrap的插件

65-我的經歷分享

相關文章
相關標籤/搜索