Bootstrap筆記《一》
Bootstrap是twitter開源的一個集html、css、javascript的前端框架。
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
時髦的,直觀的,強大的前端開發框架,使得web開發更快速,更容易。
By nerds, for nerds.
書呆子發明,給書呆子用。
Made for everyone.
不僅給桌面的瀏覽器用,而且可以給pad和手機客戶端用,只要開啟responsive css。
- <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
- <link href=“assets/css/bootstrap-responsive.css” rel=“stylesheet”>
就是根據客戶端的不同,css做出自適應的變化,響應式css。
修改網格中列的寬度。
在需要的時候,將元素stack而不是float。由於移動裝置的螢幕相比桌面瀏覽器要小,所以需要調整元素的佈局。
重新調整字型的大小來適應移動裝置。
全域性字型14px,行高20px。
p標籤,段落下面的margin是一半的行高10px。
.lead類用來突出一個段落。
bootstrap為我們定製了常用html標籤的樣式,段落,按鈕,導航,表格,網格,輸入框等等。
還定義了一些常用的按鈕樣式,佈局樣式,網格樣式。
定製了排版,表格,表單,按鈕等等。
還定製了很多的component,下拉選單,按鈕組,tab,breadcrumbs導航,分頁,字型,進度條,警告資訊等等。
常用的javascript操作,需要注意的是需要JQuery,是基於jquery做的擴充套件。
一個有意思的功能是bootstrap支援自定義,根據需要定製,就是選擇你需要的功能,然後根據你的選擇生成最終的css,js。
可以選擇自己需要元件,需要的javascript外掛。
定製好之後,點選最下面的downlaod,這時候下載的檔案就是你定製之後的檔案。
你可以直接下載bootstrap提供的zip檔案中的css和js。如果對於預設的css不滿意,你還可以通過下載https://github.com/twitter/bootstrap的原始碼,然後修改less資料夾中的.less檔案,然後配合less.js使用,或者編譯修改的.less檔案,生成自己的css檔案。
本文轉自 virusswb 51CTO部落格,原文連結:http://blog.51cto.com/virusswb/1035793,如需轉載請自行聯絡原作者
相關文章
- BootStrap筆記18boot筆記
- bootstrap學習筆記 Bootstrap 列表組boot筆記
- Vue & Bootstrap 結合學習筆記(一)Vueboot筆記
- bootstrap實踐筆記boot筆記
- Bootstrap學習筆記boot筆記
- Bootstrap Table 學習筆記之列引數(一)boot筆記
- Bootstrap框架:學習筆記boot框架筆記
- Bootstrap學習筆記 Wellboot筆記
- Bootstrap~學習筆記索引boot筆記索引
- bootstrap學習筆記一 登入水平表單boot筆記
- Bootstrap的一些筆記——form,button,etc.boot筆記ORM
- Bootstrap學習筆記皮膚(Panels)boot筆記
- bootstrap學習筆記 外掛概述boot筆記
- Vue & Bootstrap 結合學習筆記(二)Vueboot筆記
- bootstrap學習筆記 多媒體物件boot筆記物件
- bootstrap 學習筆記 輪播(Carousel)外掛boot筆記
- bootstrap 學習筆記之 文件結構不能變boot筆記
- bootstrap-modal.js學習筆記(原始碼註釋)bootJS筆記原始碼
- [Bootstrap 5 學習記錄](一)搭建框架boot框架
- 筆記一筆記
- 筆記:Angular6引入Bootstrap4(有個坑)筆記Angularboot
- Dubbo筆記(一)筆記
- 前端筆記(一)前端筆記
- Scala筆記(一)筆記
- MyBatis筆記(一)MyBatis筆記
- RUST 筆記(一)Rust筆記
- docker筆記(一)Docker筆記
- 機器學習筆記(一)機器學習筆記
- React筆記(一)React筆記
- TypeScript筆記(一)TypeScript筆記
- 爬蟲筆記(一)爬蟲筆記
- InnoDB文件筆記(一)筆記
- 一點git筆記Git筆記
- 學習筆記(一)筆記
- Pytorch筆記(一)PyTorch筆記
- Laravel框架筆記(一)Laravel框架筆記
- ECMAScript 6筆記(一)筆記
- 【筆記】oracle xml (一)筆記OracleXML