bootstrap 學習筆記（1）---介紹bootstrap和柵格系統

時間 2019-11-11

原文原文鏈接

　　學習前端許久，對於佈置框架和響應瀏覽器用html 和javascript 寫的有點繁瑣，無心間看到這個框架，以爲挺好用的就開始學習了，可是這個框架上面有不少知識，不是全部的都要學的，故將學習筆記和以爲重點的東西寫下來，以便之後學習。javascript

Bootstrap 是一個相應式的佈局的一個前端框架。
bootstrap 學習有如下步驟：
   一、bootstrap 安裝，
   二、bootstrap 全局css 樣式
   三、bootstrap css組件
   四、bootstrap javascript 插件

bootstrap 安裝：官網下載壓縮包解壓到項目中，而後在項目文件中引入下面三行代碼：
   <link rel="stylesheet" href="bs/css/bootstrap.css" />
   <script src="bs/js/jquery-3.1.1.js"></script>
   <script src="bs/js/bootstrap.js"></script>

全局css 樣式：css

　a.必須是html5文檔類型<!DOCTYPE html>
   b.移動設備優先經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。
   這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受。注意，這種方式咱們並不推薦全部網站使用，
   仍是要看你本身的狀況而定！(這被稱爲視寬)
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   佈局容器：html

Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding等屬性的緣由，這兩種容器類不能互相嵌套。前端

柵格系統：
  一、Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，<div class="container"> ... </div>

   系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。
   比較有用的例子：class="col-md-" 意思是將列分紅12格子，col-md-num 中num的值是每一個元素佔據多少格子，12/num算出有多少個元素。
   row 1行12列
   <div class="row">
       <div class="col-md-3">
           <img src="images/1.png" width="100%" />
       </div>
       <div class="col-md-3">
           <img src="images/1.png" width="100%" />
       </div>
       <div class="col-md-3">
           <img src="images/1.png" width="100%" />
       </div>
       <div class="col-md-3">
           <img src="images/1.png" width="100%" />
       </div>
   </div>

   用下面的方法產生臨時圖片：
   <div class="row">
       <div class="col-md-3">
           <img src="holder.js/100x300" />
       </div>
   </div>
   二、前面的幾個不要，使圖片前面空幾個格子用：col-md-offset-num
   eg:

   <div class="row">
       <div class="col-md-3">
           <img src="images/1.png" width="100%" />
       </div>
       <div class="col-md-3">
           <img src="images/1.png" width="100%" />
       </div>
       <div class="col-md-3 col-md-offset-3">
           <img src="images/1.png" width="100%" />
       </div>
   </div>
   三、有個列排序不必看，用這個也能夠實現：pull-right   pull-left
   eg:
   <div class="row">

       <div class="col-md-3 pull-left">
           <img src="images/1.png" width="100%" />
       </div>

       <div class="col-md-3 pull-left">
           <img src="images/1.png" width="100%" />
       </div>

   </div>html5

相關標籤/搜索

Bootstrap學習筆記

bootstrap

bootstrap+bootstrap+scss

每日一句

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