A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 玩玩 初级黑马   /  2017-11-19 15:09  /  808 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 小石姐姐 于 2017-11-20 15:03 编辑

第六章 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)



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马