黑马程序员技术交流社区

标题: 【石家庄校区】第六章 BootStrap [打印本页]

---

作者: 玩玩    时间: 2017-11-19 15:09
标题: 【石家庄校区】第六章 BootStrap


第六章 BootStrap* bootstrap : 引导程序，引导指令* fluid : 流动的, 不安定的, 可改变的* container : 容器, 集装箱* offset : * extreme small : 极小的* extreme : 极端的, 偏激的, 尽头的* view : 视野* port : 端口

• BootStrap的概述
  
  • BootStrap是个前端框架,这个可是个真的框架,和JQuery不同
  • BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问
    
• BootStrap的引入
  
  • jquery-1.11.3.min.js
    
    • bootstrap依赖JQuery,务必在bootstrap.min.js之前引入
      
  • bootstrap.min.css
    
    • 新bootstrap核心CSS文件
      
  • bootstrap-theme.min.css
    
    • 可选的bootstrap主题文件,一般不用引入
      
  • js/bootstrap.min.js`
    
    • 最新的bootstrap核心JavaScript文件
      
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    • 关闭可缩放
      
    
    
• BootStrap的全局函数
  
  • 布局容器
    
    • .container类
      
      • 固定宽度
      • 居中
        
    • .container-fluid类
      
      • 宽度100%,占据全部视口(viewport)
        
      
      
  • 栅格系统
    
    • 响应式
    • 移动设备优先
    • 系统会自动分为最多12列
    • 定义行:.row
    • 定义列:
      
      • .col-lg-n : large,大屏幕 大桌面显示器 (≥1200px)
      • .col-md-n : middle,中等屏幕 桌面显示器 (≥992px)
      • .col-sm-n : small,小屏幕 平板 (≥768px)
      • .col-xs-n : extreme small,超小屏幕 手机 (<768px)
        
      
      
    
    
  
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2