91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

bootstrap中css樣式設計的示例分析

發布時間:2021-09-16 18:05:24 來源:億速云 閱讀:185 作者:柒染 欄目:移動開發

bootstrap中css樣式設計的示例分析,相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。

由于項目需要,所以打算好好學習下bootstrap框架,之前了解一點,框架總體不難,但涉及到的東西還是很多,想要熟練掌握它,還是要多練練。

一:bootstrap是什么?

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

怎么用bs呢?主要是通過使用不同的類增加效果,每一種類,對應的功能不同。

bs好處:增加了開發效率,頁面設計更加美觀,支持響應式開發。

二:css樣式設計

1:基于Html文檔

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

  1. <!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>   
    <h2>Hello, world!</h2>   
    </body>   
    </html>

2:柵格系統布局

 通過設置行和列來進行內容的布局。bootstrap把頁面設置為12列。通過改變列的數字來進行布局,比如設置三個等寬的列:

JavaScript Code復制內容到剪貼板

  1. <!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來進行平移。即平移的列數

  1.   <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>  
    <!-- 平移列-->

效果如下:

bootstrap中css樣式設計的示例分析

 33由于平移了兩列,不能滿足它占4列的要求,于是被擠到下一行開始占據4列。簡單來說,相當于將整個div塊右移。

bootstrap中css樣式設計的示例分析

 3:嵌套列

  即在網格列里面再嵌套列。我們對比來看。

XML/HTML Code復制內容到剪貼板

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

效果如下:

[object Object]

有沒有發現問題?為什么上面的沒有平均分配8?

bootstrap中css樣式設計的示例分析

當設備>=992px時。效果如下:

bootstrap中css樣式設計的示例分析

上面兩種類,分別表示的分辨率不一樣。col-md-12此時表示每列獨占一行即12列。

看完上述內容,你們掌握bootstrap中css樣式設計的示例分析的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

井陉县| 萨嘎县| 元朗区| 福海县| 高雄县| 涞源县| 庆安县| 三河市| 古蔺县| 通州区| 平利县| 临沭县| 遵义市| 莱阳市| 定安县| 桃源县| 孟连| 霍林郭勒市| 云林县| 当阳市| 丰原市| 玉龙| 大连市| 南汇区| 宜章县| 湖北省| 西林县| 临沂市| 泰顺县| 灯塔市| 呼图壁县| 且末县| 井研县| 宣城市| 陈巴尔虎旗| 元氏县| 拉孜县| 洮南市| 三江| 嘉祥县| 江城|