小白教程
所有教程
关于
Search
172.70.100.210
172.70.100.210
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Bootstrap5 安装使用”的源代码
本页内容
上一节:
Bootstrap5_教程
下一节:
Bootstrap5_容器
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Bootstrap5 安装使用}}[[Category:Bootstrap 5 教程|2]] = Bootstrap5 安装使用 = 我们可以通过以下两种方式来安装 Bootstrap5: * 使用 Bootstrap5 CDN。 * 从官网 [https://getbootstrap.com/docs/5.1/getting-started/download/ getbootstrap.com] 下载 Bootstrap 5。 === Bootstrap 5 CDN === 国内推荐使用 Staticfile CDN 上的库: == Bootstrap5 CDN == <sample title="" desc="" lang="html"> <!-- 新 Bootstrap5 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css"> <!-- popper.min.js 用于弹窗、提示、下拉菜单 --> <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script> <!-- 最新的 Bootstrap5 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script> </sample> <blockquote>'''注意:'''popper.min.js 用于设置弹窗、提示、下拉菜单。 </blockquote> bootstrap.bundle.js (未压缩版)或 bootstrap.bundle.min.js(压缩版) 包含了捆绑的插件如 popper.min.js 及其他依赖脚本,所以我们也可以直接使用以下代码: == Bootstrap5 CDN == <sample title="" desc="" lang="html"> <!-- 新 Bootstrap5 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css"> <!-- 最新的 Bootstrap5 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </sample> 此外,你还可以使用以下的 CDN 服务: * 国内推荐使用 : https://www.staticfile.org/ * 国际推荐使用:https://cdnjs.com/ === 下载 Bootstrap 5 === 你可以去官网 https://getbootstrap.com/ 下载 Bootstrap5 资源库。 <blockquote>'''注:'''此外你还可以通过包的管理工具 npm、 yarn、gem、 composer 等来安装: <pre>npm install bootstrap</pre> <pre>yarn add bootstrap</pre> <pre>gem install bootstrap -v 5.1.1</pre> <pre>composer require twbs/bootstrap:5.1.1</pre></blockquote> == 创建第一个 Bootstrap 5 页面 == === 1、添加 HTML5 doctype === Bootstrap 要求使用 HTML5 文件类型,所以需要添加 HTML5 doctype 声明。 HTML5 doctype 在文档头部声明,并设置对应编码: <sample title="" desc="" lang="html"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> </html> </sample> === 移动设备优先 === 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示: <pre> <meta name="viewport" content="width=device-width, initial-scale=1"> </pre> <code>width=device-width</code> 表示宽度是设备屏幕的宽度。 <code>initial-scale=1</code> 表示初始的缩放比例。 == 容器类 == Bootstrap 5 需要一个容器元素来包裹网站的内容。 我们可以使用以下两个容器类: * .container 类用于固定宽度并支持响应式布局的容器。 * .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。 == 两个 Bootstrap 5 页面 == == Bootstrap5 .container 实例 == <sample title="" desc="" lang="html" hererun="1"> <div class="container"> <h1>我的第一个 Bootstrap 页面</h1> <p>这是一些文本。</p> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <h1>我的第一个 Bootstrap 页面</h1> <p>这是一些文本。</p> </div> </body> </html> </run> 以下实例展示了占据整个视区(viewport)的容器。 == Bootstrap5 .container-fluid 实例 == <sample title="" desc="" lang="html" hererun="1"> <div class="container-fluid"> <h1>我的第一个 Bootstrap 页面</h1> <p>使用了 .container-fluid,100% 宽度,占据全部视口(viewport)的容器。</p> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid"> <h1>我的第一个 Bootstrap 页面</h1> <p>使用了 .container-fluid,100% 宽度,占据全部视口(viewport)的容器。</p> </div> </body> </html> </run>
返回至“
Bootstrap5 安装使用
”。
上一节:
Bootstrap5_教程
下一节:
Bootstrap5_容器