12.2 全局CSS样式
生活随笔
收集整理的這篇文章主要介紹了
12.2 全局CSS样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實例：從堆疊到水平排列
使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。
所有“列（column）必須放在 ” .row 內。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>實例：從堆疊到水平排列</title><!-- 加載Bootstrap的CSS文件--><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> </head> <body><div class="container"><div class="row"><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div></div><div class="row"><div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div></div><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div><div class="row"><div class="col-md-6">.col-md-6</div><div class="col-md-6">.col-md-6</div></div></div><!--Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以要先引入jQuery--> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <!--加載 Bootstrap--> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> </body> </html>顯示效果為：
實例：移動設備和桌面屏幕
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>實例：移動設備和桌面屏幕</title><!-- 加載Bootstrap的CSS文件--><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> </head> <body><div class="container-fluid"><!-- 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></div><!--Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以要先引入jQuery--> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <!--加載 Bootstrap--> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> </body> </html>顯示效果為：
列偏移
使用 .col-md-offset-* 類可以將列向右側偏移。
這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。
例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>列偏移</title><!-- 加載Bootstrap的CSS文件--><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> </head> <body><div class="container-fluid"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div></div><div class="row"><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div></div><div class="row"><div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div></div></div><!--Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以要先引入jQuery--> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <!--加載 Bootstrap--> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> </body> </html>總結
以上是生活随笔為你收集整理的12.2 全局CSS样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 12.1 Bootstrap介绍
- 下一篇： 10.2.1 CSS介绍与引入