• 关于Boostrap
    • 快速部署
      • 1行 CSS
      • 3行 JS
    • Hello, World!模板
    • 重要提示
      • HTML5 doctype头部规范
      • 响应式meta标签
      • 盒尺寸
      • 初始化与CSS重置
    • 社区支持

    关于Boostrap

    Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中,你将发现高质量的HTML、CSS以及JavaScript,使您的WEB工程项目变得无比简单,包括官方的CDN和启动器服务。

    快速部署

    使用 Bootstrap CDN嵌入4行代码就能完成导入! 点此这里下载离线包及源码。

    这是全新的Bootstrap v4.3.1手册,Zoomla!逐浪CMS官方团队负责维护这一项目的中文译本,如果您需要访问旧版4.0手册可以点击这里

    1行 CSS

    复制下面的 <link> 样式表粘贴到网页 <head> 里面,并放在其它CSS文件之前.

    1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    3行 JS

    全局组件运行在 jQuery 组件上,其中包括 Popper.js, 以及系统内置 JavaScript 插件. 建议将 <script> 的结束放在页面的 </body> 之前以符合新移动WEB规范,并遵循下面代码的先后顺序。

    您可以引用 jQuery 精简版,兼容完整版,并无二异。

    1. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    2. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    3. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    这里列出了需要JQuery、Bootstrap.js、Popper.js组件清单,如果你不熟悉组件可以继续查看本文档的其它部份的示例源码。

    查看需要JavsScript的组件

    • 组件提示
    • 按钮点击状态、勾(复)选框
    • 幻灯片、指标器
    • 折叠面板控制内容是否显示
    • 下拉菜单、显示定位事件(主要Popper.js)
    • 显示模态和浏览器侦听
    • 导航条以及响应式适配
    • 工具提示和移动事件 (主要 Popper.js)
    • 滚动侦听和导航事件

    Hello, World!模板

    使用H5标准构建一个最精简的模板,推荐规范如下(其中第2行在英文站点中使用<html lang="en">)替换:

    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4. <!-- Required meta tags -->
    5. <meta charset="utf-8">
    6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    7. <!-- Bootstrap CSS -->
    8. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    9. <title>Hello, world!</title>
    10. </head>
    11. <body>
    12. <h1>Hello, world!</h1>
    13. <!-- Optional JavaScript -->
    14. <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    15. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    16. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    17. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    18. </body>
    19. </html>

    拷贝上面代码,然后按照本文档的 布局 、 示例 来构建你的组件和内容.

    重要提示

    Bootstrap 推荐全局样式和设置统一,使之标准化,让我们深入了解它们。

    HTML5 doctype头部规范

    HTML5标准的 doctype 头部定义是首要的,否则会导致样式失真(中国码农往往直接抄国外站点将lang写成en的小细节也要注意以免贻笑大方)。

    1. <!doctype html>
    2. <html lang="zh-cn">
    3. ...
    4. </html>

    响应式meta标签

    移动设备优先, Bootstrap 4 不同于历史版本,它首先为移动设备优化代码,然后用CSS媒体查询来扩展组件。为了确保所有的设备的渲染和触摸效果,必须在网页的<head>区添加响应式的视图标签,简要的说就是优先引入下面一行。

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

    Hello, World!模板中作了明确的示例。

    盒尺寸

    为了更直观地用BootStrap的尺寸规范(而不受各浏览标准影响),我们把将全局box-sizing的值由默认的content-box重定义为border-box,以保证padding不会影响元素的最后计算宽度。但在页面引用Google自定义搜索、Google Map地图等第三方产品时会出现兼容性问题。

    对此你可以使用下面的方法来重置盒尺寸:

    1. .selector-for-some-widget {
    2. box-sizing: content-box;
    3. }

    用了上面方法重定义后,所有嵌套在内的元素-包括通过:before以及:after产生的内容,都会继承.selector-for-some-widget所指定的box-sizing。

    box model and sizing 盒框型技巧扩展学习.

    初始化与CSS重置

    为了解决跨浏览器的渲染差异, BootStrap使用了 初始化与CSS重置 对常用CSS组件进行了重新初始化,以更正浏览器和设备之间的各种厂商私有定义的缺陷。

    社区支持

    这是一些官方推荐的社区支持(境外站点可能会出现无法访问)。

    • Follow @getbootstrap on Twitter.
    • Read and subscribe to The Official Bootstrap Blog.
    • Join the official Slack room.
    • Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
    • Implementation help may be found at Stack Overflow (tagged bootstrap-4).
    • Developers should use the keyword bootstrap on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.
    • Zoomla!逐浪CMS论坛-国内首个引用BootStrap的CMS厂商 官方推特关注 @getbootstrap on Twitter.