Bootstrap

Bootstrap 前言

bootstrap 是目前最受欢迎的前端框架,bootstrap 是基于HTML CSS JavaScript 的,他灵活简单,使web 开发起来更加的简单。

安装Bootstrap

①登录Bootstrap 官网 输入:https://v4.bootcss.com/

点击下载Bootstrap

 ②下载Bootstrap

 在这里我选择的是源文件,因为它将Bootstrap 生产文件包含在其中,当然这个文件会比较大些,大家可以酌情考虑,

③解压后点击

点击dist

将css 以及js 导入相应的文件夹中 

 

 

 接下来就你的Bootstarp 就可以用了,一起来看看它的具体用法吧!

案例1:查询按钮原生态实现对比bootstrap方式实现

 常规方式实现:实现思路 我们可以先定义一个按钮,然后再调用定义的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.aa{
			background-color:#007BFF;
			color: white;
			border: 0px;
			width: 60px;
			height: 40px;
			font-size: 18px;
			border-radius: 2px;
		}
		</style>
	</head>
	<body>
		&nbsp;&nbsp;<button class="aa">查询</button>
	</body>
</html>

bootstrap方式实现:在头部引入bootstrap的层叠样式,在body导入jquery 以及bootstrap的script

(注意在先导入jQuery 再导入bootstrap,因为bootstrap 依赖于 jquery 的库)定义按钮调用bootstrap为我们写好的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
	<body>
		&nbsp;&nbsp;<button class="btn btn-secondary">查询</button>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

两者对比:常规实现一个有想法的按钮需要很多的样式去实现,会比较麻烦,也比较费时

而通过bootstarp 实现只需要调用bootstrap的样式就行了,对不熟悉前端的小伙伴真的很友好

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值