为了账号安全,请及时绑定邮箱和手机立即绑定

bootstrap简介、环境安装、排版、表格、按钮、表单、图片、网格

2017.09.23 11:25 3765浏览

一、 简介

  1. 概述
    该框架是由Twitter公司(全球最大的微博)两个工程师研发的,基于html、css、javascript的开源框架。
  2. 用途
    重要部分就是响应式布局,丰富多样的样式定义、组件和插件
    二、 环境安装
  3. 下载
    Sass和Less 是升级版的CSS
    图片描述
    我使用的bootstrap代码是经过编译过的代码。
    图片描述

  4. 框架结构
    图片描述

  5. 标准模板
    1)
    图片描述
    让浏览器以最新的IE内核版本或使用谷歌内核去渲染当前页面,是先当前项目开发必备meta属性
    2)
    图片描述
    视口meta 标签,让文档的宽度和设备的宽度一致,默认缩放比为1,这个是让手机端浏览器有响应式作用
    3) 由于那些html5.0的标签及媒体查询属性,不能被IE8及以下版本IE浏览器识别,所以可以引入html5shiv.min.js和respond.js
    图片描述
    4) 注释在不同浏览器版本下引入对应js:
    lt ie9 小于ie9
    lte ie8 小于等于ie8
    图片描述

  6. CDN(掌握)
    内容分发网络,传统静态资源的问题
    l 站点安全得到有效保障
    l 用户集中访问时,会减轻服务器压力
    l 内集中放置,方便管理。
    三、 排版
    四、表格
    图片描述
    四、按钮
  7. 三种可以作为按钮使用的标签:input a button
    图片描述

  8. 按钮的预定义样式
    图片描述

  9. 按钮的尺寸
    图片描述

  10. 激活状态和禁用状态
    图片描述
    五、表单
  11. 表单的基本类型
    text、password、radio、checkbox
    html5.0 属性: tel、number、search等:
    图片描述

  12. 表单的基本格式
    第一、二步的样式可以省略,第三步form-conctrol不能少
    图片描述

  13. 内联表单
    图片描述
    form-inline 在大屏幕表单按inline-block并排放置,当屏幕小于768px,会恢复独占行的样式
    图片描述
  14. 表单合组
    图片描述
    图片描述

  15. 复选框和单选框
    图片描述
    图片描述
    设置不可点击的禁用状态
    图片描述

  16. 文本域和下拉列表
    图片描述

  17. 调整尺寸
    图片描述
    六、图片
    图片描述
    七、网格
  18. 什么是响应式布局?
    传统的:
    流式布局:普通的浮动布局
    自适应:百分比
    响应式:
    二者结合,使用@media 做屏幕适配
  19. 网格系统的响应式原理
    图片描述

  20. bootstrap的布局使用
    bs框架包含了一个响应时候,移动设备优先,不固定的网格系统,可以随着设备或视口的大小增加宽度,一行最显示12列。
    图片描述
点击查看更多内容
10人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消