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>
安装 Bootstrap 可以通过下载文件或使用 CDN 来实现。 如果选择下载文件安装,可以从 Bootstrap 的官方网站或其他来源下载 Bootstrap 文件。下载完成后,将文件解压缩并将所需的 CSS 和 JavaScript 文件链接到您的 HTML 页面中。在您的 HTML 页面中,使用 `<link>` 标签将 Bootstrap 的 CSS 文件引入,例如:`<link rel="stylesheet" href="path/to/bootstrap.css">`。然后使用 `<script>` 标签将 Bootstrap 的 JavaScript 文件引入,例如:`<script src="path/to/bootstrap.js"></script>`。这样就完成了 Bootstrap安装。 如果选择使用 CDN 进行安装,可以在您的 HTML 页面中使用相应的链接将 Bootstrap 的 CSS 和 JavaScript 文件引入。例如,可以使用以下链接将 Bootstrap 的 CSS 文件引入:`<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">`,然后使用以下链接将 Bootstrap 的 JavaScript 文件引入:`<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>`。这样就完成了 Bootstrap安装。请注意,如果需要使用 jQuery 插件,务必在引入 Bootstrap 的 JavaScript 文件之前引入 jQuery 文件。 总结起来,安装 Bootstrap 可以通过下载文件并链接到 HTML 页面中,或者使用 CDN 引入相应的文件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Bootstrap 环境安装](https://download.csdn.net/download/weixin_38594266/13679120)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Bootstrap全版本通用安装方式【详细版】](https://blog.csdn.net/qq_52715066/article/details/125610868)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Bootstrap(引入)环境安装](https://blog.csdn.net/lgxzzz/article/details/119826581)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值