【Java EE】Day11 BootStrap、響應式佈局、柵格系統、CSS樣式、案例
阿新 • • 發佈：2021-06-14
一、BootStrap介紹
https://v3.bootcss.com/css/#overview
1、概念
- 基於三劍客開發的前端開發框架
- 定義了許多css樣式和js外掛，從而得到豐富的頁面效果
- 依賴於柵格系統實現響應式佈局（裝置相容）
2、快速入門
- 下載並將樣式、字型和外掛匯入專案根目錄
- 在html中引入資原始檔bootstrap.min.css
二、響應式佈局
1、柵格系統
- 一行12個格，可以指定元素佔幾個格子
- 步驟：
- 定義容器：container（留白）、container-fluid（100%寬度）
- 定義行，使用row
- 定義元素並指定所佔格子數目
- CSS的class：col-裝置代號-格子數目（1~12）
- 裝置代號：xs，sm，md，lg（笑死me了）
<style> /*<!-- 定義css類選擇器 -->*/ .inner{ border:1px solid red; } </style> </head> <body> <!--1.定義容器--> <div class="container-fluid"> <!--2.定義行--> <div class="row"> <!--3.定義元素，一行有12個格子 目的：在大的顯示器一行12個格子 在pad上，一行6個格子，放不下會自動換行--> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> <div class="col-lg-1 col-sm-2 inner">柵格</div> </div> </div>
- 超過12自動換行
3、全域性CSS樣式
- 按鈕：class="btn btn-default"
- 圖片：class="img-responsive"，響應式圖片
- 圖片形狀：方形img-rounded、圓形img-circle、相框img-thumbnail
- 表格：table-bordered邊框，table-hover懸浮
- 表單：class="form-control"控制，所有表單項位於class="form-group"中
- 其他元件：導航欄、分頁條、輪播圖
三、案例：黑馬旅遊網
<html lang="zh-CN"> <head> <!--固定的meta寫法，瀏覽器支援、裝置寬度設定--> <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 HelloWorld</title> <!-- Bootstrap --> <!--驗證是否寫對，可以按住ctrl，看有沒有小手--> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <style> .paddtop{ padding-top: 10px; } .search_btn{ float: left; border:2px solid #ffc900; width:60px; height: 35px; background-color: #ffc900; text-align: center; line-height: 35px; margin-top: 15px; } .search_input{ float: left; border:2px solid #ffc900; width:400px; height: 35px; padding-left:5px; margin-top: 15px; } .jx{ border-bottom: 2px solid #ffc900; padding: 5px; } .company{ height:40px; background-color: #ffc900; text-align: center; line-height: 40px; /*?????*/ font-size: 8px; } </style> </head> <body> <!--頁首100%，內容留白，頁尾100%--> <!--1.頁首部分--> <!--使用h5的語義化標籤--> <header class="container-fluid"> <!--4行--> <div class="row"> <img src="img/top_banner.jpg" alt="" class="img-responsive"> </div> <div class="row paddtop" > <div class="col-md-3"> <img src="img/logo.jpg" alt="" class="img-responsive"> </div> <div class="col-md-5"> <input type="text" class="search_input" placeholder="請輸入線路名稱"> <a href="#" class="search_btn">搜尋</a> </div> <div class="col-md-4"> <img src="img/hotel_tel.png" alt="" class="img-responsive"></div> </div> <!--導航欄--> <div class="row"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <!-- 定義漢堡按鈕 --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <!-- 定義線的樣式--> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 發給logo--> <a class="navbar-brand" 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 class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <div class="row"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/banner_1.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="img/banner_2.jpg" alt="..."> <div class="carousel-caption"> 兵馬俑 </div> </div> <div class="item"> <img src="img/banner_3.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </header> <!--2.主體部分--> <div class="container"> <div class="row jx"> <img src="img/icon_5.jpg" alt=""> <span>黑馬精選</span> </div> <div class="row paddtop"> <div class="col-md-3"> <!--相框--> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飛三亞五天四晚自由行（春節銷售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飛三亞五天四晚自由行（春節銷售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飛三亞五天四晚自由行（春節銷售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飛三亞五天四晚自由行（春節銷售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機） </p> <font color="red">¥ 899</font> </div> </div> </div> <div class="row jx"> <img src="img/icon_6.jpg" alt=""> <span>國內遊</span> </div> <!--一行分兩個格子--> <div class="row paddtop"> <div class="col-md-4"> <img src="img/guonei_1.jpg" alt=""> </div> <div class="col-md-8"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飛三亞五天四晚自由行（春節銷售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飛三亞五天四晚自由行（春節銷售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飛三亞五天四晚自由行（春節銷售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機） </p> <font color="red">¥ 899</font> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飛三亞五天四晚自由行（春節銷售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飛三亞五天四晚自由行（春節銷售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飛三亞五天四晚自由行（春節銷售+親子/蜜月/休閒遊首選+豪華酒店任選+接送機） </p> <font color="red">¥ 899</font> </div> </div> </div> </div> </div> </div> <!--3.頁尾部分--> <footer class="container-fluid"> <div class="row"> <img src="img/footer_service.png" alt="" class="img-responsive"> </div> <div class="row company"> 江蘇傳智播客教育科技股份有限公司 版權所有Copyright 2006-2018, All Rights Reserved 蘇ICP備16007882 </div> </footer> </body> </html>