查看: 817|回复: 0

[DIV/CSS] bootstrap 基础(二)

发表于 2017-9-24 08:00:05
尚学堂AD
1 栅格系统偏移
  • 栅格系统的偏移只能向右:col-xs-offset-x。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. div[class*='col-md']{
  25. border:1px solid #1b6d85;
  26. }
  27. </style>
  28. </head>
  29. <body style="background-color: #3c3c3c">
  30. <div class="container-fluid" style="background-color: white">
  31. <div class="row">
  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 class="col-md-1">col-md-1</div>
  36. <div class="col-md-1">col-md-1</div>
  37. <div class="col-md-1">col-md-1</div>
  38. <div class="col-md-1">col-md-1</div>
  39. <div class="col-md-1">col-md-1</div>
  40. <div class="col-md-1">col-md-1</div>
  41. <div class="col-md-1">col-md-1</div>
  42. <div class="col-md-1">col-md-1</div>
  43. <div class="col-md-1">col-md-1</div>
  44. </div>
  45. <!--
  46. pc端大屏幕显示四张图片,pc端中等屏幕显示三张图片,平板显示二张图片,手机端显示一张图片
  47. -->
  48. <div class="row">
  49. <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  50. <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
  51. <p>
  52. 美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
  53. </p>
  54. </div>
  55. <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  56. <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
  57. <p>
  58. 美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
  59. </p>
  60. </div>
  61. <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  62. <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
  63. <p>
  64. 美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
  65. </p>
  66. </div>
  67. <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  68. <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
  69. <p>
  70. 美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
  71. </p>
  72. </div>
  73. </div>
  74. <div class="row">
  75. <div class="col-md-4 col-md-offset-6" >4</div>
  76. <div class="col-md-2">2</div>
  77. </div>
  78. </div>
  79. </body>
  80. </html>
复制代码

2 栅格系统的排序
  • col-xs-pull-5 向左偏移5个栅格,pull是拉取的意思。
  • col-xs-push-5 向右偏移5个栅格,push是推的意思。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. div[class*='col-md']{
  25. border:1px solid #1b6d85;
  26. }
  27. </style>
  28. </head>
  29. <body style="background-color: #3c3c3c">
  30. <div class="container-fluid" style="background-color: white">
  31. <div class="row">
  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 class="col-md-1">col-md-1</div>
  36. <div class="col-md-1">col-md-1</div>
  37. <div class="col-md-1">col-md-1</div>
  38. <div class="col-md-1">col-md-1</div>
  39. <div class="col-md-1">col-md-1</div>
  40. <div class="col-md-1">col-md-1</div>
  41. <div class="col-md-1">col-md-1</div>
  42. <div class="col-md-1">col-md-1</div>
  43. <div class="col-md-1">col-md-1</div>
  44. </div>
  45. <!--
  46. pc端大屏幕显示四张图片,pc端中等屏幕显示三张图片,平板显示二张图片,手机端显示一张图片
  47. -->
  48. <div class="row">
  49. <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  50. <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
  51. <p>
  52. 美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
  53. </p>
  54. </div>
  55. <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  56. <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
  57. <p>
  58. 美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
  59. </p>
  60. </div>
  61. <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  62. <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
  63. <p>
  64. 美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
  65. </p>
  66. </div>
  67. <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  68. <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
  69. <p>
  70. 美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
  71. </p>
  72. </div>
  73. </div>
  74. <div class="row">
  75. <div class="col-md-4">a</div>
  76. <div class="col-md-4">b</div>
  77. <div class="col-md-4">c</div>
  78. </div>
  79. <div class="row">
  80. <div class="col-md-4 col-md-push-4">a</div>
  81. <div class="col-md-4 col-md-pull-4">b</div>
  82. <div class="col-md-4">c</div>
  83. </div>
  84. </div>
  85. </body>
  86. </html>
复制代码

3 辅助类
  • 情境文本颜色
    • class="text-muted" 柔和色
    • class="text-success"
    • class="text-parimary"
    • class="text-info"
    • class="text-warning"
    • class="text-danger"  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <div class="container-fluid" style="background-color:#e6e6e6">
  28. <p class="text-muted">平林漠漠烟如织</p>
  29. <p class="text-primary">寒山一带伤心碧</p>
  30. <p class="text-success">暝色入高楼</p>
  31. <p class="text-info">有人楼上愁</p>
  32. <p class="text-warning">玉阶空伫立</p>
  33. <p class="text-danger">宿鸟归飞急</p>
  34. </div>
  35. </body>
  36. </html>
复制代码

  • 情境背景颜色
    • class="bg-primary"
    • class="bg-info"
    • class="bg-success"
    • class="bg-warning"
    • class="bg-danger"  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <div class="container-fluid" style="background-color:#e6e6e6">
  28. <!-- 文本颜色 -->
  29. <p class="text-muted">平林漠漠烟如织</p>
  30. <p class="text-primary">寒山一带伤心碧</p>
  31. <p class="text-success">暝色入高楼</p>
  32. <p class="text-info">有人楼上愁</p>
  33. <p class="text-warning">玉阶空伫立</p>
  34. <p class="text-danger">宿鸟归飞急</p>
  35. <!-- 背景颜色 -->
  36. <p class="bg-primary">寒山一带伤心碧</p>
  37. <p class="bg-success">暝色入高楼</p>
  38. <p class="bg-info">有人楼上愁</p>
  39. <p class="bg-warning">玉阶空伫立</p>
  40. <p class="bg-danger">宿鸟归飞急</p>
  41. </div>
  42. </body>
  43. </html>
复制代码

  • 下拉小三角
    •   
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <div class="container-fluid" style="background-color:#e6e6e6">
  28. <!-- 文本颜色 -->
  29. <p class="text-muted">平林漠漠烟如织</p>
  30. <p class="text-primary">寒山一带伤心碧</p>
  31. <p class="text-success">暝色入高楼</p>
  32. <p class="text-info">有人楼上愁</p>
  33. <p class="text-warning">玉阶空伫立</p>
  34. <p class="text-danger">宿鸟归飞急</p>
  35. <!-- 背景颜色 -->
  36. <p class="bg-primary">寒山一带伤心碧</p>
  37. <p class="bg-success">暝色入高楼</p>
  38. <p class="bg-info">有人楼上愁</p>
  39. <p class="bg-warning">玉阶空伫立</p>
  40. <p class="bg-danger">宿鸟归飞急</p>
  41. <!-- 下拉小三角 -->
  42. <span class="caret"></span>
  43. </div>
  44. </body>
  45. </html>
