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?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() } }//注意这里,就用了我们重写的navbar-brand React Redux Example {this.props.children}App footer
最终效果如图
关于“React应用中如何使用Bootstrap”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站名称:React应用中如何使用Bootstrap-创新互联
本文路径:http://azwzsj.com/article/csggeh.html