#选项

名称	类型	缺省值	说明
block	boolean	false	块显示属性，设置后按钮同块的宽度相似; 仅在设置 "vertical" 属性时使用。
bsClass	string	'btn-group'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
justified	boolean	false
vertical	boolean	false

#带分隔线的下拉列表按钮

同样, 用 <SplitButton /> 生成带分隔线的下拉列表按钮组件。

#右对齐下拉属性

增加 pullRight 属性，触发下拉菜单时，下拉列表与按钮右对齐。

显示代码

#定制下拉框

如果下拉框不是你想要的样式，可以使用 Dropdown 组件显示定义 Toggle 和 Menu 组件。

需要加载选项

为方便起见 Toggle 和 Menu 组件做为 Dropdown 组件的静态资源。但你也可以从 /lib 目录直接导入它们 : require("react-bootstrap/lib/DropdownToggle").

显示代码

定制下拉组件

如果需要进一步的定制，也可以不用 Toggle 和 Menu 组件, 一切都由开发者自已定制。为了让 Dropdown 组件知道定制组件的角色，将 bsRole 属性添加到你的 menu 或 toggle 组件。下拉组件需要至少一个 bsRole="toggle" 属性，并要有唯一的 bsRole="menu" 组件。定制的 toggle 和 menu 组件必须要能处理 refs 属性.

显示代码

#属性 Props

#DropdownButton

名称	类型	缺省值	说明
bsSize	string		定义组件尺寸的属性。
bsStyle	string		定义组件可视的或上下文相关的样式属性。
componentClass	elementType	ButtonGroup	使用一个此组件提供的定制化样式。
disabled	boolean		组件是否禁用。
dropup	boolean		菜单将在 dropdown 按钮上方显示, 而不是在它的下边。
id required	string\|number		html id 属性, 必须
noCaret	boolean
onClose	function		下拉框关闭时的回调函数。
onSelect	function		一个菜单按钮被选中时的回调函数。 `(eventKey: any, event: Object) => any`
onToggle	function		controls `open` 下拉框可视情况发生变化时的回调。参数为 `open` 属性的值。 `function(Boolean isOpen) {}`
open	boolean		controlled by: `onToggle`, initial prop: `defaultOpen` 下拉框是否可见
pullRight	boolean		菜单与下拉框右侧对齐
role	string		如果值为 `'menuitem'`, 导致下拉框看起来像一个菜单项，而不是一个菜单按钮。
rootCloseEvent	one of: `'click'`, `'mousedown'`		组件区域外操作而导致组件将关闭的事件
title required	node

#SplitButton

名称	类型	缺省值	说明
bsSize	string		定义组件尺寸的属性。
bsStyle	string		定义组件可视的或上下文相关的样式属性。
componentClass	elementType	ButtonGroup	使用一个此组件提供的定制化样式。
disabled	boolean		组件是否禁用。
dropup	boolean		菜单将在 dropdown 按钮上方显示, 而不是在它的下边。
href	string
id required	string\|number		html id 属性, 必须
onClick	function
onClose	function		下拉框关闭时的回调函数。
onSelect	function		一个菜单按钮被选中时的回调函数。 `(eventKey: any, event: Object) => any`
onToggle	function		controls `open` 下拉框可视情况发生变化时的回调。参数为 `open` 属性的值。 `function(Boolean isOpen) {}`
open	boolean		controlled by: `onToggle`, initial prop: `defaultOpen` 下拉框是否可见
pullRight	boolean		菜单与下拉框右侧对齐
role	string		如果值为 `'menuitem'`, 导致下拉框看起来像一个菜单项，而不是一个菜单按钮。
rootCloseEvent	one of: `'click'`, `'mousedown'`		组件区域外操作而导致组件将关闭的事件
title required	node		带分隔线按钮的显示标题。
toggleLabel	string		toggle 的辅助功能标签，未设定时使用 `title` 的值。

#Dropdown

名称	类型	缺省值	说明
children	node		Dropdown 子结点，可以是一个 `<Dropdown.Toggle>` 或 `<Dropdown.Menu>`
componentClass	elementType	ButtonGroup	使用一个此组件提供的定制化样式。
disabled	boolean		组件是否禁用。
dropup	boolean		菜单将在 dropdown 按钮上方显示, 而不是在它的下边。
id required	string\|number		html id 属性, 必须
onClose	function		下拉框关闭时的回调函数。
onSelect	function		一个菜单按钮被选中时的回调函数。 `(eventKey: any, event: Object) => any`
onToggle	function		controls `open` 下拉框可视情况发生变化时的回调。参数为 `open` 属性的值。 `function(Boolean isOpen) {}`
open	boolean		controlled by: `onToggle`, initial prop: `defaultOpen` 下拉框是否可见
pullRight	boolean		菜单与下拉框右侧对齐
role	string		如果值为 `'menuitem'`, 导致下拉框看起来像一个菜单项，而不是一个菜单按钮。
rootCloseEvent	one of: `'click'`, `'mousedown'`		组件区域外操作而导致组件将关闭的事件

这个组件定义下拉框中的一个菜单条目。

支持基础的链接属性，如 href, target, title。

它也支持 Bootstrap MenuItem 的属性功能。

header: 增加一个区块的标题标签
divider: 增加区块间一个水平分隔线
disabled: 菜单项显示为禁用以阻止点击升效
eventKey: 传给回调函数的事件Key
onSelect: 当用户点击一个条目时调用的回调函数。

回调函数的参数为: event 和 eventKey

显示代码

#属性 Props

