bootstrap学习笔记

发表于 2017-10-19 更新于 2017-11-29 分类于前端阅读次数：本文字数： 4.2k 阅读时长 ≈ 4 分钟

记录一下学习bootstrap中总结的知识点。还有代码片段
随时更新

布局

Bootstrap3是默认使用自适应的
自适应的情况下，又提供了两种结构，adapt和responsive，通过给容器设置class决定:

container: 分区间固定宽度
container-fluid: 宽度100%

Grid System
bootstrap可以将一行分为12列布局，这就形成了一个grid system。超过十二列的话，就会自动换到下一行了。表格系统使用的时候必须包含在container或container-fluid类中。并且是由.row直接包裹.col-。

class分类
按照自适应的区间，划分了四类：

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { … }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { … }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { … }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }

@include media-breakpoint-up(xs) { … }
@include media-breakpoint-up(sm) { … }
@include media-breakpoint-up(md) { … }
@include media-breakpoint-up(lg) { … }
@include media-breakpoint-up(xl) { … }

设置偏移量
使用.col-md-offset-*来设置偏移。相当于在容器左侧添加了一个指定大小的col。

/* 自定义navbar 背景色 使用important覆盖默认权重 */
.navbar-inverse {
     background-color: #222; !important;
     border-color: #080808; !important;
}

小屏幕按钮菜单

在body中间加入navbar部分，小尺寸的时候右边显示的按钮

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#BtnNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>
    </nav>
</body>

breadcrumb规范

breadcrumb

retina web

Device Pixels(设备像素)

物理像素

一个设备像素（或者称为物理像素）是显示器上最小的物理显示单元。在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

Screen density(屏幕密度)

屏幕密度指的是单位面积里物理像素的数量，通常以PPI(pixels per inch)为单位。苹果公司为它的双倍屏幕密度的显示器（double-density displays）创造了一个新词“Retina”，声称在正常的观看距离下，人眼无法在Retina显示器上分辨出单独的像素。

CSS Pixels

CSS pixel是浏览器使用的抽象单位，用来精确的、统一的绘制网页内容。通常，CSS pixels被称为与设备无关的像素（DIPs,device-independent pixels）。在标准密度显示器（standard-density displays）上，1 CSS pixel对应一个物理像素。

<div height="200" width="300"></div>

在标准密度显示器上，上面的div会占据200 * 300 个物理像素。而在Retina显示器上，为了保持相同的物理大小，上面的div需要用400 * 600 个物理像素来渲染，如下图：

On a Retina display, four times as many device pixels are on the same physical surface

物理像素与CSS pixel 的比率可以通过媒体查询的device-pixel-ratio来检测（device-pixel-ratio兼容性）。也可以通过javascript的window.devicePixelRatio来获取该比率。

@media only screen and (max-width: 1441px) {
  .container::after {
      content: "1441";
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1441px), only screen and (max-width: 1441px) and (min-resolution: 1.5dppx), only screen and (max-width: 1441px) and (min-resolution: 144dpi) {
  .container::after {
      content: "1441 Retina";
  }
}

@media only screen and (min-width: 1068px) and (max-width: 1441px) {
  .container::after {
      content: "1068 - 1441";
  }
}

@media only screen and (max-width: 1068px) {
  .container::after {
      content: "1068";
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1068px), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
  .container::after {
      content: "1068 Retina";
  }
}

@media only screen and (max-width: 1068px) and (min-width: 735px) {
  .container::after {
      content: "735 - 1068";
  }

}

@media only screen and (max-width: 735px) {
  .container::after {
      content: "735";
  }

  .carousel-caption {
      display: none;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 735px), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
  .container::after {
      content: "735 Retina";
  }

  .carousel-caption {
      display: none;
  }
}

@media only screen and (max-width: 340px) {
  .container::after {
      content: "340";
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 340px), only screen and (max-width: 340px) and (min-resolution: 1.5dppx), only screen and (max-width: 340px) and (min-resolution: 144dpi) {
  .container::after {
      content: "340 Retina";
  }
}

@media only screen and (min-width: 1441px) {
  .container::after {
      content: "1441";
  }
}

布局

自定义navbar背景色

小屏幕按钮菜单

breadcrumb规范

retina web