注冊用戶即可下載全站資源 關注Java幫幫微信公眾號
 

Web-第五天 BootStrap學習【悟空教程】

75
發表時間:2018-11-07 14:25來源:Java幫幫-微信公眾號

Bootstrap基礎入門

今日內容介紹

  • 使用bootstrap重寫首頁

今日內容學習目標

  • 學會通過官方提供demo實例,完成自己需要的功能。

  • 能夠從已有html文檔中,找到將要修改的位置,并進行簡單調整


第1章 案例:重寫首頁

1.1 案例介紹

將使用Bootstrap重寫首頁,整個案例中將使用到Bootstrap各種模塊,為了方便編程,將采用拆分的原則,各個模塊單獨編寫,最后組合。

1.2 相關技術介紹

1.2.1 BootStrap概述

1.2.1.1 什么是BootStrap

  • Bootstrap,基于 HTML、CSS、JAVASCRIPT 的前端框架(半成品)。其預定義一套CSS樣式和與樣式對應的jQuery代碼,我們只需要提供固定HTML結構,添加固定的class樣式,就可以完成指定效果的實現。

  • Bootstrap在jQuery的基礎工作,可以理解Bootstrap就是jQuery的一個插件。

  • Bootstrap 使得 Web 開發更加快捷,代碼優雅,美觀大方。

  • 由Twitter 公司的設計師Mark Otto和Jacob Thornton合作開發。

  • Bootstrap基礎入門使用的都是自帶CSS樣式,高級開發中需要使用HTML5、CSS3、動態CSS語言Less 進行自定義開發,JavaEE課程中學習時“基礎入門”。

  • 國內一些移動開發者較為熟悉的框架,如WeX5前端開源框架等,也是基于Bootstrap源碼進行性能優化而來

  • 中文官網:http://www.bootcss.com/


1.2.1.2 什么是響應式布局

  • 響應式布局:一個網站能夠兼容多個終端(手機、iPad等),而不需要為每個終端做一個特定的版本。此概念是為解決移動互聯網瀏覽而誕生的。

  • 響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗,而且隨著目前大屏幕移動設備的普及,用“大勢所趨”來形容也不為過。隨著越來越多的設計師采用這個技術,我們不僅看到很多的創新,還看到了一些成形的模式。

  • Bootstrap就是響應式布局最成功的實現,為了兼容不同的瀏覽器采用jQuery,為了適配不同的終端采用CSS3 Media Query (媒體查詢)

1.2.2 環境搭建

1.2.2.1 下載

  • 中文官網地址:http://d.bootcss.com/bootstrap-3.3.5.zip

  • GIT地址:http://github.com/twbs/bootstrap/archive/v3.3.6.zip

1.2.2.2 目錄結構


1.2.2.3 內容結構

  • 發布版,及開始使用到的Bootstrap內容結構

1.2.2.4 簡潔模板

<!DOCTYPE html>  <!-- HTML5 約束(固定值)-->

<html> <!-- 聲明語言,建議編輯-->

<head>

    <!-- 響應式開發必須使用,且必須在<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>Bootstrap 模板</title>

    <!-- Bootstrap預定義的CSS樣式、jQuery核心類庫、Bootstrap類庫-->

<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script src="../lib/jquery/jquery-1.11.0.js"></script>

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

</head>

<body>

<h1>你好,世界!</h1>

</body>

</html>

1.2.2.5 完整模板(了解)

  • 參考文檔: 起步/基本模板,http://v3.bootcss.com/getting-started/#template

<!DOCTYPE html>

<html>

 <head>

   <meta charset="utf-8">

<!--此屬性為文檔兼容(compatible)模式聲明,表示使用IE瀏覽器的最新渲染模式-->

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <!--

    視口:用于設置移動瀏覽器顯示效果。

視口的作用:在移動瀏覽器中,當頁面寬度超出設備(device),瀏覽器內部虛擬的一個頁面容器,將頁面容器縮放到設備這么大,然后展示

