Bootstarp

---

介紹

bootstarp是Twitter公司開發基于html,css,js的前端框架為實現web應用程序快速實現開發提供了一套前端工具包 UI（userInterface用戶界面）框架

Bootstrap的特性

響應式設計 (css媒體查詢 一套樣式 實現各個終端尺寸適配) pc 平板 手機端 柵格布局 完整的類庫 jQuery插件 不同的使用場景 移動設備優先

Bootstrap3

IE9以及以上

某些功能性的組件依賴于jQuery

Bootstarp下載地址

// 官方地址 getbootstrap.com // 中文地址 www.bootcss.com

前端開發過程中遇到的問題

重復 復雜 無意義的命令 結構冗余 胡亂嵌套 頁面錯亂

Bootstrap全局樣式的特點

代碼整潔 風格統一 美觀易用

通過class設置樣式

排版

標題

h1~h6 / .h1 ~ .h6 副標題 （small）

文本

段落 對齊方式 文本標記

// 對齊 .text-left .text-center .text-right .text-lowercase .text-uppercase .text-captitalize

表格

.table-bordered 帶邊框 .table-striped 條紋狀 .table-hover 懸停變色 .table-condensed 緊湊風格

.info .success .warning .danger 在表格中起作用

.bg-info .bg-warning …

表單

.form-control 表單控件 .form-group 表單組件 .form-inline 表單水平排列

按鈕

// btn //樣式： btn-default btn-primary btn-success // btn-info btn-warning btn-danger btn-link//更改大小 btn-lg btn-sm md xs // 激活 active 塊級化 btn-block可以給其他標簽套用這些類 比如a標簽

Bootstrap的圖片 --形狀

圓角 .img-rounded 圓形 .img-circle 帶有邊框的圓角圖形 .img-thumbnail 文本顏色 .text-primary .text-success .text-info .text-warning .text-danger 背景顏色 .bg-primary .bg-success .bg-info .bg-warning .bg-danger 狀態設置.close 關閉按鈕 三角符號.caret 三角符號

viewport 與bootstrap的響應式開發

@media screen and (min-width:*px) and (max-width:*px) {}bootstrap內部實現了 css媒體查詢（Media Query） 來實現響應式布局（隨著屏幕的尺寸變化而變化 rem 響應式布局的方式） 一套 柵格布局（ 12份劃分 ）

bootstrap的字體圖標

基本使用

下拉菜單

控件組

.input-group 表示控件組 .input-group-addon 添加控件組的圖標

分頁

.pagination ,pagination-lg/sm .active .pager .previous/.next

彈出框

.alert .alert-success .alert-info .alert-warning .alert-danger .alert-dismissible 可以關閉 .alert-link 彈出框中的鏈接

面板

.panel .panel-default .panel-heading .panel-title .panel-body .panel-footer // .panel自帶的success/warning/info/danger

列表

.list-group .list-group-item

導航

// .nav // .nav-tabs 選項卡式 // .nav-pills 按鈕式 // .nav-stacked 垂直方向按鈕式 // .nav-justified 兩端對齊

總結

以上是生活随笔為你收集整理的Web前端之移动端课程开发之06.bootstrap的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。