這篇文章將為大家詳細(xì)講解有關(guān)React應(yīng)用中如何使用Bootstrap，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司成立與2013年，先為龍文等服務(wù)建站，龍文等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為龍文企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

前言

我們將把bootstrap,font-awesome應(yīng)用到app中，同時(shí)創(chuàng)建一個(gè)基本的主頁。主要將用到以下包：

• bootstrap-loader及配合工作的一系列l(wèi)oader：bootstrap-sass(bootstrap3) css-loader node-sass sass-loader style-loader url-loader.具體使用見官方文檔

• postcss-loader autoprefixer:自動(dòng)添加-webkit-box等前綴

• react-bootstrap:在react使用bootstrap組件

bootstrap-loader配置

在webpack的entry入口處添加bootstrap的引用

 entry: [
    'bootstrap-loader',
  path.resolve(projectRootPath,'src/app.js')
 ]

然后在應(yīng)用目錄下添加.bootstraprc配置文件，對要用到的組件進(jìn)行選擇，怎么配置在官方文檔中有非常詳細(xì)的配置說明及模板。可以直接使用。

然后在webpack的配置文件module.loaders中添加css,woff2,tff等文件的加載功能

loaders:[
 {
  test:/\.js$/,
  exclude:/node_modules/,
  loader:'babel-loader',
  query:{
   presets:['es2015','react','stage-0'],
   plugins:['transform-decorators-legacy']
  }
 },
 {test:/\.css$/,loader:'style!css'},
 { test: /\.scss$/, 
  loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!postcss-loader!sass?outputStyle=expanded&sourceMap'
 },
 {
  test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  loader: "url?limit=10000"
 },
 {
  test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
  loader: 'file'
 } 
]loaders:[
 {
  test:/\.js$/,
  exclude:/node_modules/,
  loader:'babel-loader',
  query:{
   presets:['es2015','react','stage-0'],
   plugins:['transform-decorators-legacy']
  }
 },
 {test:/\.css$/,loader:'style!css'},
 { test: /\.scss$/, 
  loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!postcss-loader!sass?outputStyle=expanded&sourceMap'
 },
 {
  test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  loader: "url?limit=10000"
 },
 {
  test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
  loader: 'file'
 } 
]

最后可以在.bootstraprc中做些css樣式的配置，以替換原來的css，這里簡單介紹幾個(gè)：

首先，在src中新建目錄theme用于存放所有與css相關(guān)的文件

preBootstrapCustomizations

定義一些能變量，可以在app直接使用

preBootstrapCustomizations: ./src/theme/variables.scss

src/theme/variables.scss主要是定義了一些與顏色相關(guān)的變量

// 自己定義顏色
$cyan: #33e0ff;
$humility: #777;

// Bootstrap 變量
$brand-primary: darken(#428bca, 6.5%);
$brand-secondary: #e25139;
$brand-success: #5cb85c;
$brand-warning: #f0ad4e;
$brand-danger: #d9534f;
$brand-info: #5bc0de;

$text-color: #333;

$font-size-base: 14px;
$font-family-sans-serif: "Helvetica Neue", Helvetica, sans-serif;

bootstrapCustomizations

自定義樣式，在preBootstrapCustomizations加載后，所有可以在其中使用preBootstrapCustomizations定義的變量

appStyles

bootstrap加載后，最后加載里面的樣式，這里可以重寫一些bootstrap樣式

appStyles: ./src/theme/bootstrap.overrides.scss

src/theme/bootstrap.overrides.scss重新定義了一些樣式

.navbar-brand {
 position: relative;
 padding-left: 50px;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
 color: #33e0ff;
 background-color: transparent;
}

應(yīng)用

打開我們的scr/containers/App/App.js現(xiàn)在添加一個(gè)bootstrap樣式的導(dǎo)航條吧

這里我們添加了兩個(gè)文件App.scss（App目錄中）樣式，圖片logo.png（Home目錄中），代碼我就不貼了，CSS不是我們目的，可以自己在源碼中看，非常簡單

import React,{Component, PropTypes} from 'react'
import {IndexLink} from 'react-router' //主頁路由

import { Navbar, Nav, NavItem } from 'react-bootstrap'; // 導(dǎo)航組件

export default class App extends Component {

 render(){
  const styles = require('./App.scss') //scss的樣式
  return(
   
    
     
       //注意這里，就用了我們重寫的navbar-brand
       
        
        React Redux Example
       
      
      
     
    
    {this.props.children}