复制代码

  • 快速浮动
    • class="pull-left" 向左浮动,pull的意思是拉
    • class="pull-right" 向右浮动  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. .top{
  25. width:500px;
  26. border:1px solid blue;
  27. margin: 10px auto;
  28. }
  29. .pull-left{
  30. width: 200px;
  31. height: 200px;
  32. background-color: #b92c28;
  33. }
  34. .pull-right{
  35. width: 200px;
  36. height: 200px;
  37. background-color: #2b542c;
  38. }
  39. </style>
  40. </head>
  41. <body >
  42. <div class="container-fluid" style="background-color:#e6e6e6">
  43. <div class="top">
  44. <div class="pull-left">左边哦</div>
  45. <div class="pull-right">右边啦</div>
  46. </div>
  47. </div>
  48. </body>
  49. </html>
复制代码

  • 清除浮动:在父元素上添加overflow:hidden样式。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. .top{
  25. width:500px;
  26. border:1px solid blue;
  27. margin: 10px auto;
  28. overflow: hidden;
  29. }
  30. .pull-left{
  31. width: 200px;
  32. height: 200px;
  33. background-color: #b92c28;
  34. }
  35. .pull-right{
  36. width: 200px;
  37. height: 200px;
  38. background-color: #2b542c;
  39. }
  40. </style>
  41. </head>
  42. <body >
  43. <div class="container-fluid" style="background-color:#e6e6e6">
  44. <div class="top">
  45. <div class="pull-left">左边哦</div>
  46. <div class="pull-right">右边啦</div>
  47. </div>
  48. </div>
  49. </body>
  50. </html>
复制代码

  • 清除浮动:在父元素上直接添加class="clearfix"。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. .top{
  25. width:500px;
  26. border:1px solid blue;
  27. margin: 10px auto;
  28. }
  29. .pull-left{
  30. width: 200px;
  31. height: 200px;
  32. background-color: #b92c28;
  33. }
  34. .pull-right{
  35. width: 200px;
  36. height: 200px;
  37. background-color: #2b542c;
  38. }
  39. </style>
  40. </head>
  41. <body >
  42. <div class="container-fluid" style="background-color:#e6e6e6">
  43. <div class="top clearfix">
  44. <div class="pull-left">左边哦</div>
  45. <div class="pull-right">右边啦</div>
  46. </div>
  47. </div>
  48. </body>
  49. </html>
复制代码

4 表单 4.1 基本表单
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form>
  30. <label for="email">邮箱</label>
  31. <input type="email" name="email" id="email" />
  32. </form>
  33. </div>
  34. </body>
  35. </html>
复制代码

  • class="form-control"给表单增加样式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form>
  30. <label for="email">邮箱</label>
  31. <input type="email" name="email" id="email" class="form-control" />
  32. </form>
  33. </div>
  34. </body>
  35. </html>
复制代码

  • class="form-group" 让label标签和input标签形成一个表单组。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form>
  30. <div class="form-group">
  31. <label for="email">邮箱</label>
  32. <input type="email" name="email" id="email" class="form-control"/>
  33. </div>
  34. <div class="form-group">
  35. <label for="password">密码</label>
  36. <input type="password" name="password" id="password" class="form-control"/>
  37. </div>
  38. </form>
  39. </div>
  40. </body>
  41. </html>
复制代码

  • class=“form-control” 是给输入框加,比如input、textare标签。
  • class="form-group" 是给输入框的父元素加,即外面的盒子加
4.2 多选框
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form>
  30. <!-- 基本表单 -->
  31. <div class="form-group">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label ><input type="checkbox" name="hobby" value="唱歌" />唱歌</label>
  46. <label><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. </form>
  51. </div>
  52. </body>
  53. </html>
复制代码

  • class="checkbox-inline" 是的每个多选框是一行
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form>
  30. <!-- 基本表单 -->
  31. <div class="form-group">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="唱歌" />唱歌</label>
  46. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. </form>
  51. </div>
  52. </body>
  53. </html>
复制代码

  • 禁止:原先直接在input标签上加disabled

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form>
  30. <!-- 基本表单 -->
  31. <div class="form-group">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="唱歌" disabled />唱歌</label>
  46. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. </form>
  51. </div>
  52. </body>
  53. </html>
复制代码
    • 这种方式只能在多选框上显示禁止效果,不能和文字一起显示禁止效果。  
    • 在多选框的父元素上增加class="disabled",这样就能实现文字鼠标任意滑动都能实现禁止效果。   

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form>
  30. <!-- 基本表单 -->
  31. <div class="form-group">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
  46. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. </form>
  51. </div>
  52. </body>
  53. </html>
复制代码
  • class="checkbox-inline"是给lable标签加,给input和内容加样式。
4.3 单选框
  • 没有加样式的单选框
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form>
  30. <!-- 基本表单 -->
  31. <div class="form-group">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
  46. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. <!-- 单选框 -->
  51. <div class="form-group">
  52. <label><input type="radio" name="sex" value="男"/>男 </label>
  53. <label><input type="radio" name="sex" value="女"/>女 </label>
  54. </div>
  55. </form>
  56. </div>
  57. </body>
  58. </html>
复制代码

  • class="radio-inline"
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form>
  30. <!-- 基本表单 -->
  31. <div class="form-group">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
  46. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. <!-- 单选框 -->
  51. <div class="form-group">
  52. <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
  53. <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
  54. </div>
  55. </form>
  56. </div>
  57. </body>
  58. </html>
复制代码

class="radio-inline" 给label标签加,给input和内容加样

4.4 输入框组
  • 比如,像下面的(某宝截图)。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form class="form-horizontal">
  30. <!-- 基本表单 -->
  31. <div class="form-group ">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
  46. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. <!-- 单选框 -->
  51. <div class="form-group">
  52. <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
  53. <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
  54. </div>
  55. <!-- 输入框组 -->
  56. <div class="">
  57. <span >搜索</span>
  58. <input type="search" name="search" id="search" class="form-control"/>
  59. </div>
  60. </form>
  61. </div>
  62. </body>
  63. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form class="form-horizontal">
  30. <!-- 基本表单 -->
  31. <div class="form-group ">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
  46. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. <!-- 单选框 -->
  51. <div class="form-group">
  52. <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
  53. <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
  54. </div>
  55. <!-- 输入框组 -->
  56. <div class="">
  57. <!-- addon在英文中是插件的意思 -->
  58. <span class="input-group-addon">搜索</span>
  59. <input type="search" name="search" id="search" class="form-control"/>
  60. </div>
  61. </form>
  62. </div>
  63. </body>
  64. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form class="form-horizontal">
  30. <!-- 基本表单 -->
  31. <div class="form-group ">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
  46. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. <!-- 单选框 -->
  51. <div class="form-group">
  52. <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
  53. <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
  54. </div>
  55. <!-- 输入框组 -->
  56. <div class="input-group">
  57. <!-- addon在英文中是插件的意思 -->
  58. <span class="input-group-addon">搜索</span>
  59. <input type="search" name="search" id="search" class="form-control"/>
  60. </div>
  61. </form>
  62. </div>
  63. </body>
  64. </html>
