非常教程

Bootstrap 4参考手册

快速开始 | Getting started

下载 | Download

下载Bootstrap以获取已编译的CSS和JavaScript,源代码,或者将其与您最喜爱的软件包管理器(如npm,RubyGems等)一起使用。

编译CSS和JS

Bootstrap v4.0.0-beta.2下载现成可用的编译代码,轻松将其放入您的项目中,其中包括:

  • 编译和缩小CSS包(请参阅CSS文件比较)
  • 编译和缩小JavaScript插件

这不包括文档,源文件或任何可选的JavaScript依赖项(jQuery和Popper.js)。

下载

源文件

通过下载我们的源Sass,JavaScript和文档文件,用您自己的资产管道编译Bootstrap。这个选项需要一些额外的工具:

  • Sass编译器(支持Libsass或Ruby Sass)用于编译您的CSS。
  • 用于CSS供应商前缀的Autoprefixer

如果您需要构建工具,它们将包含在开发Bootstrap及其文档中,但它们可能不适合您自己的目的。

下载源码

Bootstrap CDN

使用Bootstrap CDN跳过下载,将缓存的Bootstrap编译后的CSS和JS版本传送到您的项目。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

如果您使用我们编译的JavaScript,请不要忘记在它之前包含jQuery和Popper.js的CDN版本。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

包管理员

将Bootstrap的源文件引入几乎所有最受欢迎的软件包管理器的项目中。无论软件包管理器如何,Bootstrap都需要Sass编译器和 Autoprefixer来完成与我们官方编译版本相匹配的设置。

npm

使用npm包安装Bootstrap到您的Node.js应用程序中:

npm install bootstrap@4.0.0-beta.2

require('bootstrap')将所有Bootstrap的jQuery插件加载到jQuery对象上。该bootstrap模块本身不出口任何东西。您可以通过将/js/*.js文件加载到程序包的顶级目录下来手动加载Bootstrap的jQuery插件。

Bootstrap的package.json包含下列键下的一些额外的元数据:

  • sass- Bootstrap主要Sass源文件的路径
  • style - 使用默认设置进行预编译的Bootstrap非缩小CSS的路径(无自定义)

RubyGems

使用Bundler(推荐)和RubyGems在您的Ruby应用程序中安装Bootstrap,方法是将以下行添加到您的Gemfile

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

或者,如果您不使用Bundler,则可以通过运行以下命令来安装gem:

gem install bootstrap -v 4.0.0.beta2

有关更多详细信息,请参阅gem的自述文件。

Composer

您还可以使用Composer安装和管理Bootstrap的Sass和JavaScript :

composer require twbs/bootstrap:4.0.0-beta.2

NuGet

如果您使用.NET开发,您还可以使用NuGet安装和管理Bootstrap的CSS或Sass和JavaScript :

Install-Package bootstrap -Pre
Install-Package bootstrap.sass -Pre

-Pre要求,直到引导V4有一个稳定版本。

Bootstrap 4

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。

主页 https://getbootstrap.com/
源码 https://github.com/twbs/bootstrap
版本 4
发布版本 4.0.0-beta.2

Bootstrap 4目录

1.快速开始 | Getting started
2.组件·信息提示框 | Alerts
3.组件·徽章 | Badges
4.组件·面包屑导航 | Breadcrumb
5.组件·按钮组 | Button group
6.组件·按钮 | Buttons
7.组件·卡片 | Cards
8.组件·轮播 | Carousel
9.组件·折叠 | Collapse
10.组件·下拉菜单 | Dropdowns
11.组件·表单 | Forms
12.组件·输入框组 | Input group
13.组件·大屏幕 | Jumbotron
14.组件·列表组 | List group
15.组件·模态框 | Modal
16.组件·导航栏 | Navbar
17.组件·导航 | Navs
18.组件·分页 | Pagination
19.组件·弹出框 | Popovers
20.组件·进度条 | Progress
21.组件·滚动监听 | Scrollspy
22.组件·提示工具 | Tooltips
23.内容 | Content
24.布局 | Layout
25.迁移 | Migration
26.实用工具 | Utilities
27.Bootstrap4 网格系统
28.Bootstrap4 按钮组
29.Bootstrap4 按钮
30.Bootstrap4 图像形状
31.Bootstrap4 表格
32.Bootstrap4 颜色
33.Bootstrap4 文字排版
34.Bootstrap4 轮播
35.Bootstrap4 表单控件
36.Bootstrap4 表单
37.Bootstrap4 导航栏
38.Bootstrap4 导航
39.Bootstrap4 折叠
40.Bootstrap4 下拉菜单
41.Bootstrap4 卡片
42.Bootstrap4 分页
43.Bootstrap4 小工具
44.Bootstrap4 滚动监听
45.Bootstrap4 弹出框
46.Bootstrap4 提示框
47.Bootstrap4 模态框
48.Bootstrap 4 多媒体对象
49.Bootstrap 4 Flex(弹性)布局
50.Bootstrap4 创建一个网页
51.Bootstrap4 自定义表单
52.Bootstrap4 面包屑导航(Breadcrumb)