BootStrap小結

時間 2019-12-06

原文原文鏈接

一. 簡介

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

二.BootStrap組成

1.12柵格系統：將屏幕分爲12列，使用行來組織元素，而後將內容放在列內css

/* 超小屏幕（手機，小於 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提供的多種基礎佈局組件html

（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）java

<table class="table">
   
 <th scope="row">1</th>

（3）帶邊框的表格jquery

<table class="table-bordered">

（4）表單css3

<form>
    <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>

（5）按鈕bootstrap

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

1. bootstrap小結
2. Bootstrap 小結
3. BootStrap Table使用小結
4. Bootstrap 使用小點總結
5. Bootstrap Table的使用小結
6. Bootstrap一週學習小結
7. Bootstrap Bootstrap表格插件bootstrap-table配置與應用小結
8. Bootstrap 時間日曆插件bootstrap-datetimepicker配置與應用小結
9. bootstrap datetimepicker的一些小總結
10. Bootstrap小部件
更多相關文章...
• Rust 結構體 - RUST 教程
• XML 樹結構 - XML 教程
• 算法總結-雙指針
• 算法總結-回溯法

相關標籤/搜索

bootstrap+bootstrap+scss

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。