取值:

    width=device-width, 視口的寬度,大多手機瀏覽器視口的寬度是980

     device-width 表示采用設備的寬度

    initial-scale=1 初始化縮放級別,取值:1-5

    minimum-scale=1 最小縮放級別

    maximum-scale=1 最大縮放級別

    user-scalable=no 禁用縮放

   如果設置user-scalable=no”,則“minimum-scale”和“maximum-scale”無效

   下面實例表示的意思:

    根據設置確定視口寬度,初始化的縮放比例是2.5,最小縮放比例1.5,最大縮放比例為3,允許在移動設置縮放

常用值:

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

   -->

   <meta name="viewport" content="width=device-width,initial-scale=2.5,minimum-scale=1.5,maximum-scale=3,user-scalable=yes" />

   <!-- 上述3meta標簽*必須*放在最前面,任何其他內容都*必須*跟隨其后! -->

   <title>Bootstrap 模板</title>

   <!-- Bootstrap -->

   <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- 使IE8支持HTML5元素特性和CSS3媒體查詢

注意:respond.js 不能本地運行(file://),必須放置在web服務器(http:// ,暫時不用掌握)

-->

   <!--[if lt IE 9]>

     <script src="../lib/html5shiv/html5shiv.min.js"></script>

     <script src="../lib/respond/respond.min.js"></script>

   <![endif]-->

 </head>

 <body>

   <!--正文從此處開始-->

   <h1>你好,世界!</h1>

<!--前端開發中建議:網站優化時,除了立即需要工作的js存放在header外,將大部分js文件放置在頁面的末尾-->

   <!-- Bootstrap必須在jQuery的基礎上工作-->

   <script src="../lib/jquery/jquery-1.11.0.js"></script>

   <!-- Bootstrap核心包 -->

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

 </body>

</html>

1.3 重寫首頁之topbar

1.3.1 案例相關技術

1.3.1.1 布局容器

  • 幫助手冊:全部CSS樣式/概覽/布局容器,http://v3.bootcss.com/css/#overview-container

  • Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。提供的兩個容器如下:

    • .container 類用于固定寬度并支持響應式布局的容器。

<div>

 ...

</div>

  • .container-fluid 類用于 100% 寬度,占據全部視口(viewport)的容器。

<div>

 ...

</div>

  • 例如:

<!--居中顯示,兩邊有留白-->

<div style="border:1px solid #f00; height:100px;"></div>

<!--整個寬度-->

<div style="border:1px solid #f00; height:100px;"></div>

1.3.1.2 柵格

  • 幫助手冊:全部CSS樣式/柵格系統,http://v3.bootcss.com/css/#grid-options

  • Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨著屏幕或視口(viewport)尺寸的增加,系統會自動分為最多12列。

  • 柵格特點

    • “行(row)”必須包含在 .container (固定寬度)或 .container-fluid (100% 寬度)中

    • “列(column)” 可以作為行(row)”的直接子元素。

    • 行使用的樣式“.row”,列使用樣式“col-*-*” 內容應當放置于“列(column)”內

    • 列大于12時,將另起一行排列

    • 柵格類適用于與屏幕寬度大于或等于分界點大小的設備,并且針對小屏幕設備覆蓋柵格類。

  • 柵格參數:“col-*-*

large : lg

medium : md

small: sm : sm

x small : xs

  • 例如:

<div>

<div>

<div class="col-md-3 col-xs-6">11</div>

<div class="col-md-3 col-xs-6">12</div>

<div class="col-md-3 col-xs-6">13</div>

<div class="col-md-3 col-xs-6">14</div>

</div>

<div>

<div class="col-md-3 col-xs-6">21</div>

<div class="col-md-3 col-xs-6">22</div>

<div class="col-md-3 col-xs-6">23</div>

<div class="col-md-3 col-xs-6">24</div>

</div>

</div>

1.3.1.3 按鈕

  • 幫助手冊:全部CSS樣式/按鈕/預定義樣式,http://v3.bootcss.com/css/#buttons-options

<button type="button" class="btn btn-default">(默認樣式)Default</button>

<button type="button" class="btn btn-primary">(首選項)Primary</button>

<button type="button" class="btn btn-success">(成功)Success</button>

<button type="button" class="btn btn-info">(一般信息)Info</button>

<button type="button" class="btn btn-warning">(警告)Warning</button>

<button type="button" class="btn btn-danger">(危險)Danger</button>

<button type="button" class="btn btn-link">(鏈接)Link</button>

  • .btn-lg、.btn-sm 或 .btn-xs 可以設置按鈕的不同尺寸

  • .active類設置按鈕激活狀態,其表現為被按壓下去(底色更深、邊框夜色更深、向內投射陰影)

1.3.1.4 響應式工具

  • 幫助手冊:全部CSS樣式/響應式工具,http://v3.bootcss.com/css/#responsive-utilities-classes

  • 例如:

<!--

設置one div,中等屏幕和超小屏幕顯示

設置two div,小屏幕和超大屏幕隱藏

-->

<div class="visible-md visible-xs">one</div>

<div class="hidden-sm hidden-lg">two</div>

1.3.2 案例實現

<!--

1.整個topbar劃分比例:1:2:1

2.中間區域只在“大屏幕”和“中等屏幕”顯示

3.整個區域在“超小屏幕”英寸

-->

<div class="container topbar hidden-xs">

<div>

<div class="col-md-3 col-sm-6">

<img src="../img/logo2.png"/>

</div>

<div class="col-md-6 visible-lg visible-md">

<img src="../img/header.jpg"/>

</div>

<div class="col-md-3 col-sm-6">

<a href="" class="btn btn-danger btn-sm">免費注冊</a>

<a href="" class="btn btn-link btn-sm">登錄</a>

<a href="" class="btn btn-link btn-sm">購物車</a>

</div>

</div>

</div>

1.4 重寫首頁之導航

1.4.1 案例分析

  • Bootstrap 已經提供了導航的完整實例,通常情況下,只需要進行簡單修改即可。

  • 幫助文檔:組件/導航條,http://v3.bootcss.com/components/#navbar

  • 反色導航條:組件/導航條/反色的導航條,http://v3.bootcss.com/components/#navbar-inverted

1.4.2 案例實現

<!--

1.大屏幕顯示所有分類

2.中等屏幕隱藏部分分類,提供“更多”

3.超小屏幕隱藏所有分類,以“漢堡按鈕”顯示

-->

<div>

<nav class="navbar navbar-default navbar-inverse">

 <div>

<!-- Brand and toggle get grouped for better mobile display -->

<div>

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span>漢堡按鈕</span>

<span></span>

<span></span>

<span></span>

 </button>

 <a href="#">首頁</a>

</div>


<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

 <ul class="nav navbar-nav">

<li><a href="#">電腦辦公 <span>(current)</span></a></li>

<li><a href="#">電腦辦公</a></li>

<li><a href="#">電腦辦公</a></li>

<li><a href="#">電腦辦公</a></li>

<li class="dropdown visible-sm">

 <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多<span></span></a>

 <ul>

<li><a href="#">電腦辦公</a></li>

<li><a href="#">電腦辦公</a></li>

<li><a href="#">電腦辦公</a></li>

<li role="separator"></li>

<li><a href="#">電腦辦公</a></li>

<li role="separator"></li>

<li><a href="#">電腦辦公</a></li>

 </ul>

</li>

 </ul>

 <form class="navbar-form navbar-left navbar-right" role="search">

<div>

 <input type="text" placeholder="Search">

</div>

<button type="submit" class="btn btn-default hidden-xs">Submit</button>

 </form>

</div><!-- /.navbar-collapse -->

 </div><!-- /.container-fluid -->

</nav>

</div>

1.5 重寫首頁之輪播圖

1.5.1 案例分析

  • Bootstrap 已經提供輪播圖的完整案例,此處我們也是進行修改即可

  • 參考文檔:JavaScript插件/ carousel,http://v3.bootcss.com/javascript/#carousel

1.5.2 案例實現

<div>

<div id="index_carousel" class="carousel slide" data-ride="carousel">

 <!-- 指示器 Indicators -->

 <ol>

<li data-target="#index_carousel" data-slide-to="0"></li>

<li data-target="#index_carousel" data-slide-to="1"></li>

<li data-target="#index_carousel" data-slide-to="2"></li>

 </ol>


 <!-- 輪播展示

* item 表示一個圖片,與“指示器”li的個數保持一致

 -->

 <div role="listbox">

<div class="item active">

 <img src="../img/1.jpg" alt="第一張圖">

</div>

<div>

 <img src="../img/2.jpg" alt="2張圖">

</div>

<div>

 <img src="../img/3.jpg" alt="3張圖">

</div>

 </div>

 <!-- 左右控制區 Controls

* href 用于確定點擊觸發的那個輪播圖

 -->

 <a class="left carousel-control" href="#index_carousel" role="button" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

<span>前一張</span>

 </a>

 <a class="right carousel-control" href="#index_carousel" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span>下一張</span>

 </a>

</div>

</div>

1.6 重寫首頁之熱賣商品

1.6.1 案例分析

“熱賣商品”模塊是對柵格系統的再應用。我們將用已有的知識編寫出響應式頁面。

1.6.2 案例實現

<div>

<div>

<div>

<h2>熱賣商品 <img src="../img/title2.jpg"/></h2>

</div>

</div>

<div>

<div class="col-md-2 col-sm-4 hidden-xs">

<img src="../img/products/big01.jpg" style="width: 100%;"/>

</div>

<div class="col-md-10 col-sm-8">

<div class="col-md-6 col-sm-12" style="height:200px;">

<img src="../img/products/middle01.jpg" style="height: 100%;width:100%;"/>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small01.jpg"/>

<p>電器</p>

<p style="font-size: #f00;">998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small02.jpg"/>

<p>電器</p>

<p style="font-size: #f00;">998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small03.jpg"/>

<p>電器</p>

<p style="font-size: #f00;">998</p>

</div>


<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small04.jpg"/>

<p>電器</p>

<p style="font-size: #f00;">998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small05.jpg"/>

<p>電器</p>

<p style="font-size: #f00;">998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small06.jpg"/>

<p>電器</p>

<p style="font-size: #f00;">998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small07.jpg"/>

<p>電器</p>

<p style="font-size: #f00;">998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small08.jpg"/>

<p>電器</p>

<p style="font-size: #f00;">998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small09.jpg"/>

<p>電器</p>

<p style="font-size: #f00;">998</p>

</div>

</div>

</div>

</div>

1.7 重寫首頁footer

1.7.1 案例分析

通過分析,該模塊需要使用柵格劃分上下兩行,第二行的文字信息準備使用“列表”,內容的居中將提供兩種方案:文字居中,柵格列偏移

參考文檔-文本對齊:全局CSS樣式/排版/對齊,http://v3.bootcss.com/css/#type-alignment

參考文檔-列表:全局CSS樣式/排版/列表,http://v3.bootcss.com/css/#type-lists

參考文檔-柵格列偏移:全局CSS樣式/柵格系統/列偏移,http://v3.bootcss.com/css/#grid-offsetting

1.7.2 案例實現

<div>

<div>

<img src="../img/footer.jpg" style="width:100%;"/>

</div>

<div>

<!--可以使用  text-center 文本居中-->

<div class="col-md-8 col-md-offset-3">

<ul>

<li><a href="#">關于我們</a></li>

<li><a href="#">聯系我們</a></li>

<li><a href="#">招賢納士</a></li>

<li><a href="#">法律聲明</a></li>

<li><a href="#">友情鏈接</a></li>

<li><a href="#">支付方式</a></li>

<li><a href="#">配送方式</a></li>

<li><a href="#">務聲明服</a></li>

<li><a href="#">廣告聲明</a></li>

</ul>

</div>

</div>

</div>

第2章 總結

Bootstrap基礎入門

今日內容介紹

  • 使用bootstrap重寫首頁

今日內容學習目標

  • 學會通過官方提供demo實例,完成自己需要的功能。

  • 能夠從已有html文檔中,找到將要修改的位置,并進行簡單調整

第3章 內容回顧

把bootstrap的標簽復習一下等著案例練習

第4章 案例:重寫首頁

4.1 重寫案例之樓梯

4.1.1 案例分析

現在的網頁開發中,經常看到將所有信息編寫在一個頁面上,然后通過上下滾動翻頁進行具體信息查詢,且存在一個提示信息,通知用戶當前查看的位置。bootstrap提供相應功能,稱為“滾動監聽”。

幫助文檔--膠囊式標簽頁:組件/導航/膠囊式標簽頁, http://v3.bootcss.com/components/#nav-pills

幫助文檔-滾動監聽:JavaScript插件/動態監聽,http://v3.bootcss.com/javascript/#scrollspy

4.1.2 案例實現

4.1.2.1 樣式

<style type="text/css">

.elevator{

 width: 70px;

 position: fixed;

 top: 100px;

 left: 5%;

}


.elevator > ul > li > a{

 padding: 5px;

}


.elevator .one{

display: none;

}

.elevator .two{

display: block;

}


.elevator .active .one{

display: block;

}

.elevator .active .two{

display: none;

}

</style>

4.1.2.2 HTML代碼

<body data-spy="scroll" data-target=".elevator">

<div id="f1" style="height: 400px;border:1px solid #f00;">1111</div>

<div id="f2" style="height: 400px;border:1px solid #f00;">222</div>

<div id="f3" style="height: 400px;border:1px solid #f00;">333</div>

<div id="f4" style="height: 400px;border:1px solid #f00;">4444</div>

<div class="container elevator">

<ul class="nav nav-pills nav-stacked">

 <li role="presentation">

<a href="#f1"><p>導航</p><p>F1</p></a>

 </li>

 <li role="presentation"><a href="#f2"><p>輪播</p><p>F2</p></a></li>

 <li role="presentation"><a href="#f3"><p>新品</p><p>F3</p></a></li>

 <li role="presentation"><a href="#f4"><p>特色</p><p>F4</p></a></li>

</ul>

</div>

</body>

4.2 重寫首頁之固定滾動條

4.2.1 案例分析

當瀏覽器向下滾動到指定位置時,導航條懸浮在指定頁面最頂端,保證整個瀏覽過程,都可以看到導航條。Bootstrap提供實現功能是“affix 粘貼”

參考文檔:JavaScript插件/affix/用法,http://v3.bootcss.com/javascript/#via-data-attributes-3


4.2.2 案例實現

<div class="container " data-spy="affix" data-offset-top="60">

4.2.3 導航條完善

  • 導航條不在希望的位置

  • 添加樣式

.header_fixed{

 z-index: 1;

 top: 0;

 left: 0;

 right: 0;

}

<div class="container header_fixed" data-spy="affix" data-offset-top="60">


支付寶贊助-Java幫幫社區
微信贊助-Java幫幫社區
Java幫幫公眾號生態

Java幫幫公眾號生態

總有一款適合你

Java幫幫-微信公眾號

Java幫幫-微信公眾號

將分享做到極致

Python幫幫-公眾號

Python幫幫-公眾號

人工智能,爬蟲,學習教程

大數據驛站-微信公眾號

大數據驛站-微信公眾號

一起在數據中成長

九點編程-公眾號

九點編程-公眾號

深夜九點學編程

程序員生活志-公眾號

程序員生活志-公眾號

互聯網,職場,程序員那些事兒

Java幫幫學習群生態

Java幫幫學習群生態

總有一款能幫到你

Java學習群

Java學習群

與大牛一起交流

大數據學習群

大數據學習群

在數據中成長

九點編程學習群

九點編程學習群

深夜九點學編程

python學習群

python學習群

人工智能,爬蟲

測試學習群

測試學習群

感受測試的魅力

Java幫幫生態承諾

Java幫幫生態承諾

一直堅守,不負重望

初心
勤儉
誠信
正義
分享
合作品牌 非盈利生態-優質內容分享傳播者
關于我們
友鏈申請
友鏈交換:加幫主QQ2524138991 留言即可 24小時內答復  
全站內容非商業用途,內容來源于網友,并遵循 許可,如有異議請聯系客服。
會員登錄
獲取驗證碼
登錄
登錄
我的資料
留言
回到頂部