Bootstrap始于bootstrap的学

竟过了双十一,服务器负责了压力,不懂得吗底,突然的轻松,反而觉得有点不知所措,好久没写博客了,竟然发现还有人掉自己,很是开心,问题都是关于阿里云之,阿里云的吭确实多,其实关键在于,官方文档还是少,出了问题,很多都使依赖自己失去品尝,自己失去寻找法。

 

哼了,今天上马上bootstrap,自己我是后端出身,java,php,nodejs都召开了几独网站,目前当白菜哦的合技术,android和ios的app有时也用好去窜部分bug,瞬间觉得温馨无所不能,有木有,不过直到现在,才意识之前一直鄙视的在mobile上的html5艺还是出好几地方的优势的,简单说生,目前咱们的网站分为了
web, wap, ios,android, 后端甚至都是分离的,ios和android 会共享
api的调用逻辑,其他的且是分手的,相当给,要保护大量之再次的物,这样带来的功利是,当你碰到有具体bug时,你比好找到地方,去debug,去匡正,坏处是当您改改了一个bug,你也许只要分别去另几单地方失去探视,是否有bug,是否要失去窜外地方的题目,所以,要是还受自己同浅会,这些是迟早要是复用的,及时判断逻辑变得还扑朔迷离,那也是得使做的政工。这点,希望大家在以后写序的时节去体会。

 

一发觉得响应式布局之定义是何等的前卫,为什么一定要如此夺设计,因为,这样也许就是能够叫您丢维护一个平台,比如wap和web,你打开的是同一个页面,但是看看的凡个性化的物,很十分,很炫,对怪? 
哈哈,当然需要功力。

先是说下 最基本的布局:

meta:

倒装备优先,且不准缩放

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Viewport 基础

一个常用之指向移动网页优化了的页面的 viewport meta 标签大致如下:

<meta name=”viewport” content=”width=device-width, initial-scale=1,
maximum-scale=1″>

width:控制 viewport 的轻重,可以指定的一个价,如果
600,或者特别之值,如 device-width 为设备的宽(单位为缩放为 100% 时的
CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也不怕是当页面第一软 load 的时刻缩放比例。
maximum-scale:允许用户缩放到的最为酷比重。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否足以手动缩放

布局容器

Bootstrap 需要也页面内容以及栅格系统包裹一个 .container
容器。我们提供了点儿独发作此所以处之好像。注意,由于 padding
等特性的缘故,这半种 容器类不可知互相嵌套。

.container 类用于固定宽度并支持响应式布局的器皿。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的器皿。

<div class="container-fluid">
  ...
</div>

栅格系统

栅格系统用于通过一致文山会海的行(row)与列(column)的三结合来创造页面布局,你的内容就是足以放入这些创造好之布局中。下面就是介绍一下
Bootstrap 栅格系统的办事原理:

  • “行(row)”必须含有在 .container (固定宽度)或 .container-fluid
    (100%
    宽度)中,以便为夫给予合适的排(aligment)和内补(padding)。
  • 经“行(row)”在档次方向创建同组“列(column)”。
  • 而的始末应该放置于“列(column)”内,并且,只有“列(column)”可以看做实施(row)”的直白子元素。
  • 类似 .row.col-xs-4
    这种预定义的接近,可以用来飞创建栅格布局。Bootstrap 源码中定义之
    mixin 也堪为此来创造语义化的布局。
  • 通过为“列(column)”设置 padding
    属性,从而开创列与列里的间隔(gutter)。通过也 .row 元素设置负值
    margin 从而抵消掉啊 .container 元素设置的
    padding,也就是间接为“行(row)”所蕴涵的“列(column)”抵消掉了padding
  • 负值的
    margin就是脚的言传身教为什么是望他突出的缘由。在栅格列中之内容排成一行。
  • 栅格系统被的列是通过点名1顶12的价值来表示其超过的克。例如,三只当丰厚的排列好动用三独
    .col-xs-4 来创建。
  • 若是同“行(row)”中含了之“列(column)”大于
    12,多余的“列(column)”所于的因素以受看做一个完好另打一行排列。
  • 栅格类适用于与屏幕宽度超过或等于分界点大小的设施 ,
    并且针对有些屏幕设备覆盖栅格类。 因此,在要素上用任何 .col-md-*
    栅格类适用于同屏幕宽度超过或当分界点大小的设备 ,
    并且针对有些屏幕设备覆盖栅格类。 因此,在要素上应用任何 .col-lg-*
    不存, 也潜移默化大屏幕设备。(没看明白)

最后一条没看明白,但是在做了个试验,下面用个例子来说明这个问题:

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
在一个div class里面有两个类 col-xs-6 和 col-sm-4,

Bootstrap 1

col-sm-4在屏幕超过768px之地方才会收效。col-xs-6会在屏幕小的地方生效,这种思路好拿走壮大,自己当开规划的上,要缓解一些兼容问题,可以向这个思路去考虑。

不论粘几独例证,在例子里去体会:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>


响应式的大家根据自己的需求去尝试,下面是经常需要用的,当我们有嵌套时,且不想把所有格子占满时,怎么写

Bootstrap 2

这种意义,

<div class=”col-sm-9″>
      Level 1: .col-sm-9
      <div class=”row show-grid”>
        <div class=”col-xs-8 col-sm-5 col-sm-offset-1″>
          Level 2: .col-xs-8 .col-sm-6
        </div>
        <div class=”col-xs-4 col-sm-5″>
          Level 2: .col-xs-4 .col-sm-6
        </div>
      </div>
    </div>

 

经使用 .col-md-push-*.col-md-pull-*
类就好充分易之更动列(column)的顺序

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

列偏移

使用 .col-md-offset-* 类可以将列于右侧偏移。这些看似实际是经行使 *
选择器为当下元素增加了左侧的边距(margin)。例如,.col-md-offset-4
类将 .col-md-4 元素向右侧偏移了4独列(column)的宽度。

 

另外,推荐下firefox的崭新浏览器,优化好像真的有提高。

https://ftp.mozilla.org/pub/firefox/releases/57.0/

Firefox
Quantum(火狐量子)浏览器还针对内存数据采取优先顺序进行优化,使其内存Bootstrap占用率比谷歌浏览器低30%。Firefox
Quantum(火狐量子)浏览器采用名吧Photon的用户界面,提供更简短的外观,在高DPI显示器上看起对

 

相关文章