阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Bootstrap4 安装使用

      Bootstrap4 安装使用

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

      Bootstrap 4 CDN

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

      https://www.bootcdn.cn/twitter-bootstrap/

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

      下载 Bootstrap 4

      你可以去官网 https://getbootstrap.com/ 下载 Bootstrap4 资源库。

      注:此外你还可以通过包的管理工具 npm、 gem、 composer 等来安装:

      npm install bootstrap@4.0.0-beta.2

      gem 'bootstrap', '~> 4.0.0.beta2'

      composer require twbs/bootstrap:4.0.0-beta.2


      创建第一个 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)的容器。

      两个 Bootstrap 4 页面

      Bootstrap4 .container 实例

      <div class="container">
        <h1>我的第一个 Bootstrap 页面</h1>
        <p>这是一些文本。</p> 
      </div>
      

      以下实例展示了占据全部视口(viewport)的容器。

      Bootstrap4 .container-fluid 实例

      <div class="container-fluid">
        <h1>我的第一个 Bootstrap 页面</h1>
        <p>使用了 .container-fluid,100% 宽度,占据全部视口(viewport)的容器。</p> 
      </div>
      

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录