">

您当前的位置:凤凰彩票平台 > 新闻资讯 > 公司动态 > 正文

【凤凰彩票技术大咖带您走进BootStrap】其实BootStrap就干一件事

发布时间: 2016-08-12 09:58:41  
分享到:

 

         文 李壮相    技术总监

 

 

 
 
 
专栏介绍

凤凰彩票自2001年成立以来,掌握大数据、云计算、通信、物联网及区块链等领先信息技术,拥有一支逾16年经验的强大IT团队。为沉淀企业技术实力,继续发挥行业优势,《东网快讯》特邀凤凰彩票技术大咖带您走进这些先进信息技术,揭秘凤凰彩票16年来的技术成果,每周五发布

 

 

 
 
 

凤凰彩票技术内幕大揭秘开始啦~首篇带您走进BootStrap,看看BootStrap究竟干了什么事?

 
 

 

 

一、什么是BootStrap

 

在苹果推出视网膜屏幕的iPhone的时候,全世界的人都震惊了,其细腻的显示表达能力,打开了一个新的视觉世界,并开始被竞争对手效仿。然而很快人们就发现问题,微软强大的兼容能力造就了大量的屏幕分辨率极度不统一,苹果产品一家独秀,想模仿不是一件简单的事。于是微软想出了一个办法,就是Metro风格,并在Windows8得以展示。这样醒目简单块状的家伙,完全消除了不同的分辨率的障碍。于是三大阵营统一思路,Android、iOS 、WP,逐步消除拟物化的显示效果,大大小小的手机开始大行其道,满足了不同分辨率的能力。这是一种积木式的简朴思想的大获成功。

 

然而成熟的B/S架构除了宣布支持HTML5,在手机、PC上的展示能力外,总是捉襟见肘。所幸的是来自Twitter的两个工程师Mark Otto和Jacob Thornton捣鼓了一个叫BootStrap的前端开发的开源工具。其思想和积木式的如出一辙。

 

 BootStrap按官方的说法有三个特性说明:

 

A、预处理脚本

 

虽然可以直接使用 BootStrap 提供的 CSS 样式表,但不要忘记 BootStrap 的源码是基于最流行的 CSS 预处理脚本 —— Less 和 Sass 开发的。

 

B、一个框架、多种设备

 

你的网站和应用能在 BootStrap 的帮助下通过同一份代码快速、有效地适配手机、平板、PC 设备,这一切都是 CSS 媒体查询(Media Query)的功劳。

 

C、特性齐全

 

BootStrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。

 

二、为啥说它就干一件事

 

虽然BootStrap说,它干了这三件事,但是我认为,它其实只干了一件事,就是积木!BootStrap用一个专业的名称叫栅格系统(Grid System)。

 

BootStrap 栅格系统(Grid System)提供了一套响应式、移动设备优先的流式网格系统。随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

 


 

这些数字的值就是其分配的宽度的值,最大12,最小1,各种混搭。

 

这样就把一个网页的布局全部弄清楚了。剩余的工作就比较简单了,为了配合布局,它把按钮、表格、缩略图、标签、气泡、下拉菜单、导航条、警告提示、进度条、列表组合、面板、轮播等重新加工处理了一遍,以满足外部容器的需要。

 

当然如果您认为事件就这么简单了,那还是小看了BootStrap,它还能够在一个页面里面直接说明不同的布局才是其强大之处。

 

在CSS上:

 

 

 

 

 

...

 

 

...

 

 

 

这事实上已经说明3中分辨率不同的布局风格,删格系统的定义如下[注]:

 

 

超小屏幕

小屏幕

中等屏幕

大屏幕

手机

 (<768px)

平板

(≥768px)

桌面显示器

(≥992px)

大桌面显示器

(≥1200px)

栅格系统行为

总是水平排列

开始是堆叠在一起的,当大于这些阈值时将变为水平排列C

.container

最大宽度

None

(自动)

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列(column)数

12

最大列(column)宽

自动

~62px

~81px

~97px

槽(gutter)宽

30px (每列左右均有 15px)

可嵌套

偏移(Offsets)

列排序

 

这样,一个能够满足不同分辨率的简洁、直观、强悍的前端开发框架被构建出来了,让web开发更迅速、简单。

 

那么另外,Less和Sass又是何种用途呢?它们的作用是能够让BootStrap的CSS变得更加简洁统一,以便于积木整个风格的调整。Less将CSS赋予了动态语言的特性,如变量、继承、运算、函数等,而Sass富于更加广泛的循环遍历CSS的运算能力,也是栅格系统得以发挥的基础,未来是否均整合到Sass中,我们尚不得而知。简单的讲,就是不要刻意研究Less和Sass,它们为BootStrap的栅格系统起到了重要的作用。但是都是为BootStrap干的这一件事。

 

从这里面我们得到的启发是,我们把很多事情想象得太复杂了,BootStrap用一个简单的积木方式和简单的表达能力,把前端开发框架重新构建了一下,获得了整个互联网的称赞。这样您弄懂了吗?

 

[注]表格来自网页:http://v3.bootcss.com/css/

 

 

分享到:
地址:福建省福州市铜盘路软件大道89号软件园A区26号楼 电话:0591-83519233 传真:0591-87882335 E-mail:doone@doone.com.cn
版权所有 凤凰彩票官网网址 闽ICP备07052074号-1
XML 地图 | Sitemap 地图