Bootstrap入门（一）

时间：2024-10-14 18:05:01

前言

大家好！我是九歌，今天我要分享的内容是Bootstrap的入门，首先老规矩先上思维导图。

 

提示：以下是本篇文章正文内容，下面案例可供参考

一、Bootstrap

        学习一门新的技术我们终究都逃不过三个W。What,Why,Where。

        ——Bootstrap是什么？

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

        Bootstrap包含 

 

  • 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
  • CSS:Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
  • 组件:Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
  • JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
  • 定制:您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

        ——为什么要学习Bootstrap 

1.节省时间

Bootstrap库中包含很多现成的代码片段，这些代码可为你的网站增加更多活力。Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。

通过Bootstrap，开发者可轻易地操作窗口警告框、工具提示框、滚动条、按钮等。Bootstrap最突出之处是，它可以让你不必再费神费力地写脚本。

2.定制化

Bootstrap很重要的一方面就是你可以将它据为己有。你可以留取框架中需要的部分，抛弃不需要的。Bootstrap整体允许你根据自己的需要，裁剪自己开发的项目。

3.详尽的说明文档，更容易上手

Bootstrap的文档相当精彩。Bootstrap的说明文档大大帮助了我们的入门学习。通过文档可以找到我们需要的所有信息。

4.响应式设计

响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及 使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局，无论用户正在使用笔记本还是iPad，我们 的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。这样我们不用再忙于适配各类终端。

5.浏览器支持

各类浏览器都支持Bootstrap没有不兼容的问题。

6.移动设备优先

最难适配的就是移动设备啦，当移动设备都被解决了，其他的不也能迎刃而解了吗？

        ——Bootstrap都用在哪些方面呢？ 

 Bootstrap大多用于博客，企业的门户类网页等。毕竟人家推特是做博客的嘛。

不适用于复杂分类的网页：譬如某宝等。

二、使用步骤

1.下载Bootstrap

网址：/

下载应该都会吧，下新版的就行，不会可以看文档，简单易上手。

2.引入库

代码如下： 

    

  1. 

    

    <html>
    

    2. 

  2. 

    

    	<head>

    

    3. 

  3. 

    

    		<meta charset="utf-8" />

    

    4. 

  4. 

    

    		<title></title>

    

    5. 

  5. 

    

    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    

    6. 

  6. 

    

    		<style>

    

    7. 

  7. 

    

    			.aa{
    

    8. 

  8. 

    

    				color: white;
    

    9. 

  9. 

    

    				background-color: #007BFF;
    

    10. 

  10. 

    

    				border: 0px;
    

    11. 

  11. 

    

    				width: 50px;
    

    12. 

  12. 

    

    				height: 30px;
    

    13. 

  13. 

    

    				border-radius: 3px;
    

    14. 

  14. 

    

    			}
    

    15. 

  15. 

    

    		</style>

    

    16. 

  16. 

    

    		<link rel="stylesheet" type="text/css" href="css/"/>

    

    17. 

  17. 

    

    	</head>

    

    18. 

  18. 

    

    	<body>

    

    19. 

  19. 

    

    		
    

    20. 

  20. 

    

    		<div class="container">

    

    21. 

  21. 

    

    		<button class="aa">查询</button>

    

    22. 

  22. 

    

    		<hr color="red" />

    

    23. 

  23. 

    

    		<button class="btn btn-outline-primary">搜索</button>

    

    24. 

  24. 

    

    		</div>

    

    25. 

  25. 

    

    		
    

    26. 

  26. 

    

    		<script src="js/jquery-3.3." type="text/javascript" charset="utf-8"></script>

    

    27. 

  27. 

    

    		<script src="js/" type="text/javascript" charset="utf-8"></script>

    

    28. 

  28. 

    

    		
    

    29. 

  29. 

    

    	</body>

    

    30. 

  30. 

    

    </html>
    

    31.

三、 案例

        1.查询原生态实现对比Bootstrap方式实现

原生态代码如下：

    

  1. 

    

    <html>
    

    2. 

  2. 

    

    	<head>

    

    3. 

  3. 

    

    		<meta charset="utf-8" />

    

    4. 

  4. 

    

    		<title></title>

    

    5. 

  5. 

    

    		<!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->

    

    6. 

  6. 

    

    		<style>

    

    7. 

  7. 

    

    			.aa{
    

    8. 

  8. 

    

    				color: white;
    

    9. 

  9. 

    

    				background-color: #007BFF;
    

    10. 

  10. 

    

    				border: 0px;
    

    11. 

  11. 

    

    				width: 50px;
    

    12. 

  12. 

    

    				height: 30px;
    

    13. 

  13. 

    

    				border-radius: 3px;
    

    14. 

  14. 

    

    			}
    

    15. 

  15. 

    

    		</style>

    

    16. 

  16. 

    

    		<!-- <link rel="stylesheet" type="text/css" href="css/"/> -->

    

    17. 

  17. 

    

    	</head>

    

    18. 

  18. 

    

    	<body>

    

    19. 

  19. 

    

    		
    

    20. 

  20. 

    

    		<div class="container">

    

    21. 

  21. 

    

    		<button class="aa">查询</button>

    

    22. 

  22. 

    

    		<hr color="red" />

    

    23. 

  23. 

    

    		<button class="btn btn-outline-primary">搜索</button>

    

    24. 

  24. 

    

    		</div>

    

    25. 

  25. 

    

    		
    

    26. 

  26. 

    

    		<!-- <script src="js/jquery-3.3." type="text/javascript" charset="utf-8"></script>

    

    27. 

  27. 

    

    		<script src="js/" type="text/javascript" charset="utf-8"></script>
    

    28. 

  28. 

    

    		 -->
    

    29. 

  29. 

    

    	</body>

    

    30. 

  30. 

    

    </html>
    

    31.

原生态效果如下：

Bootstrap方式代码如下： 

    

  1. 

    

    <html>
    

    2. 

  2. 

    

    	<head>

    

    3. 

  3. 

    

    		<meta charset="utf-8" />

    

    4. 

  4. 

    

    		<title></title>

    

    5. 

  5. 

    

    		<!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->

    

    6. 

  6. 

    

    		<style>

    

    7. 

  7. 

    

    			.aa{
    

    8. 

  8. 

    

    				color: white;
    

    9. 

  9. 

    

    				background-color: #007BFF;
    

    10. 

  10. 

    

    				border: 0px;
    

    11. 

  11. 

    

    				width: 50px;
    

    12. 

  12. 

    

    				height: 30px;
    

    13. 

  13. 

    

    				border-radius: 3px;
    

    14. 

  14. 

    

    			}
    

    15. 

  15. 

    

    		</style>

    

    16. 

  16. 

    

    		<link rel="stylesheet" type="text/css" href="css/"/> 
    

    17. 

  17. 

    

    	</head>

    

    18. 

  18. 

    

    	<body>

    

    19. 

  19. 

    

    		
    

    20. 

  20. 

    

    		<div class="container">

    

    21. 

  21. 

    

    		<button class="aa">查询</button>

    

    22. 

  22. 

    

    		<hr color="red" />

    

    23. 

  23. 

    

    		<button class="btn btn-outline-primary">搜索</button>

    

    24. 

  24. 

    

    		</div>

    

    25. 

  25. 

    

    		
    

    26. 

  26. 

    

    		<script src="js/jquery-3.3." type="text/javascript" charset="utf-8"></script>

    

    27. 

  27. 

    

    		<script src="js/" type="text/javascript" charset="utf-8"></script>

    

    28. 

  28. 

    

    	</body>

    

    29. 

  29. 

    

    </html>
    

    30.

 Bootstrap实现方式效果如下：

 

 如果这里的大的div的class不是container的话，效果如下：

 

        2. Bootstrap页面在手机浏览器中的展示效果