名称	类型	缺省值	说明
active	boolean		高亮显示菜单项，表示菜单项被选中。
bsClass	string	'dropdown'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
disabled	boolean	false	禁用菜单项，使其不能被选中。
divider	all	false	将此菜单项显示为水平分隔线，用在一组菜单项之间的区块分隔。
eventKey	any		传送给 `onSelect` 处理函数的参数, 用于标记选中菜单项的关键字。
header	boolean	false	将菜单项的风格显示为标题头标签，用来描述一组菜单项
href	string		HTML `href` 与 `a.href` 相关的属性.
onClick	function		菜单被点击时调用的回调函数。
onSelect	function		菜单被选中时调用的回调函数。 `(eventKey: any, event: Object) => any`

React-Bootstrap 使用很多 react-overlays 提供的功能来构造弹出层。

#静态显示

弹出式对话框（又称模态对话框）组件

显示代码

#基本示例

弹出式对话框包括标题头、主体和页脚。使用 <Modal/> 并结合其它组件来显示和隐藏弹出的对话框。<Modal/> 组件还有几个子组件: <Modal.Header/>, <Modal.Title/>, <Modal.Body/>, 和 <Modal.Footer/>, 这些可以用来填充对话框相关内容。

点击按钮感受一下弹出的对话框。

显示代码

附加导入选项

对话框的页头、标题、主题和页脚是 <Modal/> 组件中可访问的静态资源，但也可以从 /lib 目录例如: require("react-bootstrap/lib/ModalHeader") 直接导入。

#内嵌对话框

你需要将如下代码加入到工程，并保证容器有 modal-container 样式类。

.modal-container {
  position: relative;
}
.modal-container .modal, .modal-container .modal-backdrop {
  position: absolute;
}

显示代码

#使用标准 Bootstrap 方法定义对话框的尺寸。

也就是使用 "bsSize" 属性确定显示大对话框还是小对话框。

显示代码

#使用定制的 CSS 样式定义对话框的尺寸。

将定制的 css 样式施加到对话框的 div 的 "dialogClassName" 属性上，下面的例子就是展示一个定制宽度为 90% 宽的对话框。

显示代码

#属性 Props

#Modal

名称	类型	缺省值	说明
animation	boolean	true	打开和关闭对话框时使用滑动及渐变动画
autoFocus	boolean		为 `true` 时对话框打开时将自动将输入焦点迁移到自身。关闭时焦点自动换到关闭前的焦点上面。通常状态下不应设为false，否则一些辅助和助理功能将失效，例如屏幕阅读器（语音辅助提示）。
backdrop	one of: `'static'`, `true`, `false`		背景点击消失的组件属性，设为 'static' 时，在点击背景时不触发 "onHide" 回调函数
bsClass	string	'modal'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
bsSize	one of: `"lg"`, `"large"`, `"sm"`, `"small"`		定义组件尺寸的属性。
dialogClassName	string		应用到对话框 DOM 结点的 css 样式类
dialogComponentClass	elementType	ModalDialog	组件类型提供对话框内容标记功能。这个在你想使用自已的样式和标记生成定制化对话框组架时特别有用。
enforceFocus	boolean		当设为 `true` 时，在弹出对话消失时，界面将失去焦点。请使用默认值，以有利于使用辅助功能选项时屏幕阅读器可以读取正确。
keyboard	boolean		按 Esc 键时关闭掉对话框
onEnter	function		在对话框切入前调用的回调函数
onEntered	function		在对话框结束切入时调用的回调函数
onEntering	function		在对话框开始切入时调用的回调函数
onExit	function		在对话框关闭前调用的回调函数
onExited	function		在对话框关闭完成时调用的回调函数
onExiting	function		在对话框开始关闭时调用的回调函数
onHide	function		当前点击标题关闭按钮或非静态背景区域调用的回调函数。
show	boolean		对话框显示时，值为真。

#Modal.Header

名称	类型	缺省值	说明
aria-label	string	'Close'	'aria-label' 属性提供了存取关闭按钮标签的属性。这个对辅助阅读功能有用，当标签正文不可阅读时用到这个属性 readable.
bsClass	string	'modal-header'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
closeButton	boolean	false	明确组件是否包含一个关闭按钮
onHide	function		当关闭按钮按下时调用的回调函数。在对话框组件内部使用时， onHide 将自动到父对话框的`onHide`。

#Modal.Title

名称	类型	缺省值	说明
bsClass	string	'modal-title'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
componentClass	elementType	'h4'	使用一个此组件提供的定制化样式。

#Modal.Body

名称	类型	缺省值	说明
bsClass	string	'modal-body'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
componentClass	elementType	'div'	使用一个此组件提供的定制化样式。

#Modal.Footer

名称	类型	缺省值	说明
bsClass	string	'modal-footer'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
componentClass	elementType	'div'	使用一个此组件提供的定制化样式。

提示工具类似于链接中的 title 属性，但有着更好的效果。

显示代码

#带移动触发 OverlayTrigger

使用 OverlayTrigger 来指定 tooltips 及显示位置

显示代码

#在正文内指定

将 tooltip 定位于正文内。

Tight pants next level keffiyeh 请将光标移到我上面you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel 请将光标移到我上面 have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

显示代码

#属性 Props

#Overlay Trigger

名称	类型	缺省值	说明
animation	boolean \| elementType	Fade	使用动画
defaultOverlayShown	boolean	false	Overlay 初始时是否显示。
delay	number		显示或隐藏 Overlay 的延迟时间，毫秒为单位。
delayHide	number		隐藏 Overlay 的延迟时间，毫秒为单位。
delayShow	number		显示 Overlay 的延迟时间，毫秒为单位。
onEnter	function		在 Overlay 切入前调用的回调函数
onEntered	function		在 Overlay 结束切入时调用的回调函数
onEntering	function		在 Overlay 开始切入时调用的回调函数
onExit	function		在 Overlay 关闭前调用的回调函数
onExited	function		在 Overlay 关闭完成时调用的回调函数
onExiting	function		在 Overlay 开始关闭时调用的回调函数
overlay required	node		Overlay 中的元素或正文
placement	one of: `'top'`, `'right'`, `'bottom'`, `'left'`	'right'	设置 Overlay 的方向
rootClose	boolean	false	指示当用户点击 Overlay 外部区域时，是否触发 onHide
trigger	triggerType \| array<triggerType>	['hover', 'focus']	指示动作是否触发 Overlay 可视。

#Tooltip

名称	类型	缺省值	说明
arrowOffsetLeft	number \| string		Tooltip 箭头设为左部位置。
arrowOffsetTop	number \| string		Tooltip 箭头设为顶部位置。
bsClass	string	'tooltip'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
id required	string\|number		html id 属性, 用在辅助功能之中
placement	one of: `'top'`, `'right'`, `'bottom'`, `'left'`	'right'	设置 Tooltip 位置方向。
positionLeft	number \| string		Tooltip 设为左部位置。
positionTop	number \| string		Tooltip 设为顶部位置。

弹出框 Popover, 提供类似 Tooltip 的形式显示弹出内容。

显示代码

#使用 OverlayTrigger

Popover 组件和 Tooltip 组件一样可以用在 OverlayTrigger 组件中。

显示代码

#Trigger 行为

不鼓励使用 "hover" 或 "focus" 来触发弹出层，因为他们使用键盘或触屏设备时不易使用。

显示代码

#在容器内部触发 Popover 组件

使用 container 控制需要增加弹出层的 DOM 元素。这个元素必须是一个被定位的元素，使得定位能正确。

显示代码

#在滚动容器中定位弹出层元素

显示代码

#属性 Props

名称	类型	缺省值	说明
arrowOffsetLeft	number \| string		弹出框箭头设为左边位置。
arrowOffsetTop	number \| string		弹出框箭头设为顶部位置。
bsClass	string	'popover'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
id required	string		html id 属性，为辅助功能所必须
placement	one of: `'top'`, `'right'`, `'bottom'`, `'left'`	'right'	设置 Popover 位置方向
positionLeft	number \| string		弹出框设为左边弹出。
positionTop	number \| string		弹出框设为顶部弹出。
title	node		标题内容

OverlayTrigger 组件提供了大多数场景下可以使用的强大功能，但由于抽象的级别较高，在构造更细致的功能或定制化的操作行为时缺少灵活性。在这种场景下，可以不使用触发器，直接使用 Overlay 组件。

显示代码

#使用 Overlay 来代替 Tooltip 或 Popover

不必使用 Tooltip 或 Popover 组件，生成定义的弹出层可在 Overlay 组件中定制一些属性。

显示代码

#属性 Props

名称	类型	缺省值	说明
animation	boolean \| elementType	Fade	使用动画
onEnter	function		在 Overlay 切入前调用的回调函数
onEntered	function		在 Overlay 结束切入时调用的回调函数
onEntering	function		在 Overlay 开始切入时调用的回调函数
onExit	function		在 Overlay 关闭前调用的回调函数
onExited	function		在 Overlay 关闭完成时调用的回调函数
onExiting	function		在 Overlay 开始关闭时调用的回调函数
onHide	function		设置 `rootClose` 属性， Overlay 将关闭时调用的回调函数。
placement	one of: `'top'`, `'right'`, `'bottom'`, `'left'`	'right'	设置 Overlay 的方向
rootClose	boolean	false	指示当用户点击 Overlay 外部区域时，是否触发 onHide
show	boolean	false	设置 Overlay 的可视属性

React-Bootstrap 提供各种响应式、容易使用的组件供实现跨全站的导航以及页面内的导航。

导航提供了两种样式： pills 以及 tabs。禁用一个导航标签可以使用disabled。

显示代码

#下拉方式

使用NavDropdown增加下载菜单。

显示代码

#堆叠式

使用 stacked 让按钮垂直排列。

显示代码

#两边对齐

使用 justified 让导航条充满父容器的宽度。

显示代码

#属生 Props

#导航 Nav

名称	类型	缺省值	说明
activeHref	string		导航条目的 `href` 与此属性值一致的显示为激活。
activeKey	any		导航条目的 `eventKey` 与此属性匹配的激活，优行级高于 activeHref 匹配。
bsClass	string	'nav'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
bsStyle	one of: `"tabs"`, `"pills"`		定义组件可视的或上下文相关的样式属性。
justified	all	false
navbar	boolean		在 Navbar 中使用时应用对齐风格，这个属性使用在 Navbar 中会自动设置上。
onSelect	function		当导航条目被选中时调用的回调。 `function ( Any eventKey, SyntheticEvent event? )`
pullLeft	boolean	false	浮动 Nav 至左侧. 当 `navbar` 为 `true` 时，必要上下文样式会被添加。
pullRight	boolean	false	浮动 Nav 至右侧. 当 `navbar` 为 `true` 时，必要上下文样式会被添加。
role	string		导航 ARIA 角色, 在 TabContainer 上下文中, 缺省值设为 "tablist", 可以被 Nav 重新设置。当角色设为 "tablist" NavItem focus is managed according to the ARIA authoring practices for tabs: https://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#tabpanel
stacked	boolean	false	导航条目以堆叠式进行排列

#NavItem

名称	类型	缺省值
active	boolean	false
disabled	boolean	false
eventKey	any
href	string
onClick	function
onSelect	function
role	string

导航条是站点或页面来处理顶部导航操作的基础组件。

支持其它全部 Bootstrap 样式用做属性。只需使用驼峰格式，并将 navbar 从中移除。

例如 navbar-fixed-top 变成属性时就写成 fixedTop. 可以使用不同的属性 fixedTop, fixedBottom, staticTop, inverse, 以及 fluid.

你可以在 Nav 或其它子组件中使用 pullRight 属性来实现右对齐。

#导航条基本示例

显示代码

附加导入选项

导航条 Header, Toggle, Brand, 和 Collapse 组件可以用为 <Navbar/> 组件中的静态资源，也可以直接从 /lib 目录，使用类似: require("react-bootstrap/lib/NavbarHeader") 语句导入。

#响应式导航条

生成一个在移动设备上易于使用的导航条，将 Navbar.Toggle 加入到导航条部，并将导航内容放在 Navbar.Collapse 组件中. Navbar 将自动展示或收缩他们。

设备 defaultExpanded 属性来确定导航条开展的扩展状态。设置 collapseOnSelect 来使用得导航条在用户选择一个条目中自动收起。使用 expanded 和 onToggle 属性，你可更好的控制收起的行为。

显示代码

#表单

使用 Navbar.Form 组件可以给表单组件增加边距及对齐属性。

显示代码

#文本及非导航链接

链接或少量的文本可以放在 Navbar.Link、Navbar.Text组件中。

显示代码

#属性 Props

#导航条

名称	类型	缺省值	说明
bsStyle	one of: `"default"`, `"inverse"`	'default'	定义组件可视的或上下文相关的样式属性。
collapseOnSelect	boolean	false	当一个下属触发折叠时，设置 `expanded` 为 `false`。当无 `<Nav>` 或 `<Nav>` 派生的组件时，什么都不做。最好使用 onSelect 回调来处理`<Nav>`派生内容被选中的要做的一系列复杂工作。
componentClass	elementType	'nav'	为此组件设置一个定制化的风格
expanded	boolean		controlled by: `onToggle`, initial prop: `defaultExpanded` 显示设备 navbar 主体可视
fixedBottom	boolean	false	生成一个底部固定、随页面流动的导航条
fixedTop	boolean	false	生成一个顶部固定的、随页面流动的导航条
fluid	boolean	false	允许流动的导航条调整至页面或容器宽度而不是预设的屏幕宽度
inverse	boolean	false	使用暗色的导航条
onSelect	function		子 `<Nav>` 被选中调用的回调，用来执行复杂的关闭或其它操作。当无 `<Nav>` 或 `<Nav>` 派生的组件时，什么都不做。这个回调的参数为 eventKey - 来自于被选中的`<Nav>`派生组件，以及一个事件。 `function ( Any eventKey, SyntheticEvent event? )` For basic closing behavior after all `<Nav>` descendant onSelect events in mobile viewports, try using collapseOnSelect. 注意：如果你是手工使用这个 `OnSelect`属性关闭导航条，要确保已设备 `expanded` 为false, 而不是在 true 和 false 间翻转。
onToggle	function		controls `navExpanded` 当收缩或展开时调用的回调函数。当`<Navbar.Toggle>` 被点击，使用新的 `navExpanded` 布尔值参数调用。 boolean value.
role	string
staticTop	boolean	false	生成全宽度的随页面流动的导航条

#Navbar.Toggle

名称	类型	缺省值	说明
children	node		The toggle content, if left empty it will render the default toggle (seen above).
onClick	function

在一个带有层次的导航结构中标明当前页面的位置。在当前的Breadcrumb.Item 使用 active 属性表示。

不要同时设置 active 和 href 属性。 active 属性将使用span渲染界面，而不用 a 及 href ，当前页面条目不以链接方式显现。

#路径导航示例

显示代码

#属性 Props

Breadcrumb 组件本身没有公共属性。

#Breadcrumb.Item

名称	类型	缺省值	说明
active	boolean	false	设为真时，使用`span` 而不是 `a` 进行渲染
href	string		`a` 中的 `href` 属性
target	string		`a` 中的 `target` 属性
title	node		`a` 中的 `title` 属性

增加快速、动态 Tab 功能以方便在不同分类页面间进行切换。

#不受控方式

允许组件控制其自身的状态。

Tab 2 content

显示代码

#受控方式

通过属性传递激活状态。

Tab 1 content

显示代码

#无动画

将 animation 属性设为 false

Tab 1 content

显示代码

#具备下拉框的 Tabs

#定制 Tab 布局

更复杂、灵活的布局使用 TabContainer, TabContent, 和TabPane 组件结合任意样式的 Nav 让你可以快速将自定的 Tabs 组件与其它组件组装在一起。

只需生成一套 NavItems，每个导航条使用 eventKey 属性与TabPane的 eventKey 关联。将整个内容定义在 TabContainer 你就获得了定制化的Tab组件。下面的例子可以看出是一个使用栅格系统及元素来定制的。

Tab 1 content

显示代码

#属生 Props

#Tabs

名称	类型	缺省值	说明
activeKey	any		controlled by: `onSelect`, initial prop: `defaultActiveKey` 值为 `eventKey` 的 Tab 设为高亮，以表示激活。
animation	boolean	true
bsStyle	one of: `'tabs'`, `'pills'`	'tabs'	导航风格
id	requiredForA11y
onSelect	function		controls `activeKey` 一个 Tab 被选中时激发的回调函数。 `function ( Any eventKey, SyntheticEvent event? )`
unmountOnExit	boolean	false	当前 Tab 页不可视时，卸载它们 (将其从 DOM 中删除)

#Tab

