README

页面结构

页面级内容区(Container, 最大宽度 960px)
1. 标题区(View 文本居中，顶内边距5号，底内边距5号)
  1. Logo(Image 宽72px，高72px，左右居中，底外边距4号)
  2. 标题(Text h2) Checkout form
  3. 说明(Text lead) Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.
2. 内容区(GridRow)
  1. 左栏（GridColumn 8列）
    1. 左栏标题(Text h4，底外边距3号) Billing address
    2. Form 容器(暂使用 View 代替)
      1. 第一行(GridRow)
        
        第一列(GridColumn 6列，底外边距3号)
        
        TextInput label First Name
        
        第二列(GridColumn 6列，底外边距3号)
        
        TextInput label Last Name
      2. 第二行(View 底外边距3号)
        
        InputGroup label UserName
        
        前缀 @
        
        输入框提示信息 UserName
      3. 第三行(View 底外边距3号)
        
        TextInput label Email(Optional)
        
        输入框提示信息 `you@example.com`
      4. 第四行(View 底外边距3号)
        
        TextInput label Address
        
        输入框提示信息 1234 Main St
      5. 第五行(View 底外边距3号)
        
        TextInput label Address 2(Optional)
        
        输入框提示信息 Apartment or suite
      6. 第六行(GridRow)
        
        第一列(GridColumn 5列，底外边距3号)
        
        Select label Country
        
        选项 Choose...,United States
        
        第二列(GridColumn 4列，底外边距3号)
        
        Select label State
        
        选项 Choose...,California
        
        第三列(GridColumn 3列，底外边距3号)
        
        TextInput label Zip
      7. 第七行分割线(View 底外边距4号)
      8. 第八行 Checkbox Shipping address is the same as my billing address
      9. 第九行 Checkbox Save this information for next time
      10. 第十行分割线(View 底外边距4号, 顶外边距4号)
      11. 第十一行支付方式标题(Text h4, 底外边距3号) Payment
      12. 第十二行支付方式区(View block, 顶边距3号，底边距3号)
        
        第一项信用卡(Radio, name:paymentMethod, id:credit, 单行显示) Credit card
        
        第二项借记卡(Radio, name:paymentMethod, id:debit, 单行显示) Debit card
        
        第三项(Radio, name:paymentMethod, id:paypal, 单行显示) PayPal
      13. 第十三行信用卡信息区(GridRow)
        
        第一列持卡人姓名(GridColumn，6列,底外边距3号)
        
        TextInput label Name on card
        
        帮助文本 Full name as displayed on card
        
        第二列信用卡号码(GridColumn，6列,底外边距3号)
        
        TextInput label Credit card number
      14. 第十四行信用卡校验区(GridRow)
        
        第一列信用卡有效期(GridColumn 3列,底外边距3号)
        
        TextInput label Expiration
        
        第二列信用卡验证码(GridColumn 3列,底外边距3号)
        
        TextInput label CVV
      15. 第十五行分割线(View 底外边距4号)
      16. 第十六行继续支付按钮(Button 主色，大，铺满父容器) Continue to checkout
  2. 右栏（GridColumn 4列，底外边距4号）
    1. 右栏标题区(Text h4,左右布局，底外边距3号)
      1. 标题(颜色：text-muted) Your cart
      2. 徽标(Badge 圆形) 3
    2. 购物清单区(ListGroup 底外边距3号)
      1. 清单1(ListItem 左右布局)
        
        物品信息区(View)
        
        物品名称(Text h6,顶外边距0，底外边距0) Product name
        
        物品描述(Text small,text-muted) Brief description
        
        物品价格区(Text text-muted) $12
      2. 清单2(ListItem 左右布局)
        
        物品信息区(View)
        
        物品名称(Text h6,顶外边距0，底外边距0) Second product
        
        物品描述(Text small,text-muted) Brief description
        
        物品价格区(Text text-muted) $8
      3. 清单3(ListItem 左右布局)
        
        物品信息区(View)
        
        物品名称(Text h6,顶外边距0，底外边距0) Third item
        
        物品描述(Text small,text-muted) Brief description
        
        物品价格区(Text text-muted)$5
      4. 优惠码(ListItem 左右布局)
        
        物品信息区(View text-success)
        
        物品名称(Text h6,顶外边距0，底外边距0) Promo code
        
        物品描述(Text small) EXAMPLECODE
        
        物品价格区(Text text-success) -$5
      5. 合计(ListItem 左右布局)
        
        合计文本(Text) Total (USD)
        
        总价(Text 加粗) $20
    3. 优惠码添加区 (Card p-2)
      1. 优惠码输入(InputGroup)
        
        TextInput 提示信息 Promo code
        
        后缀按钮文本(Button 颜色：secondary) Redeem
3. 底部区(Footer 顶外边距5号，底外边距5号，顶内边距5号,文字居中，灰色，字体小号)
  1. 版权说明(Text p,底外边距1号) © 2017-2018 Company Name
  2. 底部链接区(ListGroup)
    1. ListItem
      1. Link Privacy
    2. ListItem
      1. Link Terms
    3. ListItem
      1. Link Support