bootstrap

bootstrap特点

响应式布局：伸缩布局的成熟（流式布局）//响应式一套部署

用处：后台管理系统（引入组件eCharts）前端：展示性页面（不要太复杂的业务逻辑，展示为主）

兼容性： 基本pc端 移动端 全平台兼容 （跨平台，跨浏览器）

更新：社区更新活跃

从CDN引入优点：

  • 本地体积小(托管在服务器)
  • 直接拿到的是最新的

缺点：

  • 没网络的情况

Bootstrap起步

  1. <html lang="zh-cn">
    （小心样式失真）
  2. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    响应标签meta
  3. .selector-for-some-widget {
box-sizing: content-box;
}
    盒尺寸：默认border-content
  4. 两种容器
    1. 　　 
      .container, 居中，适配不同的断的 max-width 尺寸
      流式容器（）删格布局的前提
    2. 　　 
      .container-fluid, 全屏，适配屏幕的 width: 100% 尺寸
      固定容器

Bootstrap重点

间隙沟槽(gutters)清除

.no-gutters

排序与偏移

Class顺序重定义

.order-1到.order-1212个级别的顺序

默认先计算没有设置order。再排序设置order的

偏移

使用响应式的.offset-*栅格偏移方法（有拥挤，互不侵占）

还有pull和push

内容处理

兼容所有HTML标题集，涵括从 <h1> 到 <h6>,的六种标题展现

子标题：内部加small标签 class=‘text-muted’

text- 文本信息  文字标签 lead 等等

还有代码块

图片

图片响应且不会被干扰

float-right float-left float-none清除浮动

Html 5 标准之Picture元素

​<picture>
  <source srcset="大规格图片.jpg"  media="(min-width: 800px)" >
  <source srcset="中规格图片.jpg"  media="(min-width: 600px)">
  <source srcset="小规格图片.jpg">
  <img src="通用图片.jpg" alt="这是当浏览器不支持picture标签时显示的图片">
</picture>

 

posted @ 2020-03-11 13:20  容忍君  阅读(385)  评论(0)    收藏  举报