复制代码

  • 温馨小提示:form-group是为了让每一个表单项都产生一个margin值,不信,请看下面的代码。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form class="form-horizontal">
  30. <!-- 基本表单 -->
  31. <div class="form-group ">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
  46. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. <!-- 单选框 -->
  51. <div class="form-group">
  52. <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
  53. <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
  54. </div>
  55. <!-- 输入框组 -->
  56. <div class="input-group">
  57. <!-- addon在英文中是插件的意思 -->
  58. <span class="input-group-addon">搜索</span>
  59. <input type="search" name="search" id="search" class="form-control"/>
  60. </div>
  61. <div class="input-group">
  62. <input type="search" name="sc" id="sc" class="form-control"/>
  63. <div class="input-group-addon">查询内容</div>
  64. </div>
  65. </form>
  66. </div>
  67. </body>
  68. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form class="form-horizontal">
  30. <!-- 基本表单 -->
  31. <div class="form-group ">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
  46. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. <!-- 单选框 -->
  51. <div class="form-group">
  52. <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
  53. <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
  54. </div>
  55. <div class="form-group">
  56. <!-- 输入框组 -->
  57. <div class="input-group">
  58. <!-- addon在英文中是插件的意思 -->
  59. <span class="input-group-addon">搜索</span>
  60. <input type="search" name="search" id="search" class="form-control"/>
  61. </div>
  62. </div>
  63. <div class="form-group">
  64. <div class="input-group">
  65. <input type="search" name="sc" id="sc" class="form-control"/>
  66. <div class="input-group-addon">查询内容</div>
  67. </div>
  68. </div>
  69. </form>
  70. </div>
  71. </body>
  72. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form class="form-horizontal">
  30. <!-- 基本表单 -->
  31. <div class="form-group ">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
  46. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. <!-- 单选框 -->
  51. <div class="form-group">
  52. <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
  53. <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
  54. </div>
  55. <div class="form-group">
  56. <!-- 输入框组 -->
  57. <div class="input-group">
  58. <!-- addon在英文中是插件的意思 -->
  59. <span class="input-group-addon">搜索</span>
  60. <input type="search" name="search" id="search" class="form-control"/>
  61. </div>
  62. </div>
  63. <div class="form-group">
  64. <div class="input-group">
  65. <input type="search" name="sc" id="sc" class="form-control"/>
  66. <div class="input-group-addon">查询内容</div>
  67. </div>
  68. </div>
  69. <!--
  70. 带有搜索图标的
  71. glyphicon 图标,默认
  72. glyphicon-search 搜索图标
  73. -->
  74. <div class="form-group">
  75. <div class="input-group">
  76. <span class="input-group-addon">
  77. <span class="glyphicon glyphicon-search"></span>
  78. </span>
  79. <input type="search" name="sea" id="sea" class="form-control"/>
  80. </div>
  81. </div>
  82. </form>
  83. </div>
  84. </body>
  85. </html>
复制代码

4.5 响应式表单
  • 表单由纵向变为横向(不用)
  • 在form标签上添加class="form-inline"
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <form class="form-inline">
  30. <!-- 基本表单 -->
  31. <div class="form-group ">
  32. <label for="email">邮箱</label>
  33. <input type="email" name="email" id="email" class="form-control"/>
  34. </div>
  35. <div class="form-group">
  36. <label for="password">密码</label>
  37. <input type="password" name="password" id="password" class="form-control"/>
  38. </div>
  39. <div class="form-group">
  40. <label for="telphone">手机号</label>
  41. <input type="text" name="telphone" id="telphone" class="form-control"/>
  42. </div>
  43. <!-- 多选框 -->
  44. <div class="form-group">
  45. <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
  46. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  49. </div>
  50. <!-- 单选框 -->
  51. <div class="form-group">
  52. <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
  53. <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
  54. </div>
  55. <div class="form-group">
  56. <!-- 输入框组 -->
  57. <div class="input-group">
  58. <!-- addon在英文中是插件的意思 -->
  59. <span class="input-group-addon">搜索</span>
  60. <input type="search" name="search" id="search" class="form-control"/>
  61. </div>
  62. </div>
  63. <div class="form-group">
  64. <div class="input-group">
  65. <input type="search" name="sc" id="sc" class="form-control"/>
  66. <div class="input-group-addon">查询内容</div>
  67. </div>
  68. </div>
  69. <!--
  70. 带有搜索图标的
  71. glyphicon 图标,默认
  72. glyphicon-search 搜索图标
  73. -->
  74. <div class="form-group">
  75. <div class="input-group">
  76. <span class="input-group-addon">
  77. <span class="glyphicon glyphicon-search"></span>
  78. </span>
  79. <input type="search" name="sea" id="sea" class="form-control"/>
  80. </div>
  81. </div>
  82. </form>
  83. </div>
  84. </body>
  85. </html>
复制代码

  • 给form标签添加class="form-horizontal" ,而且要结合栅格系统,形成响应式表单。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <!-- 响应式表单 -->
  30. <form class="form-horizontal">
  31. <!-- 基本表单 -->
  32. <div class="form-group ">
  33. <label for="email">邮箱</label>
  34. <input type="email" name="email" id="email" class="form-control"/>
  35. </div>
  36. <div class="form-group">
  37. <label for="password">密码</label>
  38. <input type="password" name="password" id="password" class="form-control"/>
  39. </div>
  40. <div class="form-group">
  41. <label for="telphone">手机号</label>
  42. <input type="text" name="telphone" id="telphone" class="form-control"/>
  43. </div>
  44. <!-- 多选框 -->
  45. <div class="form-group">
  46. <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
  47. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
  48. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
  49. <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
  50. </div>
  51. <!-- 单选框 -->
  52. <div class="form-group">
  53. <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
  54. <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
  55. </div>
  56. <div class="form-group">
  57. <!-- 输入框组 -->
  58. <div class="input-group">
  59. <!-- addon在英文中是插件的意思 -->
  60. <span class="input-group-addon">搜索</span>
  61. <input type="search" name="search" id="search" class="form-control"/>
  62. </div>
  63. </div>
  64. <div class="form-group">
  65. <div class="input-group">
  66. <input type="search" name="sc" id="sc" class="form-control"/>
  67. <div class="input-group-addon">查询内容</div>
  68. </div>
  69. </div>
  70. <!--
  71. 带有搜索图标的
  72. glyphicon 图标,默认
  73. glyphicon-search 搜索图标
  74. -->
  75. <div class="form-group">
  76. <div class="input-group">
  77. <span class="input-group-addon">
  78. <span class="glyphicon glyphicon-search"></span>
  79. </span>
  80. <input type="search" name="sea" id="sea" class="form-control"/>
  81. </div>
  82. </div>
  83. </form>
  84. </div>
  85. </body>
  86. </html>
