你的位置:首页 > 网页设计

[网页设计]开始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,

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>


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

这种效果,

<div >
      Level 1: .col-sm-9
      <div >
        <div >
          Level 2: .col-xs-8 .col-sm-6
        </div>
        <div >
          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显示器上看起来不错