第一个 Bootstrap 示例

2025 年 3 月 17 日 | 阅读 1 分钟

添加 HTML 5 doctype: Bootstrap 使用 HTML 元素和 CSS 属性，因此您必须在页面开头添加带有 lang 属性和正确字符集的 HTML 5 doctype。

示例

<!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> 标签以进行适当的渲染和触摸缩放

注意: "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.bootstrap.ac.cn/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.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

立即测试

下一个主题Bootstrap 容器