bootstrap的使用

時間 2019-11-10

標籤 bootstrap 使用欄目 Bootstarp 简体版

原文原文鏈接

1、入門
使用Bootstrap推薦使用html5.Bootstrap 使用到的某些 HTML 元素和 CSS 屬性須要將頁面設置爲 HTML5 文檔類型。在你項目中的每一個頁面都要參照下面的格式進行設置。css

<! DOCTYPE html>

< html lang = "zh-CN" >

...

</ html >

若是你想開發移動端兼容（響應式佈局）的網站。那麼下面兩點對你很重要：html

爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤。html5

1	`<` `meta` `name` `=` `"viewport"` `content` `=` `"width=device-width, initial-scale=1"` `>`

在移動設備瀏覽器上，經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受。注意，這種方式咱們並不推薦全部網站使用，仍是要看你本身的狀況而定！編程

1	`<` `meta` `name` `=` `"viewport"` `content` `=` `"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"` `>`

如何使用好Bootstrap呢？答案是善用class Bootstrap有很是多的class 一個標籤能夠有不少class，不一樣class用空格分開好比： <div class="label primary"></div>api

那麼咱們在使用的時候去查閱官方文檔就能夠了。不必去記住。好比我須要用到居中屬性，那我就去找。發現網上有實例，以下圖：瀏覽器

那麼咱們就知道了原來是text-center屬性佈局

2、關鍵知識
網站

2.1柵格系統spa

關於柵格系統網上有不少教程。我以爲只要你使用就離不開柵格系統，利用柵格系統能夠很方便地作出很是好看的瀏覽器兼容的頁面。
.net

下面是從網上找的一個有關柵格系統的一覽圖：

Class 前綴 .col-xs- 超小設備手機（<768px）
                .col-sm- 小型設備平板電腦（≥768px）
               .col-md- 中型設備臺式電腦（≥992px）
               .col-lg- 大型設備臺式電腦（≥1200px）

< div class = "row" >

< div class = "col-sm-5 col-md-6" >.col-sm-5 .col-md-6</ div >

< div class = "col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0" >.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</ div >

</ div >

< div class = "row" >

< div class = "col-sm-6 col-md-5 col-lg-6" >.col-sm-6 .col-md-5 .col-lg-6</ div >

< div class = "col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0" >.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</ div >

</ div >

3、封裝的JavaScript插件

有些東西你們都在用，因而Bootstrap將其封裝爲插件。供咱們使用。若是個人網站只要這一個插件，那就單獨引用插件就能夠了。若是已經引入了Bootstrap.min.css , Bootstrap.min.js 就不必引用了。

既然是封裝的插件，固然有一些參數了。咱們能夠本身去取捨使用什麼，不適用什麼。

兩種方式使用API

1.data-api

2.編程方式的api

$('#myModal').modal() // 以默認值初始化

$('#myModal').modal({ keyboard: false }) // initialized with no keyboard

$('#myModal').modal('show') // 初始化後當即調用 show 方法

在這裏介紹我經常使用的幾個插件

模態框
用於登陸註冊
標籤頁
很少說了，很經常使用
彈出框
彈出提醒，錯誤。成功等等。值得一提的是它能夠從上下左右四個方面彈出，頗有趣。
輪播圖Carousel

4、打包的樣式花哨的CSS組件

這部分的東西大都是對基本控件的擴展。

以下拉菜單就是對菜單的擴展

按鈕組合輸入組

導航

縮略圖

進度條等等

相關標籤/搜索

每日一句

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