React应用中使用Bootstrap的方法


Posted in Javascript onAugust 15, 2017

前言

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

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

Javascript 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 #Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 #Javascript
JScript实现表格的简单操作
Aug 15 #Javascript
AngularJS日程表案例详解
Aug 15 #Javascript
jQuery实现菜单栏导航效果
Aug 15 #jQuery
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 #Javascript
JScript实现地址选择功能
Aug 15 #Javascript
You might like
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP个人网站架设连环讲(四)
2006/10/09 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
range 标准化之获取
2011/08/28 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
vue和webpack安装命令详解
2018/06/15 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python实现发送邮件及附件功能
2021/03/02 Python
python读取二进制mnist实例详解
2017/05/31 Python
python实现车牌识别的示例代码
2019/08/05 Python
基于python实现文件加密功能
2020/01/06 Python
浅谈Python3中print函数的换行
2020/08/05 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
几个MySql的面试题
2013/04/22 面试题
综治工作心得体会
2014/09/11 职场文书
工作试用期自我评价
2015/03/10 职场文书
网络妈妈观后感
2015/06/08 职场文书