BootStrap是什麼？ BootStrap的結構組成介紹
- 不言轉載
- 2018-10-13 15:51:163376瀏覽
本篇文章帶給大家的內容是關於BootStrap是什麼？ BootStrap由什麼組成？有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一.簡介
Bootstrap基於HTML,CSS,JAVASCRIPT的前端框架，預先定義一套CSS樣式和對應的jquery程式碼，最大的特點是採用響應式佈局(兼容多個終端)，是因為他採用了媒體查詢（css3 Media Query）（相關免費視頻推薦：bootstrap教程）
二.BootStrap組成
#1.12柵格系統：將螢幕分為12列，使用行來組織元素，然後將內容放在列內
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
2.基礎佈局元件:bootstrap提供的多種基礎佈局元件
（1）引入
<!DOCTYPE html> <html lang="zh-CN"> <head> <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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
（2）預設樣式的Table（ tr是一行,td是一行中的一列,th是標題列,可以等同於td）
<table class="table"> <th scope="row">1</th>
（3 ）有邊框的表格
<table class="table-bordered">
（4）表單
<form> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div>
（5）按鈕
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-primary">Transfer cash</button>
3.jquery：Bootstrap所有的JavaScript外掛都依賴Jquery的（注意引入jquery函式庫）
4.css元件：bootstrap為我們預先實作了很多CSS元件
5.javascript外掛：bootstrap為我們提供了一些js外掛
6 .響應式設計：相容於多個終端機
以上是BootStrap是什麼？ BootStrap的結構組成介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除