起首bootstrap的上学

毕竟过完双十一,服务器负责了压力,不明白为何,突然的落拓不羁,反而觉得微微没着没落,好久没写博客了,竟然发现还有人回我,十分欢天喜地,难点都是关于阿里云的,阿里云的吭确实多,其实关键在于,官方文档仍然少,出了难题,很多都要靠自己去尝试,自己去找办法。

meta:

第一说下 最中央的布局:

挪动装备优先,且不准缩放

 

 

列偏移

使用 .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(火狐量子)浏览器还对内存数据应用优先顺序举行优化,使其内存占用率比谷歌(谷歌(Google))浏览器低30%。Firefox
Quantum(火狐量子)浏览器选拔名为Photon的用户界面,提供更简约的外观,在高DPI屏幕上看起来不错

 

栅格系统

栅格系统用于通过一多元的行(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,

图片 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>


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

图片 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>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

一发觉得响应式布局这么些概念是何其的前卫,为啥一定要如此去设计,因为,那样也许就能让您少维护一个阳台,比如wap和web,你打开的是同一个页面,但是看看的是个性化的事物,很酷,很炫,对不对? 
哈哈,当然需求功力。

布局容器

Bootstrap 须求为页面内容和栅格系统包裹一个 .container
容器。大家提供了多个作此用处的类。注意,由于 padding
等属性的原由,那三种 容器类不可能相互嵌套。

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

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

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

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

好了,明日开班上学bootstrap,自己我是后端出身,java,php,nodejs都做过多少个网站,最近承担白菜哦的全体技能,android和ios的app有时也急需自己去修改部分bug,瞬间感觉到温馨手眼通天,有木有,不过直到现在,才察觉从前平昔鄙视的在mobile上的html5技能仍然有一些方面的优势的,简单说下,近期大家的网站分为了
web, wap, ios,android, 后端甚至都是分其他,ios和android 会共享
api的调用逻辑,其他的都是分开的,相当于,要有限帮忙多量的再一次的东西,那样推动的补益是,当你相逢某个具体bug时,你比较简单找到地方,去debug,去匡正,坏处是当你改改了一个bug,你恐怕要分别去别的多少个地点去看望,是还是不是有bug,是不是要去修改其余地点的难点,所以,假诺再给本人两遍机会,这么些是自然要复用的,及时判断逻辑变得更复杂,那也是必须要做的工作。这一点,希望我们在此后写程序的时候去体会。

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:用户是或不是可以手动缩放

相关文章