亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(1)

 更新時(shí)間：2016年06月07日 09:00:33   作者：向婷風(fēng)  
這篇文章主要為大家詳細(xì)介紹了bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

由于項(xiàng)目需要，所以打算好好學(xué)習(xí)下bootstrap框架，之前了解一點(diǎn)，框架總體不難，但涉及到的東西還是很多，想要熟練掌握它，還是要多練練。

一、bootstrap是什么？

bs是什么? 即前端頁面搭建的標(biāo)準(zhǔn)化框架工具，已經(jīng)寫好了css.js樣式，只需要拿來用即可。

怎么用bs呢？主要是通過使用不同的類增加效果，每一種類，對應(yīng)的功能不同。

bs好處：增加了開發(fā)效率，頁面設(shè)計(jì)更加美觀,支持響應(yīng)式開發(fā)。下載地址：https://github.com/foreverjiangting/bootstrap

學(xué)習(xí)文檔：http://v3.bootcss.com/getting-started/

二、css樣式設(shè)計(jì)

1.基于Html文檔

bootstrap引用了部分html元素，所以頭部需寫成下面所示的樣列。

<!DOCTYPE html> ---包含HTML5文檔聲明，所有瀏覽器均開啟標(biāo)準(zhǔn)模式
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！確保支持響應(yīng)式布局 -->
<title>Bootstrap</title>
[/code][code]<!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" ><!-- 可選的Bootstrap主題文件（一般不用引入） --><link rel="stylesheet" ><!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 --><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

2.柵格系統(tǒng)布局

通過設(shè)置行和列來進(jìn)行內(nèi)容的布局。bootstrap把頁面設(shè)置為12列。通過改變列的數(shù)字來進(jìn)行布局，比如設(shè)置三個(gè)等寬的列：

<!DOCTYPE html> 
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 設(shè)置柵欄式布局-->
<div class="container"><!--或者container-fluid-->
 <div class="row">  -- col-xs-4 : 指小于768px的小設(shè)備
  <div class="col-xs-4">11</div> -- col-sm-4 ：指>=768px的設(shè)備
  <div class="col-xs-4">22</div> -- col-md-4 ：指>=992px設(shè)備
  <div class="col-xs-4">33</div> -- col-lg-4 ：值1200px設(shè)備
 </div>
 <div class="row">
  <div class="col-md-4">11</div>
  <div class="col-md-4">22</div>
  <div class="col-md-4">33</div>
 </div>
 <div class="row">
  <div class="col-sm-4">11</div>
  <div class="col-sm-4">22</div>
  <div class="col-sm-4">33</div>
 </div>
 <div class="row">
  <div class="col-lg-4">11</div>
  <div class="col-lg-4">22</div>
  <div class="col-lg-4">33</div>
 </div>

</div>
</body>
</html>

css網(wǎng)格式有四種寫法，主要應(yīng)用于不同設(shè)備的分辨率。

2：平移列

使用offset來進(jìn)行平移。即平移的列數(shù)

<div class="container"><!--或者container-fluid-->
 <div class="row">
  <div class="col-xs-4">11</div>
  <div class="col-xs-4">22</div>
  <div class="col-xs-offset-2 col-xs-4">33</div>---指33向右平移了兩列
 </div>
 <div class="row">
  <div class="col-md-4">11</div>
  <div class="col-md-4 col-md-offset-2">22</div>
  <div class="col-md-4">33</div>
 </div> 
 <div class="row">
 <div class="col-md-4">11</div>
 <div class="col-md-4 col-md-offset-2">22</div> 
 <div class="col-md-4">33</div> 
 </div> 
</div>
<!-- 平移列-->

效果如下：

33由于平移了兩列，不能滿足它占4列的要求，于是被擠到下一行開始占據(jù)4列。簡單來說，相當(dāng)于將整個(gè)div塊右移。

3：嵌套列

即在網(wǎng)格列里面再嵌套列。我們對比來看。

<div class="container"><!--或者container-fluid-->
 <div class="row">
  <div class="col-xs-8">
  <div class="col-xs-2">11</div>
  <div class="col-xs-4">22</div>
  <div class="col-xs-2">33</div>
  </div>
 </div>
 <div class="row"> 
  <div class="col-xs-8">11</div>
 </div>
 <div class="row"> 
  <div class="col-xs-4">11</div>
  <div class="col-xs-4">22</div>
  <div class="col-xs-4">33</div>
 </div> 
 
