Bootstarp的使用
##Bootstarp
###Bootstarp是什麼?
它是一個輕量級的CSS框架,是現在主流使用的能夠快速搭建一個響應頁面的CSS框架。
Bootstarp最新版本為4.但現在主流市場還是以3為主。
###如何使用Bootstarp
<!-- 最新版本的Bootstarp核心的CSS檔案--->
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<!--可選的Bootstarp主題檔案(一般不用引入)-->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!--最新的Bootstarp核心JavaScript檔案-->
<script src="./js/bootstrap.min.js"></script>
###柵格系統
柵格系統是Bootstarp的核心繫統之一,他使用了媒體查詢功能完善了一整套非常便利的響應式方法。
柵格系統的基本構成:
1.行(row)
2.單元格(col)
柵格系統遵循的分配方式是12份的方式
例項:移動裝置和桌面螢幕
是否不希望在小螢幕裝置上所有列都堆疊在一起?那就使用針對超小螢幕和中等螢幕裝置所定義的類吧,即 .col-xs-* 和 .col-md-*。請看下面的例項,研究一下這些是如何工作的。
.col-xs-12 .col-md-8.col-xs-6 .col-md-4
.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6 .col-md-4
.col-xs-6.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
###佈局容器
Bootstarp需要為頁面內容和柵格系統包裹一個.container容器。我們提供了兩個作此用處的類。注意,由於padding等屬性的原因,這兩種容器類不能互相巢狀。
.container類用於固定寬度並支援響應式佈局的容器。
<div class="container">
...
</div>
.container-fluid類用於100%寬度,佔據全部視口(viewport)的容器。
<div class="container-fluid">
...
</div>
相關文章
- BootStarp 常用APIbootAPI
- Bootstarp基本樣式boot
- Scrapy框架的使用之Scrapyrt的使用框架
- Docker框架的使用系列教程(四)容器的使用Docker框架
- Docker的使用Docker
- pip 的使用
- Redis的使用Redis
- MongoDB的使用MongoDB
- mysql的使用MySql
- Typeof的使用
- iview 的使用View
- git的使用Git
- IntentService的使用Intent
- RestTemplate的使用REST
- lombok的使用Lombok
- MybatisGenerator的使用MyBatis
- elasticsearch的使用Elasticsearch
- SVG 的使用SVG
- sqlmap的使用SQL
- Promise的使用Promise
- git 的使用Git
- postman的使用Postman
- git的使用+Git
- joomla的使用OOM
- Nginx的使用Nginx
- SwitchHosts的使用
- pipenv 的使用
- BitArray的使用
- HttpUtils的使用HTTP
- PHPeof的使用PHP
- kendoTooltip的使用
- ionicsqlite的使用SQLite
- webview的使用WebView
- RecyclerView的使用View
- WKWebView 的使用WebView
- Qunit的使用
- ubuntu的使用Ubuntu
- JDBC的使用JDBC