标签: react-bootstrap

我正在为我的项目使用react-bootstrap,我正在尝试向按钮组件添加自定义bsStyle属性.如果我根据以下链接http://react-bootstrap.github.io/components.html#buttons使用默认引导类,则正确呈现类名.但是,如果我将属性更改为bsStyle='facebook'它渲染btn-undefined

所以简而言之,当我将bsStyle属性传递给react bootstrap中的组时,我无能为力.

这是我的HTML看起来像

<Button id="facebook-btn" bsStyle="facebook" bsSize="large" block>
</Button>

如果我将我的代码更改为

<Button id="facebook-btn" bsStyle="primary" bsSize="large" block>
</Button>

它工作正常,类正确呈现.

这是控制台html日志

滚动时如何防止内容浮动在Navbar后面？

<Navbar className="navbar-form navbar-fixed-top" responsive collapseable brand='x' inverse toggleNavKey={1} onClick={this.handleMouseDown}>

还是在:

<Nav className="navigation"..

谢谢

我有以下css打破我的布局:

@media (min-width: 768px)
.row {
    display: flex;
}

我可以禁用显示弹性规则吗？谁能解释为什么会这样？

更新:

目前使用boostrap-sass,"bootstrap-sass":"~3.3.5"无法找到我的sass文件中的行,可能没什么帮助,但它出现在我编译的css中:

strong {
  font-weight: 600; }

.wrapper {
 padding: 50px 20px; }

 // row class here

**@media (min-width: 768px) {
  .row {
  display: flex; } }**

@media (min-width: 768px) {
  .column {
width: 50%; }
.column:first-child {
margin-right: 20px; } }

.modal__button {
 margin-right: 5px; }

@media (max-width: 500px) {
 .modal-dialog {
width: 100%;
margin: 10px auto; } }

