欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React应用中使用Bootstrap的方法

程序员文章站 2022-05-26 08:17:12
前言 本节我们将把bootstrap,font-awesome应用到app中,同时创建一个基本的主页。主要将用到以下包: bootstrap-loader及配合...

前言

本节我们将把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的方法

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