React-Bootstrap


本站和网页 http://react.tgwoo.com/introduction.html 的作者无关,不对其内容负责。快照谨为网络故障时之索引,不代表被搜索网站的即时页面。

React-Bootstrap
React-BootstrapToggle navigation介绍起步组件支持GitHub介绍最流行的前端架构, 为 React 而重构。React-Bootstrap 是可重用的前端组件库。与 Twitter Bootstrap 一致外观与感受,但通过 Facebook 的 React.js 框架获得更清爽的代码。如果你想要一个名为 "Something" 按钮,点击时触发 someCallback 函数。采用原生应用时,可写成类似:button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)使用流程的 Twitter Bootstrap 前端框架, 你需要在 HTML 写成类似代码如下:<button id="something-btn" type="button" class="btn btn-success btn-sm">
Something
</button>并在 Javascript 代码中增加$('#something-btn').click(someCallback);基于 web 的标准这已经是非常好的方法了,但有些繁琐了。 React-Bootstrap 可让你按如下方式来编写:<Button bsStyle="success" bsSize="small" onClick={someCallback}>
Something
</Button>这样 HTML/CSS 的实现细节就被抽象掉了, 让你可以用与其它编程语言最接近的方式来书写代码。使用 React.js 来改善 Bootstrap APIBootstrap 特色代码要反复出现的原因是因为 HTML 和 CSS 不支持组件库的方式来进行抽象。这导致我们需要在 button 中将 btn反复写三遍。React.js 的解决方案是用 Javascript 直接来写。 React 接管页面的全部渲染工作。你只需要写出 Javascript 对象的树,然后告诉他在结点间如何传递状态。例如,我们让 React 渲染出一个只显示一个按钮的页面,仍使用 Bootstrap CSS 的风格:var button = React.DOM.button({
className: "btn btn-lg btn-success",
children: "Register"
});
React.render(button, mountNode);但我们在 Javascript 中可以放弃 HTML/CSS 提供使易理解的 API 形式:var button = ReactBootstrap.Button({
bsStyle: "success",
bsSize: "large",
children: "Register"
});
React.render(button, mountNode);React-Bootstrap 就是这样的一套组件库,让你轻松扩展和增强自已所需的功能。JSX 语法React 组件实质上是一个 Javascript 对象, 在写树形结构时将是非常乏味的。 React 鼓励使用 JSX,将树形结构写成类似 HTML 的语法形式:var buttonGroupInstance = (
<ButtonGroup>
<DropdownButton bsStyle="success" title="Dropdown">
<MenuItem key="1">下垃链接</MenuItem>
<MenuItem key="2">下垃链接</MenuItem>
</DropdownButton>
<Button bsStyle="info">中间</Button>
<Button bsStyle="info">右侧</Button>
</ButtonGroup>
);
React.render(buttonGroupInstance, mountNode);许多人对 React.js 的第一印象是按这种方式混合来写 Javascript 和 HTML。 然后就增加一个上个例子中的下拉按钮来说,按照 Bootstrap Javascript 和 组件 文档,生一个下拉按钮需要将代码分别写在两处:首先你需要增加 HTML/CSS 元素, 然后调用 Javascript 相关代码将组件绑定在一起。React-Bootstrap 组件库就是遵循 React.js 的机理将单一功能在一处实现。详细请参考当前 React-Bootstrap 组件库的 组件页面。代码遵循 MIT 许可协议。当前版本 v0.30.7·GitHub·问题·版本说明 皖ICP备17006136号-1 © react-bootstrap.cn 2020

Copyright ©uecom 京ICP备18064371号-1 IPV6
2023-01-27 12:56:08
ipv4.uenu.com.cn
10.0.12.16