directory search
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
characters

下载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

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有一个稳定版本。

Previous article: Next article: