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>

Bootstrap 特定日期格式

Bootstrap 网格