统计
  • 建站日期:2021-03-10
  • 文章总数:688 篇
  • 评论总数:725 条
  • 分类总数:10 个
  • 最后更新:12月3日
文章 教学教程

Bootstrap4 安装使用

程序员阿鑫
首页 教学教程 正文


Bootstrap4安装使用
-程序员阿鑫-带你一起秃头!
-第1
张图片

我们可以通过以下两种方式来安装 Bootstrap4:

Bootstrap 4 CDN

国内推荐使用 Staticfile CDN 上的库:

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

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

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

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

注意:popper.min.js 用于设置弹窗、提示、下拉菜单,目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 

此外,你还可以使用以下的 CDN 服务:

说明:目前 国内推荐使用 Staticfile CDN 上的 

 

创建第一个 Bootstrap 4 页面

1、添加 HTML5 doctype

Bootstrap 要求使用 HTML5 文件类型,所以需要添加 HTML5 doctype 声明。

HTML5 doctype 在文档头部声明,并设置对应编码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度

 

容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类:

  • .container 类用于固定宽度并支持响应式布局的容器。
  • .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。


Bootstrap4安装使用
-程序员阿鑫-带你一起秃头!
-第3
张图片

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

-- 展开阅读全文 --
这篇文章最后更新于2021-4-11,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
CSS3 多媒体查询总结
« 上一篇
微信小程序怎么实现快递查询功能
下一篇 »
为了防止灌水评论,登录后即可评论!
注册登录

HI ! 请登录
注册会员,享受下载全站资源特权。
登陆 注册
上号,带你一起秃头!

IP地址

热门文章

1
抖音无限礼物模拟小工具分享
2
QQ假红包引流QQ群教程及代码
4
卡QQ永久大会员方法

最新文章

标签