React应用中使用Bootstrap的方法

React应用中使用Bootstrap的方法

前言

本节我们将把bootstrap,font-awesome应用到app中，同时创建一个基本的主页。主要将用到以下包：

bootstrap-loader及配合工作的一系列loader：bootstrap-sass(bootstrap3) css-loader node-sass sass-loader style-loader url-loader.具体使用见官方文档

postcss-loader autoprefixer:自动添加-webkit-box等前缀

react-bootstrap:在react使用bootstrap组件

bootstrap-loader配置

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

entry: [

'bootstrap-loader',

path.resolve(projectRootPath,'src/app.js')

]

然后在应用目录下添加.bootstraprc配置文件，对要用到的组件进行选择，怎么配置在官方文档中有非常详细的配置说明及模板。可以直接使用。

然后在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，这里简单介绍几个：

首先，在src中新建目录theme用于存放所有与css相关的文件

preBootstrapCustomizations

定义一些能变量，可以在app直接使用

preBootstrapCustomizations: ./src/theme/variables.scss

src/theme/variables.scss主要是定义了一些与颜色相关的变量

// 自己定义颜色

$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;

}

应用

打开我们的scr/containers/App/App.js现在添加一个bootstrap样式的导航条吧

这里我们添加了两个文件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'; // 导航组件

export default class App extends Component {

render(){

const styles = require('./App.scss') //scss的样式

return(

//注意这里，就用了我们重写的navbar-brand

React Redux Example

)

}

}

最终效果如图

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。