Bootstrap 环境安装

最新推荐文章于 2024-11-22 09:02:53 发布

原创最新推荐文章于 2024-11-22 09:02:53 发布 · 968 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

Bootstrap 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Bootstrap构建响应式网页，包括下载Bootstrap、设置文档结构、理解媒体查询等内容，并提供了一个简单的示例。

1.下载Bootstrap

2.Bootstrap文档结构

预编译的：
这里写图片描述
源码：

这里写图片描述

3.媒体查询

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

//窗口设定
name =”viewport”
//页面大小屏幕等宽
content = “width=device-width”
//初始缩放比例100%,保证清晰度
initial-scale
//允许缩放的最小比例
mininum-scale
//允许缩放的最大比例
//用户是否可以缩放，no表示不可以
user-scalable=no

4.创建Bootstrap页面

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <!--媒体查询-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 加载 css -->
      <link rel="stylesheet" href="css/bootstrap.min.css">
   </head>
   <body>
      <h1>Hello, world!</h1>
      <!--加载 jquery库 ，必须在bootstrap核心库之前-->
      <script src="js/jquery/min.js"></script> 
      <!--加载 bootstrap核心库-->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>