前言

Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5
文档类型。

本节我们将把bootstrap,font-awesome应用到app中,同时创建一个基本的主页。主要将用到以下包:

<!DOCTYPE html>
<html lang="zh-CN">
 ...
</html>
  • 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
开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head
之中添加 viewport meta 标签,如下所示:

bootstrap-loader配置

<meta name="viewport" content="width=device-width, //视口宽度为设备宽度
   initial-scale=1.0, //缩放程度
   maximum-scale=1.0, //最大缩放级别(可选)
   user-scalable=no">//禁止页面缩放(可选)

在webpack的entry入口处添加bootstrap的引用

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。Normalize.css
是一个很小的 CSS 文件,在 HTML
元素的默认样式中提供了更好的跨浏览器一致性。

 entry: [
    'bootstrap-loader',
  path.resolve(projectRootPath,'src/app.js')
 ]

关于布局

美高梅电子游戏 ,然后在应用目录下添加.bootstraprc配置文件,对要用到的组件进行选择,怎么配置在官方文档中有非常详细的配置说明及模板。可以直接使用。

Bootstrap
提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

然后在webpack的配置文件module.loaders中添加css,woff2,tff等文件的加载功能

img-responsive 用于img元素

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'
 } 
]

container 用于包裹页面上的内容的元素

最后可以在.bootstraprc中做些css样式的配置,以替换原来的css,这里简单介绍几个:

  • 行需要放在container,并用来创建列的水平组。
  • 预定义的网格类,比如 .row 和
    .col-xs-4,可用于快速创建网格布局。

首先,在src中新建目录theme用于存放所有与css相关的文件

美高梅电子游戏 1

preBootstrapCustomizations

  • 行列可相互嵌套,嵌套后的自适应以父级元素为准,而不是设备宽度
  • 要创建三个相等的列,则使用三个
    col-xs-4,要是12个列就12个col-xs-1。

定义一些能变量,可以在app直接使用

<div class="container">
 <div class="row">
 <div class="col-xs-6 col-md-2 col-md-offset-1"></div>
 <div class="col-xs-6 col-md-3"></div>
 <div class="col-xs-6 col-md-3"></div>
 <div class="col-xs-6 col-md-3"></div>
 </div>
 <div class="row">...</div>
</div>
<div class="container">.... 
<!--以上代码在手机上就是两行两列,在电脑上是一行四列,其中第一列前面有空白,比其它列宽度小三分之一-->
//可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示,col-md-push-6按照我个人的理解,是在左面浮动了6列,然后再插入元素,col-md-pull-3则是在右边浮动了3列,然后从右往左插入元素
preBootstrapCustomizations: ./src/theme/variables.scss
  • 媒体查询是非常别致的”有条件的 CSS
    规则”。它只适用于一些基于某些规定条件的
    CSS。如果满足那些条件,则应用相应的样式。

src/theme/variables.scss主要是定义了一些与颜色相关的变量

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { …
}
//对于所有带有 min-width: @screen-sm-min 的设备,如果屏幕的宽度小于
@screen-sm-max,则会进行一些处理。

// 自己定义颜色
$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定义的变量

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内,并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>灰
<p class="text-primary">本行内容带有一个 primary class</p>蓝
<p class="text-success">本行内容带有一个 success class</p>绿
<p class="text-info">本行内容带有一个 info class</p>深蓝
<p class="text-warning">本行内容带有一个 warning class</p>黄
<p class="text-danger">本行内容带有一个 danger class</p>红

appStyles

Bootstrap 定义 <abbr>
元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为
<abbr> title 属性添加了文本)。为了得到一个更小字体的文本,请添加
.initialism 到 <abbr>。

bootstrap加载后,最后加载里面的样式,这里可以重写一些bootstrap样式

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
appStyles: ./src/theme/bootstrap.overrides.scss
  • 使用 <address>
    标签,您可以在网页上显示联系信息。
  • 使用<Blockqoute>标签作为引用

src/theme/bootstrap.overrides.scss重新定义了一些样式

<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>
.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;
}
  • list-unstyled用于未定义样式列表ul,list-inline用于水平列表ul
  • pre-scrollable使pre可滚动
  • <code>内联显示代码,<pre>显示多行代码

应用

关于表格

打开我们的scr/containers/App/App.js现在添加一个bootstrap样式的导航条吧

美高梅电子游戏 2

这里我们添加了两个文件App.scss(App目录中)样式,图片logo.png(Home目录中),代码我就不贴了,CSS不是我们目的,可以自己在源码中看,非常简单

美高梅电子游戏 3

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}/>
        React Redux Example
       </IndexLink>
      </Navbar.Brand>
      <Navbar.Toggle/>
     </Navbar.Header>
    </Navbar>
    <div className={styles.appContent}>{this.props.children}</div>
    <div>App footer</div>
   </div>
  )
 }
}

通过把任意的 .table 包在 .table-responsive class
内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px
宽的大型设备上查看时,您将看不到任何的差别。

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章