Bootstrap 4 中文开发手册
目录搜索
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（能见度）

©
本文档使用 php中文网手册 发布

文字

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

上一篇：下一篇：