复制代码

  • 结合栅格系统的响应式表单
    • 传统方式:  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <!-- 响应式表单 -->
  30. <form class="form-horizontal">
  31. <div class="row">
  32. <div class="form-group">
  33. <div class="col-md-2 col-lg-2 col-xs-2 col-sm-2 text-right text-primary">
  34. <label for="username">姓名</label>
  35. </div>
  36. <div class="col-md-10 col-lg-10 col-xs-10 col-sm-10">
  37. <input type="text" name="username" id="username" placeholder="请输入姓名" class="form-control"/>
  38. </div>
  39. </div>
  40. </div>
  41. <div class="row">
  42. <div class="form-group">
  43. <div class="col-md-2 col-lg-2 col-xs-2 col-sm-2 text-right text-primary">
  44. <label for="password">密码</label>
  45. </div>
  46. <div class="col-md-10 col-lg-10 col-xs-10 col-sm-10">
  47. <input type="password" name="password" id="password" placeholder="请输入密码" class="form-control"/>
  48. </div>
  49. </div>
  50. </div>
  51. </form>
  52. </div>
  53. </body>
  54. </html>
复制代码

    • 其实,和表单结合的话,不需要些
        
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <!-- 响应式表单 -->
  30. <form class="form-horizontal">
  31. <div class="form-group">
  32. <label class="col-md-2 col-xs-2 col-lg-2 col-sm-2 text-right text-primary" for="username">姓名</label>
  33. <div class="col-md-10 col-xs-10 col-lg-10 col-sm-10">
  34. <input type="text" class="form-control" name="username" id="username" placeholder="请输入姓名"/>
  35. </div>
  36. </div>
  37. <div class="form-group">
  38. <label class="col-md-2 col-xs-2 col-lg-2 col-sm-2 text-right text-primary" for="password">密码</label>
  39. <div class="col-md-10 col-xs-10 col-lg-10 col-sm-10">
  40. <input type="text" class="form-control" name="password" id="password" placeholder="请输入密码"/>
  41. </div>
  42. </div>
  43. </form>
  44. </div>
  45. </body>
  46. </html>
复制代码

5 按钮
  • 可以加按钮效果的标签:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <button>新增</button>
  30. <input type="button" value="修改"/>
  31. <a href="#">删除</a>
  32. </div>
  33. </body>
  34. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <button class="btn">新增</button>
  30. <input type="button" class="btn" value="修改"/>
  31. <a href="#" class="btn">删除</a>
  32. </div>
  33. </body>
  34. </html>
复制代码

  • class="btn"是按钮样式的基类。
    • class="btn btn-default"
    • class="btn btn-primary"
    • class="btn btn-success"
    • class="btn btn-info"
    • class="btn btn-warning"
    • class="btn btn-danger"  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <button class="btn btn-default">新增</button>
  30. <input type="button" class="btn btn-default" value="修改"/>
  31. <a href="#" class="btn btn-default">删除</a>
  32. </div>
  33. </body>
  34. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <button class="btn btn-default">新增</button>
  30. <input type="button" class="btn btn-default" value="修改"/>
  31. <a href="#" class="btn btn-default">删除</a>
  32. <button class="btn">1</button>
  33. <button class="btn btn-default">2</button>
  34. <button class="btn btn-primary">3</button>
  35. <button class="btn btn-success">4</button>
  36. <button class="btn btn-info">5</button>
  37. <button class="btn btn-warning">6</button>
  38. <button class="btn btn-danger">7</button>
  39. </div>
  40. </body>
  41. </html>
复制代码

  • class="btn active"按钮激活
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <button class="btn btn-default">新增</button>
  30. <input type="button" class="btn btn-default" value="修改"/>
  31. <a href="#" class="btn btn-default">删除</a>
  32. <button class="btn">1</button>
  33. <button class="btn btn-default">2</button>
  34. <button class="btn btn-primary">3</button>
  35. <button class="btn btn-success">4</button>
  36. <button class="btn btn-info">5</button>
  37. <button class="btn btn-warning">6</button>
  38. <button class="btn btn-danger">7</button>
  39. <button class="btn btn-success">成功?</button>
  40. <button class="btn btn-success active">必须成功</button>
  41. </div>
  42. </body>
  43. </html>
复制代码

  • class="btn btn-lg" 按钮大小
  • class="btn btn-sm" 按钮大小
  • class="btn btn-xs" 按钮大小
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <button class="btn btn-default">新增</button>
  30. <input type="button" class="btn btn-default" value="修改"/>
  31. <a href="#" class="btn btn-default">删除</a>
  32. <br/>
  33. <button class="btn">1</button>
  34. <button class="btn btn-default">2</button>
  35. <button class="btn btn-primary">3</button>
  36. <button class="btn btn-success">4</button>
  37. <button class="btn btn-info">5</button>
  38. <button class="btn btn-warning">6</button>
  39. <button class="btn btn-danger">7</button>
  40. <br/>
  41. <button class="btn btn-success">成功?</button>
  42. <button class="btn btn-success active">必须成功</button>
  43. <br/>
  44. <button class="btn btn-default btn-lg">大</button>
  45. <button class="btn btn-default btn-xm">大</button>
  46. <button class="btn btn-default btn-sm">大</button>
  47. </div>
  48. </body>
  49. </html>
复制代码

  • class="btn-group" 按钮组
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <button class="btn btn-default">新增</button>
  30. <input type="button" class="btn btn-default" value="修改"/>
  31. <a href="#" class="btn btn-default">删除</a>
  32. <br/>
  33. <button class="btn">1</button>
  34. <button class="btn btn-default">2</button>
  35. <button class="btn btn-primary">3</button>
  36. <button class="btn btn-success">4</button>
  37. <button class="btn btn-info">5</button>
  38. <button class="btn btn-warning">6</button>
  39. <button class="btn btn-danger">7</button>
  40. <br/>
  41. <button class="btn btn-success">成功?</button>
  42. <button class="btn btn-success active">必须成功</button>
  43. <br/>
  44. <button class="btn btn-default btn-lg">大</button>
  45. <button class="btn btn-default btn-xm">大</button>
  46. <button class="btn btn-default btn-sm">大</button>
  47. <button class="btn btn-default">大</button>
  48. <br/>
  49. <!-- 按钮组 -->
  50. <div class="">
  51. <button class="btn btn-success">新增内容</button>
  52. <button class="btn btn-success">修改内容</button>
  53. <button class="btn btn-success">查询内容</button>
  54. </div>
  55. </div>
  56. </body>
  57. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 表单 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <button class="btn btn-default">新增</button>
  30. <input type="button" class="btn btn-default" value="修改"/>
  31. <a href="#" class="btn btn-default">删除</a>
  32. <br/>
  33. <button class="btn">1</button>
  34. <button class="btn btn-default">2</button>
  35. <button class="btn btn-primary">3</button>
  36. <button class="btn btn-success">4</button>
  37. <button class="btn btn-info">5</button>
  38. <button class="btn btn-warning">6</button>
  39. <button class="btn btn-danger">7</button>
  40. <br/>
  41. <button class="btn btn-success">成功?</button>
  42. <button class="btn btn-success active">必须成功</button>
  43. <br/>
  44. <button class="btn btn-default btn-lg">大</button>
  45. <button class="btn btn-default btn-xm">大</button>
  46. <button class="btn btn-default btn-sm">大</button>
  47. <button class="btn btn-default">大</button>
  48. <br/>
  49. <!-- 按钮组 -->
  50. <div class="btn-group">
  51. <button class="btn btn-success">新增内容</button>
  52. <button class="btn btn-success">修改内容</button>
  53. <button class="btn btn-success">查询内容</button>
  54. </div>
  55. </div>
  56. </body>
  57. </html>
复制代码

6 缩略图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <div class="container-fluid" style="background-color:#e6e6e6">
  28. <!-- 缩略图 -->
  29. <div class="row">
  30. <!-- 第一个缩略图 -->
  31. <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
  32. <!-- 圆角边框 -->
  33. <div class="thumbnail">
  34. <img src="img/timg.jpg" class="img-responsive"/>
  35. <div class="caption">
  36. <h3 class="bg-info">美女啊</h3>
  37. <p class="text-muted">美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
  38. </div>
  39. <div class="text-right">
  40. <button class="btn btn-success btn-sm">哈哈</button>
  41. <button class="btn btn-info btn-xs">呵呵</button>
  42. </div>
  43. </div>
  44. </div>
  45. <!-- 第二个缩略图 -->
  46. <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
  47. <!-- 圆角边框 -->
  48. <div class="thumbnail">
  49. <img src="img/timg.jpg" class="img-responsive"/>
  50. <div class="caption">
  51. <h3 class="bg-info">美女啊</h3>
  52. <p class="text-muted">美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
  53. </div>
  54. <div class="text-right">
  55. <button class="btn btn-success btn-sm">哈哈</button>
  56. <button class="btn btn-info btn-xs">呵呵</button>
  57. </div>
  58. </div>
  59. </div>
  60. <!-- 第三个缩略图 -->
  61. <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
  62. <!-- 圆角边框 -->
  63. <div class="thumbnail">
  64. <img src="img/timg.jpg" class="img-responsive"/>
  65. <div class="caption">
  66. <h3 class="bg-info">美女啊</h3>
  67. <p class="text-muted">美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
  68. </div>
  69. <div class="text-right">
  70. <button class="btn btn-success btn-sm">哈哈</button>
  71. <button class="btn btn-info btn-xs">呵呵</button>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </body>
  78. </html>
复制代码

7 下拉菜单
  • class="dropdown-menu" 给下拉列表中的内容加,ul加样式
  • class="dropdown" 包含触发的按钮和下拉列表加样式--父元素
  • class="data-toggle" 按钮的触发器
  • class="dropdown-menu-left" 下拉列表为左对齐
  • class="dropdown-menu-right" 下拉列表为左对齐
  • class="divider" 分割线 给li加,li标签内部没有内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 下拉列表 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <h1 class="page-header">下拉列表</h1>
  30. <div class="">
  31. <button class="btn btn-default ">
  32. 城市<span class="caret"></span>
  33. </button>
  34. <ul >
  35. <li><a href="#">北京</a></li>
  36. <li><a href="#">南京</a></li>
  37. <li><a href="#">天津</a></li>
  38. <li><a href="#">上海</a></li>
  39. <li><a href="#">杭州</a></li>
  40. </ul>
  41. </div>
  42. </div>
  43. </body>
  44. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 下拉列表 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <h1 class="page-header">下拉列表</h1>
  30. <div class="">
  31. <button class="btn btn-default">
  32. 城市<span class="caret"></span>
  33. </button>
  34. <!-- 给ul加上class="dropdown-menu" -->
  35. <ul class="dropdown-menu">
  36. <li><a href="#">北京</a></li>
  37. <li><a href="#">南京</a></li>
  38. <li><a href="#">天津</a></li>
  39. <li><a href="#">上海</a></li>
  40. <li><a href="#">杭州</a></li>
  41. </ul>
  42. </div>
  43. </div>
  44. </body>
  45. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 下拉列表 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <h1 class="page-header">下拉列表</h1>
  30. <!-- 给ul的父元素加class="dropdown" -->
  31. <div class="dropdown">
  32. <button class="btn btn-default">
  33. 城市<span class="caret"></span>
  34. </button>
  35. <!-- 给ul加上class="dropdown-menu" -->
  36. <ul class="dropdown-menu">
  37. <li><a href="#">北京</a></li>
  38. <li><a href="#">南京</a></li>
  39. <li><a href="#">天津</a></li>
  40. <li><a href="#">上海</a></li>
  41. <li><a href="#">杭州</a></li>
  42. </ul>
  43. </div>
  44. </div>
  45. </body>
  46. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 下拉列表 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <h1 class="page-header">下拉列表</h1>
  30. <!-- 给ul的父元素加class="dropdown" -->
  31. <div class="dropdown">
  32. <!-- 给按钮增加触发器data-toggle="dropdown" -->
  33. <button class="btn btn-default" data-toggle="dropdown">
  34. 城市<span class="caret"></span>
  35. </button>
  36. <!-- 给ul加上class="dropdown-menu" -->
  37. <ul class="dropdown-menu">
  38. <li><a href="#">北京</a></li>
  39. <li><a href="#">南京</a></li>
  40. <li><a href="#">天津</a></li>
  41. <li><a href="#">上海</a></li>
  42. <li><a href="#">杭州</a></li>
  43. </ul>
  44. </div>
  45. </div>
  46. </body>
  47. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 下拉列表 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <h1 class="page-header">下拉列表</h1>
  30. <!-- 给ul的父元素加class="dropdown" -->
  31. <div class="dropdown">
  32. <!-- 给按钮增加触发器data-toggle="dropdown" -->
  33. <button class="btn btn-default" data-toggle="dropdown">
  34. 城市<span class="caret"></span>
  35. </button>
  36. <!-- 给ul加上class="dropdown-menu" -->
  37. <ul class="dropdown-menu">
  38. <li><a href="#">北京</a></li>
  39. <li><a href="#">南京</a></li>
  40. <!-- 加分割线class="divider" -->
  41. <li class="divider"></li>
  42. <li><a href="#">天津</a></li>
  43. <li><a href="#">上海</a></li>
  44. <li><a href="#">杭州</a></li>
  45. </ul>
  46. </div>
  47. </div>
  48. </body>
  49. </html>
复制代码

