Bootstrap入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34117624/article/details/83449093

帮助文档：http://v3.bootcss.com/css 头部有三个重要的部分，CSS，主键，JavaScript插件

定义：基于HTML、CSS、JavaScript的前端框架(半成品)，预定义了一些CSS样式与其对应的jQuery代码。我们只需要提供HTML结构，添加固定的样式，就可以达到可观的效果

响应式布局：一个网站可以兼容多个终端，而不需要为不容的终端提供不同的版本。而Bootstrap就是一种响应式布局的框架

环境的搭建

下载：http://d.bootcss.com/bootstrap-3.3.5.zip

例子：后续补充

<!DOCTYPE html>          HTML约束，固定值
<html lang="zh-CN">        建议编写，声明语言
	<head>                响应式布局必须声明，且必须在head的前三行
		<meta charset="utf-8"> 
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap 101 Template</title>    
		<link href="../css/bootstrap.css" rel="stylesheet">    预定义的CSS样式
		<script src="../js/jquery-1.8.3.js"></script>          基于jQuery
		<script src="../js/bootstrap.js"></script>            bootstrap的类库
	</head>
	<body>
		<!--响应式布局，有点像div的表格响应式实现-->
		<div class="container">
			<div class="row">
				<div class="col-md-3 col-xs-6">11</div>
				<div class="col-md-3 col-xs-6">11</div>
				<div class="col-md-3 col-xs-6">11</div>
				<div class="col-md-3 col-xs-6">11</div>
			</div>
			<div class="row">
				<div class="col-md-3 col-xs-6">11</div>
				<div class="col-md-3 col-xs-6">11</div>
				<div class="col-md-3 col-xs-6">11</div>
				<div class="col-md-3 col-xs-6">11</div>
			</div>
		</div>
		<!--bootstrap的按钮实现-->
		<button type="button" class="btn btn-default">默认样式</button><br />
		<button type="button" class="btn btn-primary">首选项</button><br />
		<button type="button" class="btn btn-success">成功样式</button><br />
		<button type="button" class="btn btn-info">一般信息</button><br />
		<button type="button" class="btn btn-warning">警告</button><br />
		<button type="button" class="btn btn-danger">危险</button><br />
		<button type="button" class="btn btn-link">链接</button><br />
		<!--响应式工具-->
		<div class="visible-md visible-xs">one</div>
		<div class="hidden-sm hidden-lg">two</div>
	</body>
</html>

BootStrap