</div>

效果如下：


有沒有發(fā)現(xiàn)問題？為什么上面的沒有平均分配8？
原因：我們來看下調(diào)試控制臺

.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
 min-height: 1px;
 padding-left: 15px;
 padding-right: 15px;
 position: relative;
}

發(fā)現(xiàn)padding-left 和padding-right均為15px,這是因?yàn)椋信c列之間存在padding值得影響，那為什么第二個(gè)div沒有影響呢？我們來探究一下柵欄格的原理。
1.“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。
2.通過為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為 .row 元素設(shè)置負(fù)值 margin 從而抵消掉為 .container 元素設(shè)置的 padding
也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
注意：此時(shí)row已經(jīng)把列的padding給抵消了，所以，沒有出現(xiàn)padding的值情況。

4：列排序
主要是使用col-xs-push-* col-xs-pull-*(*表示0-11的數(shù)字)如何理解這兩個(gè)類呢？push表示推，pull表示拉。

<div class="row"> 
  <div class="col-xs-4">21</div>
  <div class="col-xs-8">24</div> 
 </div>
 <div class="row">
 
  <div class="col-xs-4 col-xs-push-8">21</div>
  <div class="col-xs-4 col-xs-pull-4">24</div> 
 
 </div>

效果圖如下：

 <div class="col-xs-4 col-xs-push-8">21</div>---記為div1
 <div class="col-xs-8 col-xs-pull-4">24</div>---記為div2

即可理解為交換兩者位置，需要將div1向右推8列，div2需要向左拉4列。

三、流式網(wǎng)格布局
1.列寬使用百分比，而不是像素
2.將row類換成row-fluid
3.其它基本功能與上面的固定布局一樣，支持響應(yīng)式。
4.平分某一個(gè)列時(shí)，由于流式布局采用的是百分比，所以應(yīng)該按照6來計(jì)算。

//注意下面這種情況，平分8列時(shí)，并不是設(shè)置它為兩個(gè)4，而是兩個(gè)6，因?yàn)閎ootstrap中是12列柵格分布。
 <div class="row">
 <div class="col-xs-8">
  <div class="col-xs-6">2</div>
  <div class="col-xs-6">2</div>
 
 </div>
 </div>

下面來看一下流式布局的應(yīng)用,對比固定布局來看。

<!-- 流式布局-->
<div class="container">
 <div class="col-xs-6">333</div>
 <div class="col-xs-6">444</div>
</div>
<div class="container-fluid"> ---聲明container-fluid類，表明內(nèi)容是流式布局，作用：作為一個(gè)包含塊，來包含流式內(nèi)容
 <div class="row-fluid">
  <div class="col-xs-6 col-md-12">333</div>
  <div class="col-xs-6 col-md-12">444</div>

 </div>
</div>

<div class="row-fluid"> ----沒用聲明container和container-fluid類，此時(shí)為屏幕的寬度
  <div class="col-xs-6">333</div>
  <div class="col-xs-6">444</div>

</div>

當(dāng)屏幕小于768px時(shí)，效果如下：


當(dāng)屏幕大于992px時(shí)，效果如下：此時(shí)獨(dú)占一行

row-fluid類（非常重要），決定是否是流布局。然后里面的內(nèi)容塊代碼編寫與網(wǎng)格系統(tǒng)一致，依然是從col-md-1到col-md-12，分別對應(yīng)于不同的百分比.


四、響應(yīng)式設(shè)計(jì)
簡單來說就是支持不同設(shè)備（手機(jī)，PC）的分辨率(960PX,1366PX,978PX等等)進(jìn)行自適應(yīng)響應(yīng)。

<div class="row"> 
  <div class="col-xs-6 col-md-12">21</div>
  <div class="col-xs-6 col-md-12">24</div> 
 
 </div>

當(dāng)設(shè)備小于768px時(shí)，效果如下：

當(dāng)設(shè)備>=992px時(shí)。效果如下：


上面兩種類，分別表示的分辨率不一樣。col-md-12此時(shí)表示每列獨(dú)占一行即12列。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論