響應式web開發設計神器——BootStrap
阿新 • • 發佈：2018-11-25
一、BootStrap簡介
BootStrap是由Twitter（著名的社交網站）推出的前端開源工具包，是一個用於快速開發 Web 應用程式和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。、、
BootStrap中預定義了一套CSS樣式和與樣式對應的JQuery，應用是我們只需要提供固定的HTML結構，新增BootStrap中提供的Class名稱，就可以完成指定效果的實現。
二、BootStrap的優勢
- 移動裝置優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動裝置優先的樣式。
- 瀏覽器支援：所有的主流瀏覽器都支援 Bootstrap。
- 容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
- 響應式設計：Bootstrap 的響應式 CSS 能夠自適應於桌上型電腦、平板電腦和手機，它為開發人員建立介面提供了一個簡潔統一的解決方案。
- 元件：它包含了功能強大的內建元件，易於定製。
- 定製：它還提供了基於 Web 的定製。
- 開源：它是開源的。
三、BootStrap包中提供的內容
- 基本結構：Bootstrap 提供了一個帶有網格系統、連結樣式、背景的基本結構。
- CSS：Bootstrap 自帶以下特性：全域性的 CSS 設定、定義基本的 HTML 元素樣式、可擴充套件的 class，以及一個先進的網格系統。
- 元件：Bootstrap 包含了十幾個可重用的元件，用於建立影象、下拉選單、導航、警告框、彈出框等等。
- JavaScript 外掛：Bootstrap 包含了十幾個自定義的 jQuery 外掛。您可以直接包含所有的外掛，也可以逐個包含這些外掛。
- 定製：您可以定製 Bootstrap 的元件、LESS 變數和 jQuery 外掛來得到您自己的版本。
三、BootStrap的環境安裝
您可以從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。當您點選這個連結時，您將看到如下所示的網頁：
您會看到兩個按鈕： - Download Bootstrap：下載 Bootstrap。點選該按鈕，您可以下載 Bootstrap CSS、JavaScript 和字型的預編譯的壓縮版本。不包含文件和最初的原始碼檔案。
- Download Source：下載原始碼。點選該按鈕，您可以直接從 from 上得到最新的 Bootstrap LESS 和 JavaScript 原始碼。
四、BootStrap環境安裝
以下程式碼就是BootStrap的使用環境。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shiv 和 Respond.js 用於讓 IE8 支援 HTML5元素和媒體查詢 -->
<!-- 注意： 如果通過 file:// 引入 Respond.js 檔案，則該檔案無法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 外掛需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已編譯的外掛 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
小例子：使用bootStrap實現響應式
在不同大小的瀏覽器視窗下會有不同的樣式
- 大螢幕時，會顯示出所有的導航
- 小螢幕時會顯示漢堡按鈕，點選會出現豎著排版的導航
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap響應式導航欄</title>
<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 href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--自定義背景色-->
<!--<style>-->
<!--.navbar-default {-->
<!--background-color: #ff6e9b;-->
<!--}-->
<!--</style>-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">漢堡按鈕</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--這裡可以定義品牌圖示-->
<div class="navbar-header">
<a class="navbar-brand " id="nav-brand-itheima" href="#" >
網站首頁
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">系列教程</a></li>
<li><a href="##">名師介紹</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">關於我們</a></li>
</ul>
</div>
</nav>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>