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(火狐量子)浏览器还针对内存数据应用优先顺序进行优化,使该内存占用率比谷歌浏览器低30%。Firefox
Quantum(火狐量子)浏览器采用名也Photon的用户界面,提供再简明的外观,在高DPI显示器上看起对

 

相关文章