Bootstarp入门教程（3）栅格系统

分手后的思念是犯贱 2023-10-16 19:09 118阅读 0赞

栅格系统简介

栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理：

  • “行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 使用“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
  • 通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

Center

（1）桌面栅格系统布局样式

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Demo</title>
  5. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6. <meta http-equiv="description" content="this is my page">
  7. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11. <link rel="stylesheet" href="css/bootstrap.min.css">
  12. <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  13. <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
  14. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  15. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  16. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  17. <script src="js/bootstrap.min.js"></script>
  18. </head>
  19. <body>
  20.     <!--容器  -->
  21.     <div class="container">
  22.         <div class="row">
  23.             <div class="col-md-1">.col-md-1</div>
  24.             <div class="col-md-1">.col-md-1</div>
  25.             <div class="col-md-1">.col-md-1</div>
  26.             <div class="col-md-1">.col-md-1</div>
  27.             <div class="col-md-1">.col-md-1</div>
  28.             <div class="col-md-1">.col-md-1</div>
  29.             <div class="col-md-1">.col-md-1</div>
  30.             <div class="col-md-1">.col-md-1</div>
  31.             <div class="col-md-1">.col-md-1</div>
  32.             <div class="col-md-1">.col-md-1</div>
  33.             <div class="col-md-1">.col-md-1</div>
  34.             <div class="col-md-1">.col-md-1</div>
  35.         </div>
  36.         <div class="row">
  37.             <div class="col-md-8">.col-md-8</div>
  38.             <div class="col-md-4">.col-md-4</div>
  39.         </div>
  40.         <div class="row">
  41.             <div class="col-md-4">.col-md-4</div>
  42.             <div class="col-md-4">.col-md-4</div>
  43.             <div class="col-md-4">.col-md-4</div>
  44.         </div>
  45.         <div class="row">
  46.             <div class="col-md-6">.col-md-6</div>
  47.             <div class="col-md-6">.col-md-6</div>
  48.         </div>
  50.     </div>
  51. </body>
  52. </html>

Center 1

(2)移动栅格系统布局样式

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Demo</title>
  5. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6. <meta http-equiv="description" content="this is my page">
  7. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11. <link rel="stylesheet" href="css/bootstrap.min.css">
  12. <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  13. <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
  14. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  15. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  16. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  17. <script src="js/bootstrap.min.js"></script>
  18. </head>
  19. <body>
  20.     <!--容器  -->
  21.     <div class="container">
  22.         <div class="row">
  23.             <div class="col-xs-6 col-md-8">.col-xs-6</div>
  24.             <div class="col-xs-6 col-md-4">.col-xs-6</div>
  25.         </div>
  27.         <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  28.         <div class="row">
  29.             <div class="col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
  30.             <div class="col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
  31.             <div class="col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
  32.         </div>
  34.         <!-- Columns are always 50% wide, on mobile and desktop -->
  35.         <div class="row">
  36.             <div class="col-xs-6">.col-xs-6</div>
  37.             <div class="col-xs-6">.col-xs-6</div>
  38.         </div>
  40.     </div>
  41. </body>
  42. </html>

Center 2

（3）列偏移：使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Demo</title>
  5. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6. <meta http-equiv="description" content="this is my page">
  7. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11. <link rel="stylesheet" href="css/bootstrap.min.css">
  12. <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  13. <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
  14. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  15. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  16. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  17. <script src="js/bootstrap.min.js"></script>
  18. </head>
  19. <body>
  20.     <!--容器  -->
  21.     <div class="container">
  22.         <div class="row">
  23.             <div class="col-md-4">.col-md-4</div>
  24.             <div class="col-md-4 col-md-offset-4">.col-md-4
  25.                 .col-md-offset-4</div>
  26.         </div>
  27.         <div class="row">
  28.             <div class="col-md-3 col-md-offset-3">.col-md-3
  29.                 .col-md-offset-3</div>
  30.             <div class="col-md-3 col-md-offset-3">.col-md-3
  31.                 .col-md-offset-3</div>
  32.         </div>
  33.         <div class="row">
  34.             <div class="col-md-6 col-md-offset-3">.col-md-6
  35.                 .col-md-offset-3</div>
  36.         </div>
  38.     </div>
  39. </body>
  40. </html>

Center 3

（4）嵌套列：使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Demo</title>
  5. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6. <meta http-equiv="description" content="this is my page">
  7. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11. <link rel="stylesheet" href="css/bootstrap.min.css">
  12. <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  13. <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
  14. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  15. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  16. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  17. <script src="js/bootstrap.min.js"></script>
  18. </head>
  19. <body>
  20.     <!--容器  -->
  21.     <div class="container">
  22.         <div class="row">
  23.             <div class="col-md-9">
  24.                 Level 1: .col-md-9
  25.                 <div class="row">
  26.                     <div class="col-md-6">Level 2: .col-md-6</div>
  27.                     <div class="col-md-6">Level 2: .col-md-6</div>
  28.                 </div>
  29.             </div>
  30.         </div>
  31.     </div>
  32. </body>
  33. </html>

Center 4

(5)列排序:通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Demo</title>
  5. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6. <meta http-equiv="description" content="this is my page">
  7. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11. <link rel="stylesheet" href="css/bootstrap.min.css">
  12. <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  13. <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
  14. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  15. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  16. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  17. <script src="js/bootstrap.min.js"></script>
  18. </head>
  19. <body>
  20.     <!--容器  -->
  21.     <div class="container">
  22.         <div class="row">
  23.             <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  24.             <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  25.         </div>
  26.     </div>
  27. </body>
  28. </html>

Center 5

发表评论

表情：
评论列表 （有 0 条评论，118人围观）

还没有评论，来说两句吧...

相关阅读

    相关 bootstrap栅格系统

    全局css样式 设置全局 CSS 样式；基本的 `HTML` 元素均可以通过 `class` 设置样式并得到增强效果；还有先进的栅格系统。 bootstrap为响应式

    快来打我*快来打我*/ 0 赞/ 160 阅读

    相关 2.1Bootstrap3.0栅格系统

    栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用

    怼烎@怼烎@/ 0 赞/ 220 阅读

    相关 Bootstrap栅格系统

    Bootstrap提供了一套响应式、移动设备优先的流式栅格系统 > 一.移动设备优先 > H5项目中，meta用于设置屏幕和设备等宽以及是否运行用户缩放及缩放比例的问

    我不是女神ヾ我不是女神ヾ/ 0 赞/ 412 阅读

    相关 css 栅格系统

    父元素容器设置栅格: 内部子元素会按顺序从左往右依次排列在栅格内 声明栅格容器 display: grid; 父元素得有

    傷城~傷城~/ 0 赞/ 632 阅读