引入boostrap的方法，簡單運用boostrap
boostrap是基于前端的一條目框架，它可以晉升我們前端工程師寫代碼的效率，而且能解決所有本家兒流瀏覽器的兼容問題。此刻帶大師來引入boostrap，而且簡單運用boostrap。
東西/原料
- 前端編纂器（Dreamweaver或者sublime）
- boostrap情況包（可到官網下載）
boostrap引入
- 1
一、下載并解壓boostrap的情況包。解壓后為css,fonts,js文件夾。
- 2
二、css文件夾中，boostrap.css是未壓縮的css，boostrap.min.css是壓縮過的css。js文件夾中必需要有jQuery.min.js，沒有的話下載并放入。
- 3
三、引入boostrap，窗口和設備的窗口連結一致，初始縮放 100%，禁止用戶雙擊，引入boostrap.min.css，jQuery.min.js，boostrap.min.js。
簡單運用boostrap
- 1
一、bootstrap結構容器，將內容包裹在<div class="container ">...</div>中。<div class=”container”>固心猿意馬寬度1170px內容</div><div class=”container-fluid”>寬度為 100%內容</div>。
- 2
二、.list-unstyled 去失落列表前面的符號，和去失落原有的格局。.list-inline 把<li></li>之間的內容 ，釀成橫標的目的擺列。
- 3
三、.dl-horizontal 設置釀成橫標的目的擺列，結果如下：
- 4
四、.table 表格的一個基類 ，若是加其他的樣式，都在.tabel的根本上。
- 5
五、.table-bordered 給表格加外邊框，.table-hover 鼠標懸停結果，鼠標移動行或單位格，變色. table-striped 斑馬線結果，隔行換色。
- 6
六、. table-responsive 給table的父元素加以移動設備為優先，若是內容不克不及完全的顯示，會呈現滾動條狀況類設置的是行tr或 td。
- 7
七、柵格系統：Bootstrap 供給了一套響應式、移動設備優先的流式柵格系統，跟著屏幕或視口（viewport）尺寸的增添，系統會主動分為最多12列。
- 8
最后，讓我們本身脫手來試一下boostrap吧！！
注重事項
- Js文件夾中必需有jquery.min.js文件。
- boostrap也可以在線引入。
- 發表于 2018-05-02 00:00
- 閱讀 ( 942 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章