小程序流程洞见_React应用中使用Bootstrap的方法

摘要: React运用中应用Bootstrap的方式 序言这节大家将把bootstrap,font-awesome运用到app中,同时建立一个基本的。关键将采用下列包:bootstrap-loader及相互配合工作中的一系列产品loader:bootst...

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 output '
 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 output '
 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;
$ess: #5cb85c;
$brand-warning: #f0ad4e;
$brand-danger: #d9534f;
$: #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="/" active '#33e0ff'}} 
 div className={styles.brand}/ 
 span React Redux Example /span 
 /IndexLink 
 /Navbar.Brand 
 Navbar.Toggle/ 
 /Navbar.Header 
 /Navbar 
 div className={styles.appContent} {this.pro凡科抠图.children} /div 
 div App footer /div 
 /div 

最终效果如图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:真正免费建站