我们想要在移动端适配的话要在head加入meta_viewport。让我们来看效果。先上代码

 

    

  1. 

    

    <html>
    

    2. 

  2. 

    

    	<head>

    

    3. 

  3. 

    

    		<meta charset="utf-8" />

    

    4. 

  4. 

    

    		<title></title>

    

    5. 

  5. 

    

    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    

    6. 

  6. 

    

    		<style>

    

    7. 

  7. 

    

    			.aa{
    

    8. 

  8. 

    

    				color: white;
    

    9. 

  9. 

    

    				background-color: #007BFF;
    

    10. 

  10. 

    

    				border: 0px;
    

    11. 

  11. 

    

    				width: 50px;
    

    12. 

  12. 

    

    				height: 30px;
    

    13. 

  13. 

    

    				border-radius: 3px;
    

    14. 

  14. 

    

    			}
    

    15. 

  15. 

    

    		</style><link rel="stylesheet" type="text/css" href="css/"/> 
    

    16. 

  16. 

    

    	</head>

    

    17. 

  17. 

    

    	<body>

    

    18. 

  18. 

    

    		
    

    19. 

  19. 

    

    		<div class="container">

    

    20. 

  20. 

    

    		<button class="aa">查询</button>

    

    21. 

  21. 

    

    		<hr color="red" />

    

    22. 

  22. 

    

    		<button class="btn btn-outline-primary">搜索</button>

    

    23. 

  23. 

    

    		</div>

    

    24. 

  24. 

    

    		
    

    25. 

  25. 

    

    		<script src="js/jquery-3.3." type="text/javascript" charset="utf-8"></script>

    

    26. 

  26. 

    

    		<script src="js/" type="text/javascript" charset="utf-8"></script>

    

    27. 

  27. 

    

    	</body>

    

    28. 

  28. 

    

    </html>
    

    29.

 效果如下：

 箭头指的按钮就是将电脑的浏览器转换成手机端。

        3. 首页导航&搜索区域原生态实现

                代码如下：

    

  1. 

    

    <html>
    

    2. 

  2. 

    

    	<head>

    

    3. 

  3. 

    

    		<meta charset="utf-8">

    

    4. 

  4. 

    

    		<title>案例3</title>

    

    5. 

  5. 

    

    		<style type="text/css">

    

    6. 

  6. 

    

    			.aa{
    

    7. 

  7. 

    

    				height: 50px;
    

    8. 

  8. 

    

    				background-color: #F8F9FA;
    

    9. 

  9. 

    

    				line-height: 50px;
    

    10. 

  10. 

    

    			}
    

    11. 

  11. 

    

    			.bb{
    

    12. 

  12. 

    

    				float: left;
    

    13. 

  13. 

    

    				margin-left: 50px;
    

    14. 

  14. 

    

    			}
    

    15. 

  15. 

    

    			.cc{
    

    16. 

  16. 

    

    				float: right;
    

    17. 

  17. 

    

    				margin-right: 50px;
    

    18. 

  18. 

    

    			}
    

    19. 

  19. 

    

    			.cc a{
    

    20. 

  20. 

    

    				margin-left: 10px;
    

    21. 

  21. 

    

    			}
    

    22. 

  22. 

    

    			.ss{
    

    23. 

  23. 

    

    				background-color: #dcdcdc;
    

    24. 

  24. 

    

    				height: 100px;
    

    25. 

  25. 

    

    				margin: 20px 50px 0px 50px;
    

    26. 

  26. 

    

    				text-align: center;
    

    27. 

  27. 

    

    				line-height: 100px;
    

    28. 

  28. 

    

    			}
    

    29. 

  29. 

    

    			.ss button{
    

    30. 

  30. 

    

    				color: white;
    

    31. 

  31. 

    

    				background-color: #007BFF;
    

    32. 

  32. 

    

    				border: 0px;
    

    33. 

  33. 

    

    				width: 50px;
    

    34. 

  34. 

    

    				height: 30px;
    

    35. 

  35. 

    

    				border-radius: 3px;
    

    36. 

  36. 

    

    			}
    

    37. 

  37. 

    

    			.ss input{
    

    38. 

  38. 

    

    				border: 0px;
    

    39. 

  39. 

    

    				width: 200px;
    

    40. 

  40. 

    

    				height: 25px;
    

    41. 

  41. 

    

    			}
    

    42. 

  42. 

    

    		</style>

    

    43. 

  43. 

    

    	</head>

    

    44. 

  44. 

    

    	<body>

    

    45. 

  45. 

    

    		<div class="aa">

    

    46. 

  46. 

    

    			<div class="bb">

    

    47. 

  47. 

    

    				您好，欢迎来到霍格沃兹网上书店！
    

    48. 

  48. 

    

    			</div>

    

    49. 

  49. 

    

    			<div class="cc">

    

    50. 

  50. 

    

    				<a>首页</a>

    

    51. 

  51. 

    

    				<a>登录</a>

    

    52. 

  52. 

    

    				<a>注册</a>

    

    53. 

  53. 

    

    				<a>我的购物车</a>

    

    54. 

  54. 

    

    			</div>

    

    55. 

  55. 

    

    		</div>

    

    56. 

  56. 

    

    		<div class="ss">

    

    57. 

  57. 

    

    			<input type="text"/>

    

    58. 

  58. 

    

    			<button>查询</button>

    

    59. 

  59. 

    

    		</div>

    

    60. 

  60. 

    

    	</body>

    

    61. 

  61. 

    

    </html>
    

    62.

