React 응용 프로그램 에서 Bootstrap 을 사용 하 는 방법
이 절 에 서 는 boottstrap,font-awesome 을 app 에 적용 하고 기본 홈 페이지 를 만 들 것 입 니 다.주로 다음 가방 에 사 용 됩 니 다:
웹 팩 의 entry 입구 에 boottstrap 인용 추가
entry: [
'bootstrap-loader',
path.resolve(projectRootPath,'src/app.js')
]
그리고 응용 디 렉 터 리 에.bootstraprc 프로필 을 추가 하고 사용 할 구성 요 소 를 선택 합 니 다.공식 문서 에 어떻게 설정 하 는 지 상세 한 설정 설명 과 템 플 릿 이 있 습 니 다.직접 사용 가능 합 니 다.그리고 웹 팩 의 프로필 module.loaders 에 css,woff 2,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
boottstrap 을 불 러 온 후 마지막 으로 안에 있 는 스타일 을 불 러 옵 니 다.boottstrap 스타일 을 다시 쓸 수 있 습 니 다.
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 를 열 고 boottstrap 스타일 의 네 비게 이 션 바 를 추가 합 니 다.
여기에 두 개의 파일 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>
)
}
}
최종 효 과 는 그림 과 같다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.