Bootstrap 示例
第一个Bootstrap示例
添加HTML 5文档类型: Bootstrap使用HTML元素和CSS属性,因此您必须在页面开头具有lang属性和正确的字符集。
例如:
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Any title</title>
</head>
<body>
//write code
</body>
</html>
Bootstrap对移动设备友好: Bootstrap 3旨在响应移动设备。
"移动优先"样式是Bootstrap核心框架的一部分。在
<head>元素内添加以下
<meta>标签,以进行正确的渲染和触摸缩放:
<meta name="viewport" content="width=device-width, initial-scale=1">
注意: " width = device-width" 部分用于设置页面的宽度以跟随设备的屏幕宽度(根据
initial-scale = 1 部分用于设置浏览器首次加载页面时的初始缩放级别。
容器: 容器用于包装网站内容。有两个容器类。
.container类提供了一个响应性的固定宽度容器。
.container-fluid 类提供了一个全宽度的容器,横跨视口的整个宽度。
注意: 不能将容器放置在容器内。
第一个Bootstrap示例(带有响应的固定宽度容器)
<!DOCTYPE html>
<html lang="en">
<head>
<title>this is a Bootstrap example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1> First Bootstrap web page</h1>
<p>Write your text here..</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>