减小字体
增大字体- ·上一篇文章：Bootstrap4 教程
- ·下一篇文章：Bootstrap4 网格系统
Bootstrap4 安装使用
Bootstrap4安装使用我们可以通过以下两种方式来安装Bootstrap4：使用Bootstrap4CDN。从官网getbootstrap.com下载Bootstrap4。Bootstrap4CDN国内推荐使用StaticfileCDN上的库：Bootstrap4CDN<!--新Bootstrap4核心CSS文件--><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"><!--jQuery文件。务必在bootstrap.min.js之前引入--><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><!--popper.min.js用于弹窗、提示、下拉菜单--><scriptsrc="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script><!--最新的Bootstrap4核心JavaScript文件--><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>此外，你还可以使用以下的CDN服务：国内推荐使用:https://www.staticfile.org/国际推荐使用：https://cdnjs.com/下载Bootstrap4你可以去官网https://getbootstrap.com/下载Bootstrap4资源库。注：此外你还可以通过包的管理工具npm、gem、composer等来安装：npminstallbootstrap@4.0.0-beta.2gem'bootstrap','~>4.0.0.beta2'composerrequiretwbs/bootstrap:4.0.0-beta.2创建第一个Bootstrap4页面1、添加HTML5doctypeBootstrap要求使用HTML5文件类型，所以需要添加HTML5doctype声明。HTML5doctype在文档头部声明，并设置对应编码:<!DOCTYPEhtml><html><head><metacharset="utf-8"></head></html>移动设备优先为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewportmeta标签，如下所示：<metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no">width=device-width表示宽度是设备屏幕的宽度。initial-scale=1表示初始的缩放比例。shrink-to-fit=no自动适应手机屏幕的宽度。容器类Bootstrap4需要一个容器元素来包裹网站的内容。我们可以使用以下两个容器类：.container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。两个Bootstrap4页面Bootstrap4.container实例<divclass="container"><h1>我的第一个Bootstrap页面</h1><p>这是一些文本。</p></div>尝试一下以下实例展示了占据全部视口（viewport）的容器。Bootstrap4.container-fluid实例<divclass="container-fluid"><h1>我的第一个Bootstrap页面</h1><p>使用了.container-fluid，100%宽度，占据全部视口（viewport）的容器。</p></div>尝试一下在CloudStudio中使用Bootstrap下面我们介绍如何在CloudStudio中安装、使用Bootstrap4：step1：访问腾讯云开发者平台，注册/登录账户。step2：在右侧的运行环境菜单选择："ubuntu"step3：在左侧代码目录中新建html目录，编写你的HTML代码，例如index.htmlstep4：在index.html文件的中粘贴如下代码、来引入Bootsrap4（也可以从官网https://getbootstrap.com/下载到Bootstrap4资源库）：<!--新Bootstrap4核心CSS文件--><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"><!--jQuery文件。务必在bootstrap.min.js之前引入--><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><!--popper.min.js用于弹窗、提示、下拉菜单--><scriptsrc="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script><!--最新的Bootstrap4核心JavaScript文件--><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>step5：在终端中输入命令sudovim/etc/nginx/sites-enabled/default。将配置文件红框部分修改为如下图所示，然后输入命令：sudonginxrestart重启nginx服务（nginx安装完成并启动后默认会监听80端口。我们需要将nginx的站点目录以及监听的端口号改为我们需要的）step6：点击最右侧的【访问链接】选项卡，在访问链接面板中填写端口号为：8080（和刚才nginx配置文件中的端口号一致），点击创建链接，即可点击生成的链接访问我们刚刚编写的代码，查看Bootstrap4组件的效果。现在CODING正在举办一场基于CloudStudio工作空间的【我最喜爱的CloudStudio插件评选大赛】。进入活动官网：https://studio.qcloud.coding.net/campaign/favorite-plugins/index，了解更多活动信息。
Bootstrap4 安装使用
