BootStrap小結

kaka發表於2018-04-19
boot

一. 簡介

Bootstrap基於HTML,CSS,JAVASCRIPT的前端框架，預定義一套CSS樣式和對應的jquery程式碼，最大的特點是採用響應式佈局(相容多個終端)，是因為他採用了媒體查詢（css3 Media Query）
官方文件：http://www.bootcss.com/

二.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.響應式設計：相容多個終端

相關文章