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">
  9. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  10. <link rel="stylesheet" href="css/bootstrap.min.css">
  11. <!-- 可选的Bootstrap主题文件(一般不用引入) -->
  12. <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
  13. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  14. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  15. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16. <script src="js/bootstrap.min.js"></script>
  17. </head>
  18. <body>
  19. <!--容器 -->
  20. <div class="container">
  21. <div class="row">
  22. <div class="col-md-1">.col-md-1</div>
  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>
  35. <div class="row">
  36. <div class="col-md-8">.col-md-8</div>
  37. <div class="col-md-4">.col-md-4</div>
  38. </div>
  39. <div class="row">
  40. <div class="col-md-4">.col-md-4</div>
  41. <div class="col-md-4">.col-md-4</div>
  42. <div class="col-md-4">.col-md-4</div>
  43. </div>
  44. <div class="row">
  45. <div class="col-md-6">.col-md-6</div>
  46. <div class="col-md-6">.col-md-6</div>
  47. </div>
  48. </div>
  49. </body>
  50. </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">
  9. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  10. <link rel="stylesheet" href="css/bootstrap.min.css">
  11. <!-- 可选的Bootstrap主题文件(一般不用引入) -->
  12. <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
  13. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  14. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  15. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16. <script src="js/bootstrap.min.js"></script>
  17. </head>
  18. <body>
  19. <!--容器 -->
  20. <div class="container">
  21. <div class="row">
  22. <div class="col-xs-6 col-md-8">.col-xs-6</div>
  23. <div class="col-xs-6 col-md-4">.col-xs-6</div>
  24. </div>
  25. <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  26. <div class="row">
  27. <div class="col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
  28. <div class="col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
  29. <div class="col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
  30. </div>
  31. <!-- Columns are always 50% wide, on mobile and desktop -->
  32. <div class="row">
  33. <div class="col-xs-6">.col-xs-6</div>
  34. <div class="col-xs-6">.col-xs-6</div>
  35. </div>
  36. </div>
  37. </body>
  38. </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">
  9. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  10. <link rel="stylesheet" href="css/bootstrap.min.css">
  11. <!-- 可选的Bootstrap主题文件(一般不用引入) -->
  12. <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
  13. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  14. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  15. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16. <script src="js/bootstrap.min.js"></script>
  17. </head>
  18. <body>
  19. <!--容器 -->
  20. <div class="container">
  21. <div class="row">
  22. <div class="col-md-4">.col-md-4</div>
  23. <div class="col-md-4 col-md-offset-4">.col-md-4
  24. .col-md-offset-4</div>
  25. </div>
  26. <div class="row">
  27. <div class="col-md-3 col-md-offset-3">.col-md-3
  28. .col-md-offset-3</div>
  29. <div class="col-md-3 col-md-offset-3">.col-md-3
  30. .col-md-offset-3</div>
  31. </div>
  32. <div class="row">
  33. <div class="col-md-6 col-md-offset-3">.col-md-6
  34. .col-md-offset-3</div>
  35. </div>
  36. </div>
  37. </body>
  38. </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">
  9. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  10. <link rel="stylesheet" href="css/bootstrap.min.css">
  11. <!-- 可选的Bootstrap主题文件(一般不用引入) -->
  12. <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
  13. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  14. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  15. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16. <script src="js/bootstrap.min.js"></script>
  17. </head>
  18. <body>
  19. <!--容器 -->
  20. <div class="container">
  21. <div class="row">
  22. <div class="col-md-9">
  23. Level 1: .col-md-9
  24. <div class="row">
  25. <div class="col-md-6">Level 2: .col-md-6</div>
  26. <div class="col-md-6">Level 2: .col-md-6</div>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. </body>
  32. </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">
  9. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  10. <link rel="stylesheet" href="css/bootstrap.min.css">
  11. <!-- 可选的Bootstrap主题文件(一般不用引入) -->
  12. <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
  13. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  14. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  15. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16. <script src="js/bootstrap.min.js"></script>
  17. </head>
  18. <body>
  19. <!--容器 -->
  20. <div class="container">
  21. <div class="row">
  22. <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  23. <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  24. </div>
  25. </div>
  26. </body>
  27. </html>

Center 5

发表评论

表情:
评论列表 (有 0 条评论,118人围观)

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

相关阅读

    相关 bootstrap系统

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

    相关 2.1Bootstrap3.0系统

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

    相关 Bootstrap系统

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

    相关 css 系统

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