什么是bootstrap?
Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
这个是bootstrap英文网站的介绍
在网络上建立响应迅速、移动优先的项目,大概就这个意思吧看看这个介绍就知道他多厉害了吧!
bootstrap是一个基于jQuery的CSS/HTML框架,由Twitter开发,都说了bootstrap是用于响应式布局他可以根据不同屏幕不同设备来调整样式大小,和media作用类似,bootstrap 有自己的CSS名,写上对应的CSS名会给写上已经写好的样式。
下载
有三种下载方式
1.在官网下载zip压缩包
可以通过访问 英文官网和中文官网来下载
bootstrap英文网站
boostrap中文网站
2.CDN引入
直接到官网复制CDN地址进行引用
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!--最新版本的 bootstrsap核心 css -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery 文件 (一定要写在Bootstrap JS文件的前面) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- JavaScript 文件 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
3.通过npm
使用npm软件包在您的Node.js驱动的应用程序中安装Bootstrap
具体方法可以参考 boorstrap官网下载
Bootstrap----CSS样式
1.按钮
可用于 a, button,input
class : btn 基本样式
class : btn-default 默认/标准按钮
class : btn-primary 原始按钮样式
class : btn-success 表示成功按钮
按钮的大小
btn-lg 大按钮 btn-sm 小按钮 btn-xs 超小按钮 btn-block 块级按钮
示例:
<h1>按钮</h1>
<p>
<button type="button" class="btn btn-lg btn-default">Default</button>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-success">Success</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-link">Link</button>
</p>
<p>