React系列學習筆記:4.React應用中使用Bootstrap


轉自:http://www.jianshu.com/p/98138ff23e4e

前言

本節我們將把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' } ]

最后可以在.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> ) } }

最終效果如圖


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM