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 相关文章推荐
关于JS中的闭包浅谈
Aug 23 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
vue项目中axios使用详解
Feb 07 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 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
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
详解Python装饰器
2019/03/25 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
《赶海》教学反思
2014/04/20 职场文书
学习十八大演讲稿
2014/09/15 职场文书
债务授权委托书范本
2014/10/17 职场文书
升学宴答谢词
2015/01/05 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
Hive日期格式转换方法总结
2022/06/25 数据库