个性化阅读
专注于IT技术分析

bootstrap例子

添加HTML 5文档类型:Bootstrap使用HTML元素和CSS属性,因此你必须在页面的开头添加具有lang属性和正确字符集的HTML 5文档类型。

例如:

<!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示例

赞(0)
未经允许不得转载:srcmini » bootstrap例子

评论 抢沙发

评论前必须登录!