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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
一个捕获函数输出的函数
2007/02/14 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
python实现随机密码字典生成器示例
2014/04/09 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
利用python开发app实战的方法
2019/07/09 Python
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
大学本科毕业生求职信范文
2013/12/18 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
旅游活动总结
2014/08/27 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS