React应用中使用Bootstrap的方法

zhaorong · 发表于编程和数据库 2017-9-18 15:19:02


	前言本节我们将把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( <div className={styles.app}> <Navbar fixedTop> <Navbar.Header> <Navbar.Brand> //注意这里，就用了我们重写的navbar-brand <IndexLink to="/" activeStyle={{color: '#33e0ff'}}> <div className={styles.brand}/> <span>React Redux Example</span> </IndexLink> </Navbar.Brand> <Navbar.Toggle/> </Navbar.Header> </Navbar> <div className={styles.appContent}>{this.props.children}</div> <div>App footer</div> </div> ) } } 复制代码最终效果如图以上就是本文的全部内容，希望对大家的学习有所帮助。

微信扫一扫 分享朋友圈

React应用中使用Bootstrap的方法

微信扫一扫分享朋友圈