名称	类型	缺省值	说明
animation	boolean \| elementType		显示或隐藏 `<TabPane>` 时是否使用动画。 `false` 禁用，`true` 使用缺省的 `<Fade>` 动画或任何其它指定的动画组件。
aria-labelledby	string
bsClass	string	'tab-pane'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
disabled	boolean
eventKey	any		在一组结点中，区别此 `<TabPane>` 的唯一标识。
id	string
onEnter	function		如果 animation 值不是 false，则定义 onEnter 转场动画回调
onEntered	function		如果 animation 值不是 false，则定义 onEntered 转场动画回调
onEntering	function		如果 animation 值不是 false，则定义 onEntering 转场动画回调
onExit	function		如果 animation 值不是 false，则定义 onExit 转场动画回调
onExited	function		如果 animation 值不是 false，则定义 onExited 转场动画回调
onExiting	function		如果 animation 值不是 false，则定义 onExiting 转场动画回调
tabClassName	string		tabClassName 是相关 NavItem 使用的样式名称
title	node
unmountOnExit	boolean		当前 Tab 页不可视时，卸载它们 (将其从 DOM 中删除)

#TabContainer

名称	类型	缺省值	说明
activeKey	any		controlled by: `onSelect`, initial prop: `defaultActiveKey` 当前活动页的 `eventKey` 。
generateChildId	function	(eventKey, type) => `${this.props.id}-${type}-${key}`	一个参数为 `eventKey` 和 `type`，为`<NavItem>` 和`<TabPane>` 返回唯一 id 的函数。函数必须是一个纯函数，就是讲在输入参数相同的情况下，返回值必须一样。The default value requires that an `id` to be set for the `<TabContainer>`. `type` 参数值为 `tab` 或 `pane`。
id	custom		HTML id attribute, required if no `generateChildId` prop is specified.
onSelect	function		controls `activeKey` 一个 tab 被选中时调用的回调函数。

#TabContent

名称	类型	缺省值	说明
animation	boolean \| elementType	true	设置所有 `<TabPane>` 的动画策略。使用 `false` 禁用, `true` 使用缺省的 `<Fade>` 动画或任何其它指定的动画组件。
bsClass	string	'tab'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
componentClass	elementType	'div'	使用一个此组件提供的定制化样式。
unmountOnExit	boolean	false	当前 Tab 页不可视时，卸载它们 (将其从 DOM 中删除)

#TabPane

名称	类型	缺省值	说明
animation	boolean \| elementType		显示或隐藏 `<TabPane>` 时是否使用动画。 `false` 禁用，`true` 使用缺省的 `<Fade>` 动画或任何其它指定的动画组件。
aria-labelledby	string
bsClass	string	'tab-pane'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
eventKey	any		在一组结点中，区别此 `<TabPane>` 的唯一标识。
id	string
onEnter	function		如果 animation 值不是 false，则定义 onEnter 转场动画回调
onEntered	function		如果 animation 值不是 false，则定义 onEntered 转场动画回调
onEntering	function		如果 animation 值不是 false，则定义 onEntering 转场动画回调
onExit	function		如果 animation 值不是 false，则定义 onExit 转场动画回调
onExited	function		如果 animation 值不是 false，则定义 onExited 转场动画回调
onExiting	function		如果 animation 值不是 false，则定义 onExiting 转场动画回调
unmountOnExit	boolean		当前 Tab 页不可视时，卸载它们 (将其从 DOM 中删除)

是为站点或应用提供分页链接，实现多页分页的组件。设置 items 为页面总数。 activePage 属性说明激活的页面。

1
2
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7
8
9
10

显示代码

#更多选项

例如 first, last, previous, next, boundaryLinks 以及 ellipsis.

显示代码

#属性 Props

名称	类型	缺省值	说明
activePage	number	1
boundaryLinks	boolean	false	为 `true` 时，将显示第一和最后页的按钮
bsClass	string	'pagination'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
buttonComponentClass	elementType		按钮使用的定制组件风格
ellipsis	boolean \| node	true	为 `true` 时，将显示省略结点指示('…')。否则将显示提供的指定结点。
first	boolean \| node	false	为 `true` 时，显示到最前面的按钮 ('«')。否则将显示提供的指定结点。
items	number	1
last	boolean \| node	false	为 `true` 时，显示到最后面的按钮 ('»')。否则将显示提供的指定结点。
maxButtons	number	0
next	boolean \| node	false	为 `true` 时，显示到后一页的按钮 ('›'). 否则将显示提供的指定结点。
onSelect	function
prev	boolean \| node	false	为 `true` 时，显示到前一页的按钮 ('‹'). 否则将显示提供的指定结点。

提供快速向前和向后按钮。

#缺省为居中设置

显示代码

#对齐

向前 previous 或向后 next 属性设为 true, 实现左对齐或右对齐。

显示代码

#禁用

将 disabled 属性设为 true 来禁用链接。

显示代码

#属性 Props

#分页器 Pager

名称	类型	缺省值	说明
bsClass	string	'pager'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
onSelect	function

#Pager.Item

此组件没有公有属性。

本节的组件提供不同的方法来组建页面并显示数据。

#基本网格

<Col xs={12} md={8} />

<Col xs={6} md={4} />

<Col xsHidden md={4} />

<Col xs={6} xsOffset={6} />

<Col md={6} mdPush={6} />

<Col md={6} mdPull={6} />

显示代码

#清除修订

不加 Clearfix 时，在 sm (768px ≤ width < 992px)。视图下显示不正确。

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere.

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere.

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus.

显示代码

加上 Clearfix, 可修订问题，栏目清除正确。

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere.

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.

<Clearfix visibleSmBlock />

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere.

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus.

显示代码

#属性 Props

#网络 Grid

名称	类型	缺省值	说明
bsClass	string	'container'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
componentClass	elementType	'div'	此组件使用的定制化类名
fluid	boolean	false	将任何宽度的网格布局变为全宽布局. 增加 `container-fluid` 样式.

#行 Row

名称	类型	缺省值	说明
bsClass	string	'row'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
componentClass	elementType	'div'	使用一个此组件提供的定制化样式。

#列 Col

名称	类型	缺省值	说明
bsClass	string	'col'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
componentClass	elementType	'div'	使用一个此组件提供的定制化样式。
lg	number		大型设备(≥1200px)上列的跨度（1-12），对应于样式前缀 `col-lg-`
lgHidden	boolean		大型设备上隐藏列，对应于样式前缀 `hidden-lg`
lgOffset	number		大型设备上右移列数，对应于样式前缀 `col-lg-offset-`
lgPull	number		大型设备上左移列排序，对应于样式前缀 `col-lg-pull-`
lgPush	number		大型设备上右移列排序，对应于样式前缀 `col-lg-push-`
md	number		中型设备(≥992px)上列的跨度（1-12），对应于样式前缀 `col-md-`
mdHidden	boolean		中型设备上隐藏列，对应于样式前缀 `hidden-md`
mdOffset	number		中型设备上右移列数，对应于样式前缀 `col-md-offset-`
mdPull	number		中型设备上左移列排序，对应于样式前缀 `col-md-pull-`
mdPush	number		中型设备上右移列排序，对应于样式前缀 `col-md-push-`
sm	number		小型设备(<768px)上列的跨度（1-12），对应于样式前缀 `col-sm-`
smHidden	boolean		小型设备上隐藏列，对应于样式前缀 `hidden-sm`
smOffset	number		小型设备上右移列数，对应于样式前缀 `col-sm-offset-`
smPull	number		小型设备上左移列排序，对应于样式前缀 `col-sm-pull-`
smPush	number		小型设备上右移列排序，对应于样式前缀 `col-sm-push-`
xs	number		极小设备(<768px)上列的跨度（1-12），对应于样式前缀 `col-xs-`
xsHidden	boolean		极小设备上隐藏列，对应于样式前缀 `hidden-xs`
xsOffset	number		极小设备上右移列数，对应于样式前缀 `col-xs-offset-`
xsPull	number		极小型设备上左移列排序，对应于样式前缀 `col-xs-pull-`
xsPush	number		极小设备上右移列排序，对应于样式前缀 `col-xs-push-`

#清除修订 Clearfix

名称	类型	缺省值	说明
bsClass	string	'clearfix'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
componentClass	elementType	'div'	使用一个此组件提供的定制化样式。
visibleLgBlock	boolean		大型设备上使用 clearfix，相当于增加样式 `visible-lg-block`
visibleMdBlock	boolean		中型设备上使用 clearfix，相当于增加样式 `visible-md-block`
visibleSmBlock	boolean		小型设备上使用 clearfix，相当于增加样式 `visible-sm-block`
visibleXsBlock	boolean		极小设备上使用 clearfix，相当于增加样式 `visible-xs-block`

一个轻量型、灵活的组件，使用大型视窗显示站点的关键内容。

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

显示代码

#属性 Props

名称	类型	缺省值	说明
bsClass	string	'jumbotron'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
componentClass	elementType	'div'	使用一个此组件提供的定制化样式。

使用 h1 能适当处理页面上留白及段落间的间隙。它可以使用 h1’的缺省 small 元素, 也可以使用其它组件。

显示代码

#Props

名称	类型	缺省值	说明
bsClass	string	'page-header'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。

列表组件可以用来显示一系列元素，不仅是简单的列表，也可以是复杂的、有定制化的内容。

#缺省居中

Item 1
Item 2
...

显示代码

#链接

在ListGroupItem 设置 href 或者 onClick 属性，可以生产带链接或响应点击事件的条目元素。

Link 1 Link 2

显示代码

#状态风格

设置 active 或 disabled 属性为 true 可以高亮显示或禁用条目。

Link 1 Link 2 Link 3

显示代码

#颜色风格

设置相关条目的 bsStyle 属性。

Success
Info
Warning
Danger

显示代码

#带有标题

设置 header 属性，可以产生一个结构化的条目, 有标题和正文区域。

Heading 1

Some body text

Heading 2

Linked item

Heading 3

Danger styling

显示代码

#使用定制化的子组件

直接使用 ListGroupItems 时， ListGroup 查看条目是否有 href 或 onClick 属性，这个属性用来关联 DOM 元素。当使用定制化的子组件时，要设置componentClass 属性以便明确输出到哪个 ListGroup 元素。

Custom Child 1
Custom Child 2
Custom Child 3

显示代码

#属性 Props

#ListGroup

名称	类型	缺省值	说明
bsClass	string	'list-group'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
componentClass	elementType		可以定制本组件的样式，如果不指定，当每个 `<ListGroupItem>` 子组件没有动作时使用 `'li'`，否则使用 `'div'`。

#ListGroupItem

名称	类型	缺省值	说明
active	any
bsClass	string	'list-group-item'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
bsStyle	one of: `"success"`, `"warning"`, `"danger"`, `"info"`		定义组件可视的或上下文相关的样式属性。
disabled	any
header	node
href	string
listItem	boolean	false
onClick	function
type	string

使用 striped, bordered, condensed 以及 hover 属性定制表格。

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

显示代码

#响应式

使用 responsive 属性将在小型设备(under 768px)实现水平滚动。在大于 768px 宽的设备上，则没有变化。

#	分栏标题	分栏标题	分栏标题	分栏标题	分栏标题	分栏标题
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

显示代码

#属性 Props

