Bootstrap簡介
阿新 • • 發佈：2017-08-22
為什麽 border spa jquery afa scrip query splay phi
什麽是 Bootstrap？
Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。
為什麽使用 Bootstrap？
移動設備優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。
容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
響應式設計：Bootstrap 的響應式 CSS 能夠自適應於臺式機、平板電腦和手機。
它為開發人員創建接口提供了一個簡潔統一的解決方案。
它包含了功能強大的內置組件，易於定制。
它還提供了基於 Web 的定制。
它是開源的。
Bootstrap 包的內容
基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。
CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。
組件：Bootstrap 包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。
JavaScript插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。
定制： 可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>我的第一個 Bootstrap 頁面</h1> <p>重置窗口大小，查看響應式效果！</p> </div> <div class="row"> <div class="col-sm-4"> <h3>第一列</h3> <p>學的不僅是技術，更是夢想！</p> <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p> </div> <div class="col-sm-4"> <h3>第二列</h3> <p>學的不僅是技術，更是夢想！</p> <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p> </div> <div class="col-sm-4"> <h3>第三列</h3> <p>學的不僅是技術，更是夢想！</p> <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p> </div> </div> </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例</title>
<!-- 包含頭部信息用於適應不同設備 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 包含 bootstrap 樣式表 -->
<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>表格</h2>
<p>創建響應式表格 (將在小於768px的小型設備下水平滾動)。另外：添加交替單元格的背景色：</p>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Street</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna Awesome</td>
<td>Broome Street</td>
</tr>
<tr>
<td>2</td>
<td>Debbie Dallas</td>
<td>Houston Street</td>
</tr>
<tr>
<td>3</td>
<td>John Doe</td>
<td>Madison Street</td>
</tr>
</tbody>
</table>
</div>
<h2>圖像</h2>
<p>創建響應式圖片(將擴展到父元素)。 另外：圖片以橢圓型展示：</p>
<img src="cinqueterre.jpg" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236">
<h2>圖標</h2>
<p>插入圖標:</p>
<p>雲圖標: <span class="glyphicon glyphicon-cloud"></span></p>
<p>信件圖標: <span class="glyphicon glyphicon-envelope"></span></p>
<p>搜索圖標: <span class="glyphicon glyphicon-search"></span></p>
<p>打印圖標: <span class="glyphicon glyphicon-print"></span></p>
<p>下載圖標：<span class="glyphicon glyphicon-download"></span></p>
</div>
<!-- JavaScript 放置在文檔最後面可以使頁面加載速度更快 -->
<!-- 可選: 包含 jQuery 庫 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- 可選: 合並了 Bootstrap JavaScript 插件 -->
<script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap簡介