8 标签页
  • class="nav" 给ul加,是标签的基类。
  • class="nav nav-tabs"
  • class="nav nav-pills" 胶囊式标签页
  • class="nav nav-pills nav-stacked" 横向胶囊式标签页
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 标签页 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <ul>
  30. <li>
  31. <a href="#">Home</a>
  32. </li>
  33. <li>
  34. <a href="#">Profile</a>
  35. </li>
  36. <li>
  37. <a href="#">Messages</a>
  38. </li>
  39. </ul>
  40. </div>
  41. </body>
  42. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 标签页 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <ul class="nav nav-tabs">
  30. <li>
  31. <a href="#">Home</a>
  32. </li>
  33. <li>
  34. <a href="#">Profile</a>
  35. </li>
  36. <li>
  37. <a href="#">Messages</a>
  38. </li>
  39. </ul>
  40. </div>
  41. </body>
  42. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 标签页 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <ul class="nav nav-tabs">
  30. <li class="active">
  31. <a href="#">Home</a>
  32. </li>
  33. <li>
  34. <a href="#">Profile</a>
  35. </li>
  36. <li>
  37. <a href="#">Messages</a>
  38. </li>
  39. </ul>
  40. </div>
  41. </body>
  42. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 标签页 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <ul class="nav nav-pills">
  30. <li class="active">
  31. <a href="#">Home</a>
  32. </li>
  33. <li>
  34. <a href="#">Profile</a>
  35. </li>
  36. <li>
  37. <a href="#">Messages</a>
  38. </li>
  39. </ul>
  40. </div>
  41. </body>
  42. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 标签页 -->
  28. <div class="container" style="background-color:#e6e6e6">
  29. <ul class="nav nav-pills nav-stacked">
  30. <li class="active">
  31. <a href="#">Home</a>
  32. </li>
  33. <li>
  34. <a href="#">Profile</a>
  35. </li>
  36. <li>
  37. <a href="#">Messages</a>
  38. </li>
  39. </ul>
  40. </div>
  41. </body>
  42. </html>
复制代码

9 导航
  • class="navbar" 导航栏的基类,用于
  • class="navbar navbar-default" 导航栏的默认样式,用于
  • class="navbar container"是
  • class="navbar navbar-header" 导航栏的头部样式。
  • class="navbar navbar-fixed-top" 导航栏固定到顶部,用于
  • class="navbar navbar-fixed-bottom" 导航栏固定到底部 ,用于
  • class="navbar navbar-inverse" 可以实现反色导航栏,用于
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 导航 -->
  28. <nav class="navbar navbar-default">
  29. 11111
  30. </nav>
  31. </body>
  32. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 导航 -->
  28. <nav class="navbar navbar-default navbar-fixed-top">
  29. 11111
  30. </nav>
  31. <div class="container">
  32. <h3>我家大宝宝</h3>
  33. <p>
  34. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  35. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  36. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  37. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  38. 我家大宝宝我家大宝宝
  39. </p>
  40. <h3>我家大宝宝</h3>
  41. <p>
  42. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  43. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  44. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  45. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  46. 我家大宝宝我家大宝宝
  47. </p>
  48. <h3>我家大宝宝</h3>
  49. <p>
  50. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  51. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  52. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  53. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  54. 我家大宝宝我家大宝宝
  55. </p>
  56. <h3>我家大宝宝</h3>
  57. <p>
  58. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  59. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  60. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  61. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  62. 我家大宝宝我家大宝宝
  63. </p> <h3>我家大宝宝</h3>
  64. <p>
  65. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  66. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  67. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  68. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  69. 我家大宝宝我家大宝宝
  70. </p> <h3>我家大宝宝</h3>
  71. <p>
  72. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  73. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  74. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  75. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  76. 我家大宝宝我家大宝宝
  77. </p> <h3>我家大宝宝</h3>
  78. <p>
  79. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  80. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  81. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  82. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  83. 我家大宝宝我家大宝宝
  84. </p> <h3>我家大宝宝</h3>
  85. <p>
  86. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  87. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  88. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  89. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  90. 我家大宝宝我家大宝宝
  91. </p> <h3>我家大宝宝</h3>
  92. <p>
  93. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  94. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  95. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  96. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  97. 我家大宝宝我家大宝宝
  98. </p> <h3>我家大宝宝</h3>
  99. <p>
  100. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  101. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  102. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  103. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  104. 我家大宝宝我家大宝宝
  105. </p> <h3>我家大宝宝</h3>
  106. <p>
  107. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  108. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  109. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  110. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  111. 我家大宝宝我家大宝宝
  112. </p>
  113. </div>
  114. </body>
  115. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 导航 -->
  28. <nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
  29. 11111
  30. </nav>
  31. <div class="container">
  32. <h3>我家大宝宝</h3>
  33. <p>
  34. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  35. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  36. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  37. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  38. 我家大宝宝我家大宝宝
  39. </p>
  40. <h3>我家大宝宝</h3>
  41. <p>
  42. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  43. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  44. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  45. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  46. 我家大宝宝我家大宝宝
  47. </p>
  48. <h3>我家大宝宝</h3>
  49. <p>
  50. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  51. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  52. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  53. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  54. 我家大宝宝我家大宝宝
  55. </p>
  56. <h3>我家大宝宝</h3>
  57. <p>
  58. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  59. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  60. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  61. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  62. 我家大宝宝我家大宝宝
  63. </p> <h3>我家大宝宝</h3>
  64. <p>
  65. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  66. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  67. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  68. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  69. 我家大宝宝我家大宝宝
  70. </p> <h3>我家大宝宝</h3>
  71. <p>
  72. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  73. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  74. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  75. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  76. 我家大宝宝我家大宝宝
  77. </p> <h3>我家大宝宝</h3>
  78. <p>
  79. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  80. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  81. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  82. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  83. 我家大宝宝我家大宝宝
  84. </p> <h3>我家大宝宝</h3>
  85. <p>
  86. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  87. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  88. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  89. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  90. 我家大宝宝我家大宝宝
  91. </p> <h3>我家大宝宝</h3>
  92. <p>
  93. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  94. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  95. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  96. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  97. 我家大宝宝我家大宝宝
  98. </p> <h3>我家大宝宝</h3>
  99. <p>
  100. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  101. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  102. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  103. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  104. 我家大宝宝我家大宝宝
  105. </p> <h3>我家大宝宝</h3>
  106. <p>
  107. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  108. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  109. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  110. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  111. 我家大宝宝我家大宝宝
  112. </p>
  113. </div>
  114. </body>
  115. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap学习</title>
  6. <!-- 移动设备优先 -->
  7. <!--
  8. 屏幕和设备的宽度保持一致,初始缩放为1:1
  9. -->
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. <!-- 导入bootstrap的css-->
  18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  19. <!-- 导入jQuery -->
  20. <script type="text/javascript" src="js/jquery.min.js"></script>
  21. <!-- 导入bootstrap的js -->
  22. <script type="text/javascript" src="js/bootstrap.js"></script>
  23. <style type="text/css">
  24. </style>
  25. </head>
  26. <body >
  27. <!-- 导航 -->
  28. <nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
  29. <!-- 使得内容居中显示 -->
  30. <div class="container">
  31. <div style="background-color: #ffffff">dddd</div>
  32. </div>
  33. </nav>
  34. <div class="container">
  35. <h3>我家大宝宝</h3>
  36. <p>
  37. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  38. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  39. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  40. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  41. 我家大宝宝我家大宝宝
  42. </p>
  43. <h3>我家大宝宝</h3>
  44. <p>
  45. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  46. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  47. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  48. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  49. 我家大宝宝我家大宝宝
  50. </p>
  51. <h3>我家大宝宝</h3>
  52. <p>
  53. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  54. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  55. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  56. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  57. 我家大宝宝我家大宝宝
  58. </p>
  59. <h3>我家大宝宝</h3>
  60. <p>
  61. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  62. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  63. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  64. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  65. 我家大宝宝我家大宝宝
  66. </p> <h3>我家大宝宝</h3>
  67. <p>
  68. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  69. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  70. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  71. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  72. 我家大宝宝我家大宝宝
  73. </p> <h3>我家大宝宝</h3>
  74. <p>
  75. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  76. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  77. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  78. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  79. 我家大宝宝我家大宝宝
  80. </p> <h3>我家大宝宝</h3>
  81. <p>
  82. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  83. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  84. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  85. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  86. 我家大宝宝我家大宝宝
  87. </p> <h3>我家大宝宝</h3>
  88. <p>
  89. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  90. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  91. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  92. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  93. 我家大宝宝我家大宝宝
  94. </p> <h3>我家大宝宝</h3>
  95. <p>
  96. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  97. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  98. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  99. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  100. 我家大宝宝我家大宝宝
  101. </p> <h3>我家大宝宝</h3>
  102. <p>
  103. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  104. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  105. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  106. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  107. 我家大宝宝我家大宝宝
  108. </p> <h3>我家大宝宝</h3>
  109. <p>
  110. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  111. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  112. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  113. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
  114. 我家大宝宝我家大宝宝
  115. </p>
  116. </div>
  117. </body>
  118. </html>
