Bootstrap学习

Bootstrap

相关链接

HOME
bootstrap中文网
runoob菜鸟教程

bootstrap快速入门学习记录

1. 解读核心思想

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列.

1. 移动设备优先策略 (优先设计更小的宽度。)
2. 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
3. 渐进增强 (随着屏幕大小的增加而添加元素。)
4. xs超小默认是水平的,一直无变化,其它大尺寸响应点前是垂直排列, 响应点后是水平
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
---或---
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

2. 显示和清浮动

.clearfix class
响应式实用工具

Version 3.20 以后
用.visible-*-block;.visible-*-inline;.visible-*-inline-block代替.visible-*
// 其中*为 xs,sm,md,lg
/* ====================
    空标签用来清除浮动用, 
    配合.visible-*-*来用
   ==================== */
<div class="clearfix visible-xs"></div>

3. 物理分辩率和逻辑分辨率

1. 物理分辩率 (physic pixel)
2. 逻辑分辨率 (logic pixel)
3. 放缩比 (scale)
   

   手机比如iPhone 6 , 物理分辨率750*1334, 但是只有4.7英寸, 1个像素点太小, 所以用2个像素点(@2x)来渲染一个逻辑点.

    超小设备手机（<768px）,其中768px就是逻辑像素, 其中iPhone 6+的才414px

4. 设计稿750px与iPhone6

iPhone6的逻辑像素: 375px*667px (见chrome开发者工具)
宽为375px * 2 = 750px, (为了好设计)
所以, 实际布局时需要再除以2, 
但是图片为了在视网膜屏幕下显示清晰, 为实际尺寸*放缩比,
然后再通过width,height(img)或background-size(css)中设置正常尺寸

5. 各种分辩率单位

Android-分辨率以及dip(dp)、dpi、ppi、px、sp、pt说明

6. 手机的三种视口

viewport

意外收获

内联元素的padding与background

BS中的<code></code>是内联元素
BS的<code></code>标签的demo

/* ====================
   pading-水平: 与块时无差别
   padding-垂直: 对位置没影响,
   但是对背景色有影响
   ===================== */
code{
    padding: 20px 44px;  /* 调节20px可以观察到 */
    background-color: #f9f2f4;
    border-radius: 4px;
}

float浮动半层应用

BS中的dl,dt.dd标签应用类.dl-horizontal
tips: 给dt和dd分别添加背景色就会一目了然

demo

/*
 * float会浮动半层, 把文本流挤到一边 (eg. 图文环绕的实现)
 * 
 */
dl-horizontal dt {
    float: left; /* 1 浮动提升半层 */
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dl-horizontal dd {
    margin-left: 180px; /* 2 这样把左边空出 */
}