名称	类型	缺省值	说明
bordered	boolean	false
bsClass	string	'table'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
condensed	boolean	false
hover	boolean	false
responsive	boolean	false
striped	boolean	false

#基本例子

缺省情况下， <Panel /> 对于一些内容设定基础边框和边距。

还可以根据需求设定附带的属性，例如定制一个 onClick 方法来响应 div 元素的点击。

Basic panel example

显示代码

#可伸缩面板

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

显示代码

#具备标题的面板

使用 header 就可轻松增加面板的标题。

没有标题样式的面板头

Panel content

面板标题

Panel content

显示代码

#具备注脚的面板

在 footer 中可以增加按钮或提示。当上下文变量无意义时，要注意面板注脚不继承颜色和边距。

Panel content

Panel footer

显示代码

#背景调整

和其它组件一样，使用 bsStyle 定制面板的风格，使其看起来更醒目。

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

显示代码

#结合表格及列表使用

使用 fill 属性，并将其设为 <Table /> 或 <ListGroup /> 元素，则这些元素将充满面板。

Panel heading

Some default panel content here.

Item 1
Item 2
…

Some more panel content here.

显示代码

#受控制的面板组

PanelGroup 可由父组件进行控制。 activeKey 属性指定哪个面板打开。

Panel 1

Panel 1 content

Panel 2

显示代码

#不控制的面板组

PanelGroup 也可不受制，由组件自身维持打开的状态。 defaultActiveKey 属性指示初始时打开激活哪个面板。

Panel 1

Panel 2

Panel 2 content

显示代码

#面板折叠

<Accordion /> 是 <PanelGroup accordion /> 的简写，标志面板处在折叠状态。

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

显示代码

#属性 Props

#Panels, Accordion

名称	类型	缺省值	说明
bsClass	string	'panel'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
bsStyle	one of: `"success"`, `"warning"`, `"danger"`, `"info"`, `"default"`, `"primary"`	'default'	定义组件可视的或上下文相关的样式属性。
collapsible	boolean
defaultExpanded	boolean	false
eventKey	any
expanded	boolean
footer	node
header	node
headerRole	string
id	string \| number
onEnter	function
onEntered	function
onEntering	function
onExit	function
onExited	function
onExiting	function
onSelect	function
panelRole	string

#PanelGroup

名称	类型	缺省值	说明
accordion	boolean	false
activeKey	any
bsClass	string	'panel-group'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
defaultActiveKey	any
onSelect	function
role	string

使用背景墙可显示一组元素嵌入或分组的效果。

Look I'm in a well!

显示代码

#可选样式

通过附加的两个样式来控制边距及圆角样式。

Look I'm in a large well!

Look I'm in a small well!

显示代码

#属性 Props

名称	类型	缺省值	说明
bsClass	string	'well'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
bsSize	one of: `"lg"`, `"large"`, `"sm"`, `"small"`		定义组件尺寸的属性。

<FormControl> 组件将一个表单控件渲染成 Bootstrap 样式。 <FormGroup> 组件以相应的留白封装一个 Form 控件，支持标签、帮助内容和校验状态。为保证可存取，需要设置 <FormGroup> 中的 controlId , 并使用 <ControlLabel> 设定标签。

显示代码

<FormControl> 组件直接渲染 <input> 或其他指定的组件。如果你需要存取未受控的 <FormControl> 的值, 需要设定未受控输入的 ref 属性, 然后调用 ReactDOM.findDOMNode(ref) 来取出对应的 DOM 结点。

如果应用中包含了大量的 Form Group，最好构造一个新的组件来封装这些字段，完成标签、控件以及必要元素的渲染。我们没有提供这个组件，是因为各种场景太特殊了，没有办法提供一个统一的解决方案。

#属性 Props

#FormGroup

名称	类型	缺省值	说明
bsClass	string	'form-group'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
bsSize	one of: `"lg"`, `"large"`, `"sm"`, `"small"`		定义组件尺寸的属性。
controlId	string		设置`<FormControl>` 的 `id`，以及 `<FormGroup.Label>` 的 `htmlFor`
validationState	one of: `'success'`, `'warning'`, `'error'`, `null`

#FormControl

名称	类型	缺省值	说明
bsClass	string	'form-control'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
bsSize	one of: `"sm"`, `"small"`, `"lg"`, `"large"`		定义组件尺寸的属性。
componentClass	elementType	'input'	使用一个此组件提供的定制化样式。
id	string		没显式指定时 `<FormGroup>` 中使用的 `controlId`。
inputRef	function		`<input>` 元素中增加的 ref 属性内容。取值只能为函数，例如。 `<FormControl inputRef={ref => { this.input = ref; }} />`
type	string		组件类名为 `'input'` 时使用。

#ControlLabel

名称	类型	缺省值	说明
bsClass	string	'control-label'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
htmlFor	string		Uses `controlId` from `<FormGroup>` if not explicitly specified.
srOnly	boolean	false

<FieldGroup> 表单的布局中支持的控件。 <FormControl> 用于 <input>, <textarea>, 以及 <select>. <Checkbox> 和 <Radio> 分别用于 checkboxes and radios respectively， inline 说明渲染这些控件在同一行里。 <FormControl.Static> 用于静态文本。

#属性 Props

#Checkbox

名称	类型	缺省值	说明
bsClass	string	'checkbox'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
disabled	boolean	false
inline	boolean	false
inputRef	function		`<input>` 元素的 ref 属性值，此处只能使用函数，例如： `<Checkbox inputRef={ref => { this.input = ref; }} />`
validationState	one of: `'success'`, `'warning'`, `'error'`, `null`		`inline` 没设置时才生效。

#Radio