复制代码

  • class="collapse"是折叠导航栏的样式的基类。一般用于像
      标签的父元素上添加此类。
    • class="collapse navbar-collapse" 是折叠导航栏样式。一般用于像
        标签的父元素上添加此类
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>bootstrap学习</title>
      6. <!-- 移动设备优先 -->
      7. <!--
      8. 屏幕和设备的宽度保持一致,初始缩放为1:1
      9. -->
      10. <meta name="viewport" content="width=device-width, initial-scale=1">
      11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
      13. <!--[if lt IE 9]>
      14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      16. <![endif]-->
      17. <!-- 导入bootstrap的css-->
      18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
      19. <!-- 导入jQuery -->
      20. <script type="text/javascript" src="js/jquery.min.js"></script>
      21. <!-- 导入bootstrap的js -->
      22. <script type="text/javascript" src="js/bootstrap.js"></script>
      23. <style type="text/css">
      24. </style>
      25. </head>
      26. <body >
      27. <!-- 导航 -->
      28. <nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
      29. <!-- 使得内容居中显示 -->
      30. <div class="container">
      31. <!-- 页面的头部 -->
      32. <div class="navbar-header">
      33. <a href="#">
      34. <img src="img/logo.jpg" alt="logo"/>
      35. </a>
      36. </div>
      37. <!-- 导航链接-->
      38. <div class="collapse navbar-collapse">
      39. <ul>
      40. <li>
      41. <a href="#">主页</a>
      42. </li>
      43. <li>
      44. <a href="#">内容</a>
      45. </li>
      46. <li>
      47. <a href="#">主要业务</a>
      48. </li>
      49. <li>
      50. <a href="#">联系我们</a>
      51. </li>
      52. </ul>
      53. </div>
      54. </div>
      55. </nav>
      56. <div class="container">
      57. <h3>我家大宝宝</h3>
      58. <p>
      59. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      60. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      61. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      62. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      63. 我家大宝宝我家大宝宝
      64. </p>
      65. <h3>我家大宝宝</h3>
      66. <p>
      67. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      68. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      69. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      70. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      71. 我家大宝宝我家大宝宝
      72. </p>
      73. <h3>我家大宝宝</h3>
      74. <p>
      75. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      76. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      77. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      78. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      79. 我家大宝宝我家大宝宝
      80. </p>
      81. <h3>我家大宝宝</h3>
      82. <p>
      83. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      84. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      85. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      86. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      87. 我家大宝宝我家大宝宝
      88. </p> <h3>我家大宝宝</h3>
      89. <p>
      90. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      91. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      92. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      93. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      94. 我家大宝宝我家大宝宝
      95. </p> <h3>我家大宝宝</h3>
      96. <p>
      97. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      98. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      99. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      100. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      101. 我家大宝宝我家大宝宝
      102. </p> <h3>我家大宝宝</h3>
      103. <p>
      104. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      105. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      106. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      107. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      108. 我家大宝宝我家大宝宝
      109. </p> <h3>我家大宝宝</h3>
      110. <p>
      111. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      112. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      113. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      114. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      115. 我家大宝宝我家大宝宝
      116. </p> <h3>我家大宝宝</h3>
      117. <p>
      118. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      119. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      120. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      121. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      122. 我家大宝宝我家大宝宝
      123. </p> <h3>我家大宝宝</h3>
      124. <p>
      125. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      126. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      127. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      128. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      129. 我家大宝宝我家大宝宝
      130. </p> <h3>我家大宝宝</h3>
      131. <p>
      132. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      133. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      134. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      135. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      136. 我家大宝宝我家大宝宝
      137. </p>
      138. </div>
      139. </body>
      140. </html>
      复制代码

      • class="nav" 是导航栏的链接基类,一般是给ul标签添加。
      • class="nav navbar-nav"是导航栏的链接样式。一般给ul标签添加。
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>bootstrap学习</title>
      6. <!-- 移动设备优先 -->
      7. <!--
      8. 屏幕和设备的宽度保持一致,初始缩放为1:1
      9. -->
      10. <meta name="viewport" content="width=device-width, initial-scale=1">
      11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
      13. <!--[if lt IE 9]>
      14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      16. <![endif]-->
      17. <!-- 导入bootstrap的css-->
      18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
      19. <!-- 导入jQuery -->
      20. <script type="text/javascript" src="js/jquery.min.js"></script>
      21. <!-- 导入bootstrap的js -->
      22. <script type="text/javascript" src="js/bootstrap.js"></script>
      23. <style type="text/css">
      24. </style>
      25. </head>
      26. <body >
      27. <!-- 导航 -->
      28. <nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
      29. <!-- 使得内容居中显示 -->
      30. <div class="container">
      31. <!-- 页面的头部 -->
      32. <div class="navbar-header">
      33. <a href="#">
      34. <img src="img/logo.jpg" alt="logo"/>
      35. </a>
      36. </div>
      37. <!-- 导航链接-->
      38. <div class="collapse navbar-collapse">
      39. <ul class="nav navbar-nav">
      40. <li>
      41. <a href="#">主页</a>
      42. </li>
      43. <li>
      44. <a href="#">内容</a>
      45. </li>
      46. <li>
      47. <a href="#">主要业务</a>
      48. </li>
      49. <li>
      50. <a href="#">联系我们</a>
      51. </li>
      52. </ul>
      53. </div>
      54. </div>
      55. </nav>
      56. <div class="container">
      57. <h3>我家大宝宝</h3>
      58. <p>
      59. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      60. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      61. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      62. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      63. 我家大宝宝我家大宝宝
      64. </p>
      65. <h3>我家大宝宝</h3>
      66. <p>
      67. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      68. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      69. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      70. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      71. 我家大宝宝我家大宝宝
      72. </p>
      73. <h3>我家大宝宝</h3>
      74. <p>
      75. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      76. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      77. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      78. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      79. 我家大宝宝我家大宝宝
      80. </p>
      81. <h3>我家大宝宝</h3>
      82. <p>
      83. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      84. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      85. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      86. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      87. 我家大宝宝我家大宝宝
      88. </p> <h3>我家大宝宝</h3>
      89. <p>
      90. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      91. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      92. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      93. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      94. 我家大宝宝我家大宝宝
      95. </p> <h3>我家大宝宝</h3>
      96. <p>
      97. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      98. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      99. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      100. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      101. 我家大宝宝我家大宝宝
      102. </p> <h3>我家大宝宝</h3>
      103. <p>
      104. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      105. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      106. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      107. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      108. 我家大宝宝我家大宝宝
      109. </p> <h3>我家大宝宝</h3>
      110. <p>
      111. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      112. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      113. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      114. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      115. 我家大宝宝我家大宝宝
      116. </p> <h3>我家大宝宝</h3>
      117. <p>
      118. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      119. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      120. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      121. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      122. 我家大宝宝我家大宝宝
      123. </p> <h3>我家大宝宝</h3>
      124. <p>
      125. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      126. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      127. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      128. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      129. 我家大宝宝我家大宝宝
      130. </p> <h3>我家大宝宝</h3>
      131. <p>
      132. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      133. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      134. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      135. 我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
      136. 我家大宝宝我家大宝宝
      137. </p>
      138. </div>
      139. </body>
      140. </html>
      复制代码

      10 分页
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>bootstrap学习</title>
      6. <!-- 移动设备优先 -->
      7. <!--
      8. 屏幕和设备的宽度保持一致,初始缩放为1:1
      9. -->
      10. <meta name="viewport" content="width=device-width, initial-scale=1">
      11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
      13. <!--[if lt IE 9]>
      14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      16. <![endif]-->
      17. <!-- 导入bootstrap的css-->
      18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
      19. <!-- 导入jQuery -->
      20. <script type="text/javascript" src="js/jquery.min.js"></script>
      21. <!-- 导入bootstrap的js -->
      22. <script type="text/javascript" src="js/bootstrap.js"></script>
      23. <style type="text/css">
      24. </style>
      25. </head>
      26. <body >
      27. <!-- 分页 -->
      28. <div class="">
      29. <ul>
      30. <li>
      31. <a href="#">&laquo;</a>
      32. </li>
      33. <li>
      34. <a href="#">1</a>
      35. </li>
      36. <li>
      37. <a href="#">2</a>
      38. </li>
      39. <li>
      40. <a href="#">3</a>
      41. </li>
      42. <li>
      43. <a href="#">4</a>
      44. </li>
      45. <li>
      46. <a href="#">5</a>
      47. </li>
      48. <li>
      49. <a href="#">&raquo;</a>
      50. </li>
      51. </ul>
      52. </div>
      53. </body>
      54. </html>
      复制代码

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>bootstrap学习</title>
      6. <!-- 移动设备优先 -->
      7. <!--
      8. 屏幕和设备的宽度保持一致,初始缩放为1:1
      9. -->
      10. <meta name="viewport" content="width=device-width, initial-scale=1">
      11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
      13. <!--[if lt IE 9]>
      14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      16. <![endif]-->
      17. <!-- 导入bootstrap的css-->
      18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
      19. <!-- 导入jQuery -->
      20. <script type="text/javascript" src="js/jquery.min.js"></script>
      21. <!-- 导入bootstrap的js -->
      22. <script type="text/javascript" src="js/bootstrap.js"></script>
      23. <style type="text/css">
      24. </style>
      25. </head>
      26. <body >
      27. <!-- 分页 -->
      28. <div class="">
      29. <ul class="pagination">
      30. <li>
      31. <a href="#">&laquo;</a>
      32. </li>
      33. <li>
      34. <a href="#">1</a>
      35. </li>
      36. <li>
      37. <a href="#">2</a>
      38. </li>
      39. <li>
      40. <a href="#">3</a>
      41. </li>
      42. <li>
      43. <a href="#">4</a>
      44. </li>
      45. <li>
      46. <a href="#">5</a>
      47. </li>
      48. <li>
      49. <a href="#">&raquo;</a>
      50. </li>
      51. </ul>
      52. </div>
      53. </body>
      54. </html>
      复制代码

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>bootstrap学习</title>
      6. <!-- 移动设备优先 -->
      7. <!--
      8. 屏幕和设备的宽度保持一致,初始缩放为1:1
      9. -->
      10. <meta name="viewport" content="width=device-width, initial-scale=1">
      11. <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      12. <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
      13. <!--[if lt IE 9]>
      14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      16. <![endif]-->
      17. <!-- 导入bootstrap的css-->
      18. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
      19. <!-- 导入jQuery -->
      20. <script type="text/javascript" src="js/jquery.min.js"></script>
      21. <!-- 导入bootstrap的js -->
      22. <script type="text/javascript" src="js/bootstrap.js"></script>
      23. <style type="text/css">
      24. </style>
      25. </head>
      26. <body >
      27. <!-- 分页 -->
      28. <div class="">
      29. <ul class="pagination">
      30. <li >
      31. <a href="#">&laquo;</a>
      32. </li>
      33. <li class="active">
      34. <a href="#">1</a>
      35. </li>
      36. <li>
      37. <a href="#">2</a>
      38. </li>
      39. <li>
      40. <a href="#">3</a>
      41. </li>
      42. <li>
      43. <a href="#">4</a>
      44. </li>
      45. <li>
      46. <a href="#">5</a>
      47. </li>
      48. <li>
      49. <a href="#">&raquo;</a>
      50. </li>
      51. </ul>
      52. </div>
      53. </body>
      54. </html>
      复制代码



回复

使用道具 举报