关于网站建设网页设计网站开发小程序独立站跨境电商二维码制作

bootstrap使用手册

关于

Bootstrap是一个流行的前端开发框架，可以帮助开发人员快速构建响应式的网站、网页设计和小程序。它包含了丰富的HTML、CSS和JavaScript组件，使得开发过程更加高效、简单，并且可以在多种设备上进行优化展示。

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

快速部署

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

1行 CSS

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

<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 精简版,兼容完整版，并无二异。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<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">）替换:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

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

全局规范

Bootstrap 推荐全局样式和设置统一，使之标准化，这些样式设置（比如root设置-译者注）会影响全局，支持跨浏览器和标准化，让我们来学习它

HTML5 doctype头部规范

HTML5标准的 doctype 头部定义是首要的，否则会导致样式失真（中国码农往往直接抄国外站点将lang写成en-正确中文站点应该用zh-CN，这些小细节也要注意，以免贻笑大方-译者注)。

<!doctype html>
<html lang="zh-cn">
...
</html>

响应式meta标签

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

<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地图等第三方产品时会出现兼容性问题。

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

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

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

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

初始化与CSS重置

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

加入 DEVDIY 开发者社区

利用 DEVDIY 资源快速拓展您的业务
有兴趣与 DEVDIY 开发者合作吗？