名称	类型	缺省值	说明
bsClass	string	'radio'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
disabled	boolean	false
inline	boolean	false
inputRef	function		`<input>` 元素的 ref 属性值，此处只能使用函数，例如： `<Radio inputRef={ref => { this.input = ref; }} />`
validationState	one of: `'success'`, `'warning'`, `'error'`, `null`		`inline` 没设置时才生效。

#FormControl.Static

名称	类型	缺省值	说明
bsClass	string	'form-control-static'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
componentClass	elementType	'p'	使用一个此组件提供的定制化样式。

#帮助区域

名称	类型	缺省值	说明
bsClass	string	'help-block'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。

#一行内的表单

使用 <Form inline> 来代替 <form>. JSX 将去除行间的留白，控件的留白让你自已控制。另外 Bootstrap 对于一行内表单控件的宽度缺省设为为 width: auto ，所以你需要根据需求设置相应的宽度。

显示代码

#水平表单

使用 <Form horizontal> 代替 <form>, 然后使用 <Col> 来对齐标签和控件。这里不需要使用<Row> <FormGroup> 在水平表单中将起到定义行的作用。

显示代码

#属性 Props

#表单 (只在水平或一行内表单的情况下才使用)

名称	类型	缺省值	说明
bsClass	string	'form'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
componentClass	elementType	'form'	使用一个此组件提供的定制化样式。
horizontal	boolean	false
inline	boolean	false

#带附加功能的输入

将表单控制放在 <InputGroup> 中，就可以使用通常的或按钮的附加功能。外来的一些配置可能需要设置 CSS。

显示代码

#输入字体尺寸

<FormGroup> 或 <InputGroup> 中使用 bsSize 来改变输入控件的尺寸。它也影响附带的功能或其他选项。

显示代码

#属性 Props

#InputGroup

名称	类型	缺省值	说明
bsClass	string	'input-group'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
bsSize	one of: `"lg"`, `"large"`, `"sm"`, `"small"`		定义组件尺寸的属性。

#InputGroup.Addon

名称	类型	缺省值	说明
bsClass	string	'input-group-addon'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。

#InputGroup.Button

名称	类型	缺省值	说明
bsClass	string	'input-group-btn'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。

validationState 可设置为 'success', 'warning' 或 'error' 中间的一个，用来指示校验状态。将 validationState 设为 null (或 undefined) 隐藏校验状态。 <FormControl.Feedback> 用来在有校验状态时显示一个反馈图标。

显示代码

#属性 Props

#FormControl.Feedback

名称	类型	缺省值	说明
bsClass	string	'form-control-feedback'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。

React-Bootstrap 的媒体内容提供显示图像以及其它媒体内容，这些内容可以响应式的方式提供给用户，并支持对这些组件的样式进行定义。

#形状

使用 rounded, circle 和 thumbnail 属性可以定制图像的形状。

显示代码

#响应式

使用 responsive 可以较好的根据父元素缩放图像

显示代码

#属性 Props

名称	类型	缺省值	说明
bsClass	string	'img'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
circle	boolean	false	设置图像为圆形
responsive	boolean	false	设置图像为响应式
rounded	boolean	false	设置图像带圆角
thumbnail	boolean	false	设置图像为缩略图

缩略图用于标志图像而使用的，你可以扩展 grid 组件。

#带提示的 Thumbnail

在图像周边显示提示框

显示代码

#分离 Thumbnail

在图像及其他子元素周边显示提示框。

缩略图标签

说明

缩略图标签

说明

缩略图标签

说明

显示代码

#属性 Props

名称	类型	缺省值	说明
alt	string
bsClass	string	'thumbnail'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
href	string
src	string

允许浏览器基于容器块的尺寸决定视频或幻灯片的维度，产生的比率及缩放可以适合所有设备。

你无需在 iframe 里使用 frameborder="0"。

不管是 16:9 还是 4:3 的比率必须通过 a16by9 或 a4by3 属性来设置。

显示代码

#属性 Props

名称	类型	缺省值	说明
a16by9	boolean	false	16x9 比率
a4by3	boolean	false	4x3 比率
bsClass	string	'embed-responsive'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
children required	element		这个组件需要单一的子结点。

#不受控的

允许组件控制自已的状态

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

显示代码

#受控的

通过属性传递激活状态。

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

显示代码

#属性 Props

#Carousel

名称	类型	缺省值	说明
activeIndex	number
bsClass	string	'carousel'	定义组件基础 CSS 及前缀。通常改变 `bsClass` 目的是为组件提供新的、非 Bootstrap 自带样式。
controls	boolean	true
defaultActiveIndex	number
direction	one of: `'prev'`, `'next'`
indicators	boolean	true
interval	number	5000
nextIcon	node	<Glyphicon glyph="chevron-right" />
nextLabel	string	'Next'	提供给屏幕阅读器的标签，用于显示走马灯中下一个元素。设为 null 使不激活。
onSelect	function		当激活条目发生变化时调用的回调函数 `(eventKey: any) => any \| (eventKey: any, event: Object) => any` 如果回调函数有两个以上的参数时，第二个参数将是一个具有 `direction` 的持久化对象，指示移动的方向。
onSlideEnd	function
pauseOnHover	boolean	true
prevIcon	node	<Glyphicon glyph="chevron-left" />
prevLabel	string	'Previous'	提供给屏幕阅读器的标签，用于显示走马灯中前一个元素。设为 null 使不激活。
slide	boolean	true
wrap	boolean	true

#Carousel.Item

名称	类型	缺省值
active	boolean	false
animateIn	boolean	false
animateOut	boolean	false
direction	one of: `'prev'`, `'next'`
index	number
onAnimateOutEnd	function