• 欢迎光临~

Bootstrap

开发技术 开发技术 2022-10-06 次浏览

两种方法引用Bootstrap
一种是把下载的bootstrap-3.3.7-dist文件夹放入所要用到Bootstrap框架的项目的文件夹:
官网下载地址:http://getbootstrap.com/
中文网下载地址:http://www.bootcss.com/

<!--为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签-->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery (Bootstrap 的所 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>

<!-- 加载 Bootstrap 的所 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>

 

第二种是直接利用CDN从网上引用,但是如果没有网就引用不了了:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

此外,你还可以使用以下的 CDN 服务:国际推荐使用:https://cdnjs.com/


学习网站:https://www.runoob.com/bootstrap/bootstrap-tutorial.html

设备代号:
xs:超小屏幕 手机 (<768px):col-xs-12
sm:小屏幕 平板 (≥768px)
md:中等屏幕 桌面显示器 (≥992px)
lg:大屏幕 大桌面显示器 (≥1200px)

程序员灯塔
转载请注明原文链接:Bootstrap
喜欢 (0)