.week-navigation {
  float: right; }

 .week-navigation__next-button {
  float: …

我一直在研究boostrap反应3小时.我试图找到我的问题的问题和答案.Bootstrap React的bsStyle根本不起作用,所以我想知道为什么？我看过很多例子,他们只是像我所做的那样导入.

import {Button} from 'react-bootstrap';

但我仍然得到一个简单的按钮 ,我的组件没有任何样式

export class bsButton extends React.Component{
render () {
        return (
            <div>
                <Button bsStyle="primary">primary button</Button>
            </div>
        );
    }
} 

我的导入或组件代码有什么问题？感谢您的帮助:D

我想将网站从PSD原型转换为HTML/CSS/Bootstrap,然后转向JavaScript开发并使用React.js和一些JavaScript编码.

是否可以在不使用React-Bootstrap的情况下将纯Bootstrap与React.js一起使用？

还有可能HTML/CSS Freelancer只能将React-Bootstrap作为模型,然后找到一个JavaScript开发人员来完成像React.js和JS开发这样的高级工作吗？

我想使用电子和混合应用程序使用相同的代码库开发桌面应用程序.

以下是我的代码:

var WholeTab=React.createClass                                                 
({                                                                             
  getInitialState:function()                                                   
  {                                                                            
    return {                                                                   
      key: 1                                                                   
    };                                                                         
  },                                                                           
  handleSelect:function(key)                                                   
  {                                                                            
    this.setState({key});                                                      
  },                                                                           
  render:function()                                                            
  {                                                                            
    return (                                                                   
      <Tabs defaultActiveKey={1} id="controlled-tab-example">                  
        <Tab eventKey={1} title="Tab 1"><One/></Tab>                           
        <Tab eventKey={2} title="Tab 2"><Two/></Tab>                           
        <Tab eventKey={3} title="Tab 3"><Three/></Tab>                         
      </Tabs>                                                                  
    );                                                                         
  }                                                                            
});                                                                            
var One=React.createClass({                                                    
  render:function(){                                                           
    alert("one");                                                              
    return(                                                                    
      <p>We are here</p>                                                       
    );                                                                         
  }                                                                            
});                                                                            
var Two=React.createClass({                                                    
  render:function(){                                                           
    alert("two");                                                              
    return(                                                                    
      <p>We are here</p>                                                       
    );                                                                         
  }                                                                            
});                                                                            
var Three=React.createClass({                                                  
  render:function(){                                                           
    alert("three");                                                            
    return(                                                                    
      <p>We are here</p>                                                       
    );                                                                         
  }                                                                            
});     

我注意到的事情是,每当标签发生变化时,所有标签的渲染功能都会被调用,无论它们是否被选中,这种情况不会发生一次,而是发生3次.这只是一个蹩脚的例子,但如果我在每个标签中都有很多内容,我上面描述的行为肯定会影响网页的性能并使其变慢.我做错了什么或者这是react-bootstrap选项卡的错误,因为逻辑上不应该在每次更改时调用所有选项卡的render函数.

在react-bootstrap@0.24.5我使用Input属性defaultValue指定在组合框中选择的起始值

<Input type='select'
             ref='templateSelect'
             defaultValue={this.state.templateId}
             onChange={this.handleTemplateChange}>
   {options}
</Input>

应该如何处理这个react-bootstrap@0.30.7(最新的)Input不推荐使用的地方,这里应该使用的新组件FormControl不提供这样的属性？

应该value用呢？

<FormControl type='select'
             ref='templateSelect'
             value={this.state.templateId}
             onChange={this.handleTemplateChange}>
   {options}
</FormControl>

或者类似这样的事情:

value={this.state.templateId || 'default value'}

我为Navbar使用React Bootstrap和React Router Bootstrap，并且正在制作用户配置文件下拉菜单列表。

我希望能够显示用户的头像来代替“ title”属性。（与Github上的用户个人资料下拉菜单相同）

这可能吗？我看不到使用任何图像代替NavDropdown标题的选项

<Navbar inverse>
  <Navbar.Header>
    <Navbar.Toggle />
  </Navbar.Header>

  <Navbar.Collapse>
    <Nav pullRight>
      <NavDropdown eventKey={ 3 } id="profile-dropdown" >
        <LinkContainer to="/profile/edit" >
          <NavItem eventKey={ 3.4 } > Edit </NavItem>
        </LinkContainer>
        <LinkContainer to="/logout">
          <Logout eventKey={ 3.5 } />
        </LinkContainer>
      </NavDropdown>
    </Nav>
  </Navbar.Collapse>
</Navbar>

SplitButton或直接Dropdown会是更好的选择吗？我几乎看不到将“ NavDropdown”添加到HTML中的情况。

我正在使用react-bootstrap库使用Navbar导入在我的页面顶部构建一个导航栏.但是,条形图似乎在底部有一些填充,我不想要,似乎无法移除,如此处所示(黄色在底部.此外,导航栏组件似乎没有跨越整个页面[由白色空间看到]在酒吧的两边];不知道为什么会这样):

我希望条形图跨越页面并且底部没有填充.

我的渲染方法如下:

  render() {
    if(Auth.isUserAuthenticated() && this.props.location.pathname === '/') {
      return <div/>;
    }
    return (
      <span className="nav-bar">
        <Navbar inverse className="fixed-top collapseOnSelect nav-bar">
          <Navbar.Collapse>
            <Navbar.Header className="locl-link">
              <Navbar.Brand>
                <LinkContainer to="/">
                  <a>locl</a>
                </LinkContainer>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
            <BootstrapNav>
              <LinkContainer to="/about">
                <NavItem active={this.linkActive("about")}>About</NavItem>
              </LinkContainer>
            </BootstrapNav>
            <BootstrapNav pullRight>
              {this.logInOut()}
            </BootstrapNav>
          </Navbar.Collapse>
        </Navbar>
      </span>
    );
  }

任何帮助将不胜感激.

我刚刚通过React-bootstrap表单,它的用途controlId是什么,它类似于name我们在遗留形式中使用的？

<form>
    <FormGroup
      controlId="formBasicText" ---------------------->> what is the use?
      validationState={this.getValidationState()}
    >
      <ControlLabel>Working example with validation</ControlLabel>
      <FormControl
        type="text"
        value={this.state.value}
        placeholder="Enter text"
        onChange={this.handleChange}
      />
      <FormControl.Feedback />
      <HelpBlock>Validation is based on string length.</HelpBlock>
    </FormGroup>
  </form>