效果如下：

 

        4. 首页导航&搜索区域Bootstrap实现搭建书城首页框架

        代码如下：

    

  1. 

    

    <html>
    

    2. 

  2. 

    

    	<head>

    

    3. 

  3. 

    

    		<meta charset="utf-8">

    

    4. 

  4. 

    

    		<title></title>

    

    5. 

  5. 

    

    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    

    6. 

  6. 

    

    		<link rel="stylesheet" type="text/css" href="css/"/>

    

    7. 

  7. 

    

    		<style>

    

    8. 

  8. 

    

    					.navbar-collapse{
    

    9. 

  9. 

    

    						flex-grow: 0;/* 1、代表制动会占用父容器剩余空间 0代表不占用 */

    

    10. 

  10. 

    

    					}
    

    11. 

  11. 

    

    					.ss{
    

    12. 

  12. 

    

    						height: 100px;
    

    13. 

  13. 

    

    						background-color: #dcdcdc;
    

    14. 

  14. 

    

    						margin-top: 20px;
    

    15. 

  15. 

    

    						
    

    16. 

  16. 

    

    					}
    

    17. 

  17. 

    

    					.form-group{
    

    18. 

  18. 

    

    						width: 300px;
    

    19. 

  19. 

    

    						margin-left: auto;
    

    20. 

  20. 

    

    						margin-right: auto;
    

    21. 

  21. 

    

    						margin-top: 31px;
    

    22. 

  22. 

    

    					}
    

    23. 

  23. 

    

    				</style>

    

    24. 

  24. 

    

    	</head>

    

    25. 

  25. 

    

    	<body>

    

    26. 

  26. 

    

    		<nav class="navbar navbar-expand-lg navbar-light bg-light">

    

    27. 

  27. 

    

    					<div class="container">

    

    28. 

  28. 

    

    						<a class="navbar-brand" href="#">您好，欢迎来到霍格沃兹网上书店！</a>

    

    29. 

  29. 

    

    						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"

    

    30. 

  30. 

    

    						 aria-expanded="false" aria-label="Toggle navigation">
    

    31. 

  31. 

    

    							<span class="navbar-toggler-icon"></span>

    

    32. 

  32. 

    

    						</button>

    

    33. 

  33. 

    

    						<div class="collapse navbar-collapse" id="navbarNavAltMarkup">

    

    34. 

  34. 

    

    							<div class="navbar-nav">

    

    35. 

  35. 

    

    								<a class="nav-item nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>

    

    36. 

  36. 

    

    								<a class="nav-item nav-link" href="#">登陆</a>

    

    37. 

  37. 

    

    								<a class="nav-item nav-link" href="#">注册</a>

    

    38. 

  38. 

    

    								<a class="nav-item nav-link " href="#">我的购物车</a>

    

    39. 

  39. 

    

    							</div>

    

    40. 

  40. 

    

    						</div>

    

    41. 

  41. 

    

    					</div>

    

    42. 

  42. 

    

    				</nav>

    

    43. 

  43. 

    

    		
    

    44. 

  44. 

    

    				<!-- 栅格系统来实现首页的部分框架 -->

    

    45. 

  45. 

    

    				<div class="container">

    

    46. 

  46. 

    

    					<!-- 第一行 -->

    

    47. 

  47. 

    

    					<div class="row ss">

    

    48. 

  48. 

    

    						<div class="col">

    

    49. 

  49. 

    

    							<form>

    

    50. 

  50. 

    

    								<div class="form-group">

    

    51. 

  51. 

    

    									<div class="input-group mb-3">

    

    52. 

  52. 

    

    										<input type="text" class="form-control" placeholder="书籍关键字" aria-label="Recipient's username"

    

    53. 

  53. 

    

    										 aria-describedby="basic-addon2">
    

    54. 

  54. 

    

    										<div class="input-group-append">

    

    55. 

  55. 

    

    											<button class="btn btn-primary" type="button">查询</button>

    

    56. 

  56. 

    

    										</div>

    

    57. 

  57. 

    

    									</div>

    

    58. 

  58. 

    

    								</div>

    

    59. 

  59. 

    

    							</form>

    

    60. 

  60. 

    

    						</div>

    

    61. 

  61. 

    

    					</div>

    

    62. 

  62. 

    

    		
    

    63. 

  63. 

    

    					<div class="row">

    

    64. 

  64. 

    

    						<!-- 第二行 -->

    

    65. 

  65. 

    

    						<div class="col-3" style="background-color: pink;">

    

    66. 

  66. 

    

    							左3-书籍分类
    

    67. 

  67. 

    

    						</div>

    

    68. 

  68. 

    

    		
    

    69. 

  69. 

    

    						<div class="col-9" style="background-color: skyblue; ">

    

    70. 

  70. 

    

    							<!-- 右9-轮播图&新书上架&热门书籍 -->

    

    71. 

  71. 

    

    							<div class="row">

    

    72. 

  72. 

    

    								<div class="col">

    

    73. 

  73. 

    

    									右9-第一行轮播图
    

    74. 

  74. 

    

    								</div>

    

    75. 

  75. 

    

    							</div>

    

    76. 

  76. 

    

    							<div class="row">

    

    77. 

  77. 

    

    								<!-- 右9中新书上架 -->

    

    78. 

  78. 

    

    								<div class="col">

    

    79. 

  79. 

    

    									①新书上架
    

    80. 

  80. 

    

    								</div>

    

    81. 

  81. 

    

    								<div class="col">

    

    82. 

  82. 

    

    									②新书上架
    

    83. 

  83. 

    

    								</div>

    

    84. 

  84. 

    

    								<div class="col">

    

    85. 

  85. 

    

    									③新书上架
    

    86. 

  86. 

    

    								</div>

    

    87. 

  87. 

    

    								<div class="col">

    

    88. 

  88. 

    

    									④新书上架
    

    89. 

  89. 

    

    								</div>

    

    90. 

  90. 

    

    								<div class="col">

    

    91. 

  91. 

    

    									⑤新书上架
    

    92. 

  92. 

    

    								</div>

    

    93. 

  93. 

    

    							</div>

    

    94. 

  94. 

    

    		
    

    95. 

  95. 

    

    							<div class="row">

    

    96. 

  96. 

    

    								<!-- 右9中热门书籍 -->

    

    97. 

  97. 

    

    								<div class="col">

    

    98. 

  98. 

    

    									①热门书籍
    

    99. 

  99. 

    

    								</div>

    

    100. 

  100. 

    

    								<div class="col">

    

    101. 

  101. 

    

    									②热门书籍
    

    102. 

  102. 

    

    								</div>

    

    103. 

  103. 

    

    								<div class="col">

    

    104. 

  104. 

    

    									③热门书籍
    

    105. 

  105. 

    

    								</div>

    

    106. 

  106. 

    

    								<div class="col">

    

    107. 

  107. 

    

    									④热门书籍
    

    108. 

  108. 

    

    								</div>

    

    109. 

  109. 

    

    								<div class="col">

    

    110. 

  110. 

    

    									⑤热门书籍
    

    111. 

  111. 

    

    								</div>

    

    112. 

  112. 

    

    							</div>

    

    113. 

  113. 

    

    						</div>

    

    114. 

  114. 

    

    					</div>

    

    115. 

  115. 

    

    				</div>

    

    116. 

  116. 

    

     
    

    117. 

  117. 

    

    		
    

    118. 

  118. 

    

    		<script src="js/jquery-3.3." type="text/javascript" charset="utf-8"></script>

    

    119. 

  119. 

    

    		<script src="js/" type="text/javascript" charset="utf-8"></script>

    

    120. 

  120. 

    

    	</body>

    

    121. 

  121. 

    

    </html>
    

    122.

效果如下：

总结


以上就是今天要讲的内容，本文仅仅简单介绍了bootstrap的使用,如有错误还望指正。谢谢您嘞。

相关文章