目录搜索
Getting startedAccessibility(无障碍)Browsers and devices(浏览器和设备)Build tools(构建工具)Contents(内容)Download(下载)JavaScriptTheming Bootstrap(主题Bootstrap)WebpackComponents: AlertsAlerts(警报)Components: BadgesBadges(徽章)Components: BreadcrumbBreadcrumbComponents: Button groupButton group(按钮组)Components: ButtonsButtons(按钮)Components: CardsComponents: CarouselCards(卡)Carousel(圆盘传送带)Components: CollapseCollapse(折叠)Components: DropdownsDropdowns(下拉菜单)Components: FormsForms(表单)Components: Input groupInput group(输入群组)Components: Input groupJumbotron(广告大屏幕)Components: List groupList group(列表组)Components: ModalModal(互动视窗)Components: NavbarNavbar(导航栏)Components: NavsNavs(导航栏)Components: PaginationPagination(分页)Components: PopoversPopovers(弹出框)Components: ProgressProgress(进度条)Components: ScrollspyScrollspy(滚动监听)Components: TooltipsTooltips(提示工具)ContentCode(代码)Figures(图片区)Images(图片)Reboot(重置)Tables(表格)Typography(排版)LayoutGrid(网格)Layout(布局)Media object(多媒体对象)Utilities for layout(排版通用类别)MigrationMigrating to v4(迁移到v4)UtilitiesBorders(边框)Clearfix(清除浮动)Close icon(关闭图标)Colors(颜色)Display property(显示属性)Embeds(内嵌)Flex(弹性)Float(浮动)Image replacement(图像替换)Position(位置)Screenreaders(荧幕阅读器)Sizing(尺寸)Spacing(间隔)Text(文本)Vertical alignment(垂直对齐)Visibility(能见度)
文字

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

上一篇:下一篇: