bootstrap學習總結-css樣式設計(一)

時間 2019-11-14

標籤 bootstrap 學習總結 css 樣式設計欄目 Bootstarp 简体版

原文原文鏈接

因爲項目須要，因此打算好好學習下bootstrap框架，以前瞭解一點，框架整體不難，但涉及到的東西仍是不少，想要熟練掌握它，仍是要多練練。css

一：bootstrap是什麼？html

bs是什麼? 即前端頁面搭建的標準化框架工具，已經寫好了css.js樣式，只須要拿來用便可。前端

怎麼用bs呢？主要是經過使用不一樣的類增長效果，每一種類，對應的功能不一樣。jquery

bs好處：增長了開發效率，頁面設計更加美觀,支持響應式開發。下載地址：https://github.com/foreverjiangting/bootstrap git

學習文檔：http://v3.bootcss.com/getting-started/github

二：css樣式設計bootstrap

1：基於Html文檔瀏覽器

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

<!DOCTYPE html>   ---包含HTML5文檔聲明，全部瀏覽器均開啓標準模式
<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個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！確保支持響應式佈局 -->
<title>Bootstrap</title>

<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可選的Bootstrap主題文件（通常不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。務必在bootstrap.min.js 以前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

2：柵格系統佈局工具

經過設置行和列來進行內容的佈局。bootstrap把頁面設置爲12列。經過改變列的數字來進行佈局，好比設置三個等寬的列：

<!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個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
<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>
<!--  設置柵欄式佈局-->
<div  class="container"><!--或者container-fluid-->
        <div  class="row">                               -- col-xs-4 : 指小於768px的小設備
                     <div  class="col-xs-4">11</div>     -- col-sm-4 ：指>=768px的設備
                     <div  class="col-xs-4">22</div>     -- col-md-4 ：指>=992px設備
                     <div  class="col-xs-4">33</div>     -- col-lg-4 ：值1200px設備
        </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網格式有四種寫法，主要應用於不一樣設備的分辨率。

2：平移列

使用offset來進行平移。即平移的列數

<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列的要求，因而被擠到下一行開始佔據4列。簡單來講，至關於將整個div塊右移。

3：嵌套列

即在網格列裏面再嵌套列。咱們對比來看。

<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>

效果以下：



有沒有發現問題？爲何上面的沒有平均分配8？
緣由：咱們來看下調試控制檯

.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;
}

發現padding-left 和padding-right均爲15px,這是由於，列與列之間存在padding值得影響，那爲何第二個div沒有影響呢？咱們來探究一下柵欄格的原理。
1：「行（row）」必須包含在  （固定寬度）或  （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
2：經過爲「列（column）」設置  屬性，從而建立列與列之間的間隔（gutter）。經過爲  元素設置負值  從而抵消掉爲  元素設置的 也就間接爲「行（row）」所包含的「列（column）」抵消掉了。
注意：此時row已經把列的padding給抵消了，因此，沒有出現padding的值狀況。

4：列排序 
 主要是使用col-xs-push-* col-xs-pull-*(*表示0-11的數字)如何理解這兩個類呢？push表示推，pull表示拉。
.container.container-fluidpadding.rowmargin.containerpadding
padding

  <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列。

三：流式網格佈局
 1：列寬使用百分比，而不是像素
 2：將row類換成row-fluid
 3:其它基本功能與上面的固定佈局同樣，支持響應式。
 4：平分某一個列時，因爲流式佈局採用的是百分比，因此應該按照6來計算。

 //注意下面這種狀況，平分8列時，並非設置它爲兩個4，而是兩個6，由於bootstrap中是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>

 下面來看一下流式佈局的應用,對比固定佈局來看。

<!-- 流式佈局-->
<div  class="container">
            <div  class="col-xs-6">333</div>
            <div  class="col-xs-6">444</div>
</div>
<div   class="container-fluid">   ---聲明container-fluid類，代表內容是流式佈局，做用：做爲一個包含塊，來包含流式內容
    <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類，此時爲屏幕的寬度
                   <div  class="col-xs-6">333</div>
                   <div  class="col-xs-6">444</div>

</div>

當屏幕小於768px時，效果以下：

當屏幕大於992px時，效果以下：此時獨佔一行

row-fluid類（很是重要），決定是不是流佈局。而後裏面的內容塊代碼編寫與網格系統一致，依然是從col-md-1到col-md-12，分別對應於不一樣的百分比.

四：響應式設計
簡單來講就是支持不一樣設備（手機，PC）的分辨率(960PX,1366PX,978PX等等)進行自適應響應。

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

當設備小於768px時，效果以下：