BootStrap

概述

• bootstrap设计出的响应式页面可以在手机,pad,pc都可以直接访问
  

引入文件

• <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/bootstrap.min.css">
• <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/bootstrap_theme.min.css">
• <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
• <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
• <!-- 添加一个meta标签 -->
• <meta name="viewport" content="width=device-width, initial-scale=1">
  

bootstrap全局CSS布局容器
<div class="container">
    ...
</div>
<div class="container-fluid">
   
</div>
栅格系统

• 使用.row样式定义栅格的行
• 定义列
  
  
  • .col-lg-n
  • .col-md-n
  • .col-sm-n
  • .col-xs-n
    
    
    
  
  

排版

• 标题
• 对齐
• 表单
  
  

BootStrap

概述

• bootstrap设计出的响应式页面可以在手机,pad,pc都可以直接访问
  

引入文件

• <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/bootstrap.min.css">
• <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/bootstrap_theme.min.css">
• <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
• <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
• <!-- 添加一个meta标签 -->
• <meta name="viewport" content="width=device-width, initial-scale=1">
  

bootstrap全局CSS布局容器
<div class="container">
    ...
</div>
<div class="container-fluid">
   
</div>
栅格系统

• 使用.row样式定义栅格的行
• 定义列
  
  
  • .col-lg-n
  • .col-md-n
  • .col-sm-n
  • .col-xs-n
    
    
    
  
  

排版

• 标题
• 对齐
• 表单