資料:https://v3.bootcss.com/components/
BootStrap的概念（Web框架）
Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。 它由Twitter的設計師Mark Otto和Jacob Thornton合作開發(fā)，是一個CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。 國內(nèi)一些移動開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優(yōu)化而來。
- 特點
- Bootstrap是基于HTML5和CSS3開發(fā)的，它在jQuery的基礎上進行了更為個性化的完善，形成一套自己獨有的網(wǎng)站風格，并兼容大部分jQuery插件。
- 集合了html/css/jquery為一家
- 作用：創(chuàng)建響應式的頁面
- 響應式:響應式頁面設計：一套頁面可以適配不同的設備.(PC,PAD,手機).
-
下載BootStrap:
- 網(wǎng)站: http://www.bootcss.com/
- 進入Bootstrap中文文檔
- 下載Bootstrap
- 用于生產(chǎn)環(huán)境的 Bootstrap
- 解壓使用即可（3.0優(yōu)先使用移動端）
項目導入BootStrap
- 在webcontent目錄下新建bootstrap目錄，將解壓后的三個文件夾復制進去；
- 在js文件夾中導入jquery-1.11.3.min.js（資料類庫\jquery）；
- 報錯的話： 右鍵項目–properties–javascript–include path–source–webcontent–excluded–選中edit–在exclusion中–add–browser–選中報錯的js文件–添加–ok–ok；
- jsp頁面導入方式:
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 在IE運行最新的渲染模式 -->
<meta name="viewport" content="width=device-width,initial-scale=1"> <!-- 初始化顯示（設置寬度，平移縮放） -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.3.min.js"></script> <!-- 這兩個js文件有時放在body上-->
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
- HTML頁面導入方式:
<!--導入：網(wǎng)站上的（免費的）-->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
- 案例
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 導入配置等 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.3.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
</head>
<body style="padding: 20px"> <!-- 加上邊距 ，使頁面不會緊貼邊框-->
<!-- 一個按鈕 -->
<button type="button" class="btn btn-danger">Bootstrap大爺，你好！</button>
</body>
</html>
支持移動設備
在head中添加標簽：
<meta name="viewport" content="width=device-width, <!--跟隨設備寬度-->
initial-scale=1"> <!--初始化是否縮放，1不縮放-->
maximum-scale=1, <!--最大縮放-->
user-scalable=no <!--是否支持縮放（手機雙手縮放頁面）-->
將所有的內(nèi)容放入到布局容器中.
Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個 .container 容器。我們提供了兩個作此用處的類
方式1:
<div class="container"></div> 左右兩邊有留白（常用）
方式2:
<div class="container-fluid"></div> 留白小近似100%，若普通方式則是100%
-
meta:-
width:可視區(qū)域的寬度，值可為數(shù)字或關鍵詞device-width -
height:同width -
intial-scale:頁面首次被顯示是可視區(qū)域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放 -
maximum-scale=1.0, minimum-scale=1.0;可視區(qū)域的縮放級別， -
maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。 -
user-scalable:是否可對頁面進行縮放，no 禁止縮放
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--導入文件-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--為了移動設備優(yōu)先，支持移動設備-->
<title></title>
<!-- 導入 css-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!--導入jquery.js-->
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<!--導入bootstrap.js-->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</head>
<body>
<!-- 方法1：有留白-->
<div class="container">
<div style="border: 1px solid red;">123</div>
</div>
<!-- 方法2：近似100%-->
<div class="container-fluid">
<div style="border: 1px solid red;">123</div>
</div>
</body>
</html>
方法1樣式:
方法2樣式:
注意:
bootstrap將每一行分成12份
（屏幕）媒體查詢:自動調節(jié)
一行分成12份，滿12份，直接換行
自動判斷是什么上網(wǎng)設備:用像素判斷
-
柵格系統(tǒng):
- （大）屏幕分辨率>1200px， 每行顯示6個 使用:
col-lg-2 - （中）992<屏幕分辨率<1200 ，每行顯示4個 使用:
col-md-3 - （?。?68<屏幕分辨率<992，每行顯示2個 使用:
col-sm-6 - （超?。┢聊环直媛?lt;768(手機) ， 每行顯示1個 使用:
col-xs-12
- （大）屏幕分辨率>1200px， 每行顯示6個 使用:
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
注意，想要能自適用必須在<div class="container"> </div>中
輪播圖案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<!-- 導入 css-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!--導入jquery.js-->
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<!--導入bootstrap.js-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>
$(function(){ //控制，每隔5s跳轉一下
$('.carousel').carousel({
interval: 1000
})
})
</script>
</head>
<body>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!--需要幾張圖片 就得添加幾個 li 還需要在下面的div提供幾個 class=item的div-->
<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>
<!-- 顯示的圖片 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
//激活的，默認第一張圖
<img src="img/1.jpg" alt="" />
<div class="carousel-caption">
我是第一張圖片
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="..." />
<div class="carousel-caption">
i'am second
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="..." />
<div class="carousel-caption">
third
</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>
</body>
</html>
隱藏 hidden-xxxx
位置： Bootstrap3.0–全局css樣式–（右）響應式工具–可用的類文章來源：http://www.zghlxwxcb.cn/news/detail-723712.html
| 標簽 | 超小屏幕手機 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) |
|---|---|---|---|---|
.visible-xs-* |
可見 | 隱藏 | 隱藏 | 隱藏 |
.visible-sm-* |
隱藏 | 可見 | 隱藏 | 隱藏 |
.visible-md-* |
隱藏 | 隱藏 | 可見 | 隱藏 |
.visible-lg-* |
隱藏 | 隱藏 | 隱藏 | 可見 |
.hidden-xs |
隱藏 | 可見 | 可見 | 可見 |
.hidden-sm |
可見 | 隱藏 | 可見 | 可見 |
.hidden-md |
可見 | 可見 | 隱藏 | 可見 |
.hidden-lg |
可見 | 可見 | 可見 | 隱藏 |
將超鏈接偽裝成按鈕
class="btn btn-primary"
浮動到右邊
class="pull-right"
案例:網(wǎng)站首頁
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<!-- 導入 css-->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--logo 小屏幕: 2個一行 超小屏幕:一個一行 -->
<div class="row">
<!--確保每個一行-->
<div class="col-md-4 col-sm-6 col-xs-12">
<img src="../img/logo2.png" />
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<img src="../img/header.jpg" />
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<ul class="list-inline">
<!--在一行-->
<li style="padding-top: 15px;"><a href="#">登錄</a></li>
<!--設置距離頂端距離，使居中-->
<li><a href="#">注冊</a></li>
<li><a href="#">購物車</a></li>
</ul>
</div>
</div>
<!--導航條-->
<div class="row">
<nav class="navbar navbar-inverse">
<!--—設置背景色，黑色--->
<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>
<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="#">JAVA學院 <span class="sr-only">(current)</span></a></li>
<li><a href="#">UI學院</a></li>
<li><a href="#">C++學院</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他學院<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">IOS學院</a></li>
<li><a href="#">電子商務</a></li>
<li><a href="#">前端</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">幼兒園</a></li>
</ul> </li>
</ul>
<form class="navbar-form navbar-left pull-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!--輪播圖-->
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!--默認5s跳轉-->
<!-- Indicators -->
<!--需要幾張圖片 就得添加幾個 li 還需要在下面的div提供幾個 class=item的div-->
<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>
<!-- 顯示的圖片 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/1.jpg" alt="" />
<div class="carousel-caption">
我是第一張圖片
</div>
</div>
<div class="item">
<img src="../img/2.jpg" alt="..." />
<div class="carousel-caption">
i'am second
</div>
</div>
<div class="item">
<img src="../img/3.jpg" alt="..." />
<div class="carousel-caption">
third
</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>
<!--最新商品-->
<div class="row">
<div class="row">
<span class="h2">最新商品</span>
<!--—防止換行---->
<img src="../img/title2.jpg" />
</div>
<!-- 左邊的div 放一張圖片
屏幕為小屏幕的時候和超小屏幕的時候 隱藏
中等屏幕 占2份-->
<div class="col-md-2 hidden-sm hidden-xs" style="height: 400px;">
<img src="../img/big01.jpg" style="height: 100%;" />
</div>
<!--中等屏幕 占10份（已經(jīng)2份被占）
屏幕為小屏幕的時候和超小屏幕的時候 占12份-->
<div class="col-md-10 col-sm-12" style="height: 400px;">
<!--middle
中等屏幕 6份
小屏幕 12份
超小屏幕 隱藏：-->
<div class="col-md-6 col-sm-12 hidden-xs" style="height: 200px;">
<img src="../img/middle01.jpg" style="height: 200px;" />
</div>
<!--中等屏幕 2份, 小屏幕 4份,超小屏幕 12份 -->
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
<div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
<img src="../img/small08.jpg" />
</div>
</div>
</div>
<!--foot-->
<div class="row">
</div>
</div>
</body>
</html>
文章來源地址http://www.zghlxwxcb.cn/news/detail-723712.html
到了這里，關于BootStrap-前端框架的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
