根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第二节 bootstrap前端开发框架以按钮为例（引用网站上已经设置的布局和样式）

本文链接：https://blog.csdn.net/qq_51272114/article/details/124349914

咱们大部分围绕着两个问题来叙述
是什么？
怎么做？

一.目录（总体，这门课要学的目录）（现在是第二章，bootstrap前端开发框架）

1.响应式开发

2.bootstrap前端开发框架

3.bootstrap栅格系统

4.实训案例（阿里百秀首页）

二，bootstrap前端开发框架

2.按钮（button）

在此网站链接中，就是网站之前设定好的按钮，我们可以直接复制class后的样式来直接引用。
https://v3.bootcss.com/css/#buttons

！！别忘了咱们之前说的bootstrap的四部曲，上一节讲过，（也就是准备工作）

2.1如何修改和定义css样式

这是我在上方那个连接上随便引用的button 截图和代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	
<link rel="stylesheet"  href="bootstrap/css/bootstrap.min.css">
	<!--不要忘记引入bootstrap的样式文件-->
<title>文档</title>
	<style type="text/css">
		
	
	</style>
</head>

<body>
	<button type="button" class="btn btn-success ">Success</button>
</body>
</html>

这是我们修改后的代码和截图

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	
<link rel="stylesheet"  href="bootstrap/css/bootstrap.min.css">
	<!--不要忘记引入bootstrap的样式文件-->
<title>文档</title>
	<style type="text/css">
		.login{
		width: 400px;
		height: 50px;
		}
	
	</style>
</head>

<body>
	<button type="button" class="btn btn-success login">Success</button>
</body>
</html>