Bootstrap知多少

说起Bootstrap,大家也都知道它是一个很棒的前端开发框架。特点:响应式布局。在自己的项目中能很好的使用bootstrap无疑是一种前卫,大气。

bootstrap

  • adj.依靠自己力量的;自己做的
  • n.拔靴带
网络.
  • 自举;引导;引导程序

正是想满足很多不熟悉网页编程的人和迫切的希望提高开发效率,缩短开发时间。希望做出属于自己的高端上档次的网站项目。2011 年 Mark Otto 和 Jacob Thornton 开发了  Bootstrap,这些都归功于  Twitter!boostrap在前端框架的发展中成为非常流行并且成为了最好的响应式框架之一。Bootstrap 帮助开发者快速高效的开启大量新的 web  项目,受到了广大开发者们的青睐。

为了照顾那些不是很熟悉 Bootstrap 但是又想继续深入了解的开发者,我们在这里简单的介绍一下。Bootstrap 是一个 pre-styled 组件的扩展库,有着大量的附件和非常好用的插件,可以帮助开发者们快速的开始他们的新项目。

---------------------------------------

Bootstrap 2.0.2

--------------------------------------

 --------------------------------------

Boostrap 2.3.2

--------------------------------------

 

--------------------------------------

中文Bootstrap

--------------------------------------

Bootstrap相关开源项目推荐

这些项目或者是对Bootstrap进行了有益的补充,或者是基于Bootstrap的

Headroom.js            

Headroom.js
隐藏或展示页面元素
              

Headroom.js 是一个轻量级、纯 JavaScript 组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间。              

Open CDN            

Open CDN
开放CDN服务
              

Bootstrap中文网联合又拍云存储共同推出了开放CDN服务,我们对广泛的前端开源库提供了稳定的存储和带宽的支持,例如Bootstrap、jQuery等。              

stickUp            

stickUp
让页面元素“固定”位置
              

stickUp能让页面目标元素“固定”在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置。              

LESSCSS            

LESS
一种动态样式语言
              

LESS为CSS赋予了动态语言的特性,如变量、继承、运算、函数。LESS既可以在客户端上运行 (支持IE 6+、Webkit、Firefox),也可以借助Node.js或者Rhino在服务端运行。              

Grunt            

Grunt
项目构建工具
              

Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件,几乎任何你所要做的事情都可以用Grunt实现。              

Buttons            

Buttons
CSS按钮样式库
              

Buttons 是一个基于 Sass 和 Compass 构建的CSS按钮(button)样式库,图标采用的是Font Awesome,可以和Bootstrap融合使用。              

Layoutit            

LayoutIt!
Bootstrap可视化布局
              

LayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局系统。由4wer同学汉化整理。              

Unslider            

Unslider
jQuery轮播插件
              

Unslider — 一个超小的 jQuery 轮播(slider) 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。              

Bootstrap Switch            

Bootstrap Switch
Bootstrap开关组件
              

Bootstrap Switch是对Bootstrap控件的扩充。基于选HTML中基本的选择框控件实现只有开和关两种状态的单选按钮。              

Sco.js            

Sco.js
Bootstrap组件增强版
              

              由于大部分的Bootstrap js插件是无法扩展的,因此才有了sco.js,它是对Bootsrap中js插件的增强实现。              

iCheck            

iCheck
增强复选框和单选按钮
              

iCheck让不同浏览器下的复选框(checkboxes)和单选按钮(radio button)更美观、功能更强。              

Bootstrap WYSIWYG            

bootstrap-wysiwyg
为Bootstrap定制的可视编辑器
              

bootstrap-wysiwyg是一个jQuery Bootstrap插件(5KB, < 200 行代码)可以将任何一个DIV转变成一个WYSIWYG富文本编辑器。              

Chart.js            

Chart.js
精巧的JS图表绘制工具库
              

Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。              

Preboot

Preboot
Bootstrap之前世

Preboot是一组用LESS语法书写的混合(mixin)和变量(variable)的集合,目的是辅助用户书写更优美的CSS。Bootstrap的前身就是Preboot。

jQuery.Pin

jQuery.Pin
固定页面元素的jQuery插件

jQuery.Pin 能将任意页面元素“钉”在某个容器顶部,而且在尺寸小的屏幕上能够自动禁用这种效果。

Responsive Nav

Responsive Nav
响应式导航

响应式导航(Responsive Nav)是一个很小的JS插件,压缩之后仅有1.7KB,能帮你创建针对小屏幕的可切换式导航

BSIE

Bsie
Bootstrap IE6兼容方案

Bsie弥补了Bootstrap对IE6的不兼容。目前,bsie能在IE6上支持大部分bootstrap的特性,可惜,还有一些实在无法支持...

Messenger

Messenger
非常酷的弹框(Alert)组件

Messenger是一个非常酷的弹框(Alert)组件,能够非常好的与Bootstrap融合,当然,单独使用效果也是非常棒。Messenger自带4套皮肤。

Bootstrap Datetimepicker

DateTime Picker
日期时间选择器

Bootstrap日期时间选择器(Bootstrap DateTime Picker)是一个Bootstrap组件,能够简化页面上日期、时间的输入。

jQuery UI Bootstrap

jQuery UI Bootstrap
用Bootstrap美化jQuery UI

这套工具让你在使用jQuery UI 控件时也能充分利用Bootstrap的样式,而且不会出现样式不统一的现象,Bootstrap和jQuery UI可以完美融合在一起了!

Google-Style Bootstrap

Google Bootstrap
Google风格的Bootstrap

Google的UI素来以简洁著称,现在Bootstrap也来Google Style一把,喜欢Google的就来试试这套Google Bootstrap吧!

Flat UI

Flat UI
Metro风格的Bootstrap

Flat UI是基于Bootstrap做的Metro化改造,由Designmodo提供。Flat UI包含了很多Bootstrap提供的组件,但是外观更加漂亮。再此强烈推荐!

Bootstrap Metro UI CSS

Metro UI CSS
Bootstrap与Metro融合

Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式。现在,Metro UI CSS项目在Bootstrap的基础上被开发成一个独立的解决方案。

Font Awesome

Font Awesome
Bootstrap专用图标字体

Font Awesome 中包含的所有图标都是矢量的,也就可以任意缩放,避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。

Simple Icons

Simple Icons
Icon汇

Simple Icons -- Icon汇。收集众多网站的Logo,并提供高质量、不同尺寸的png格式图片给广大网友,所有Icon版权归其所属公司。

Bootstrap Form Builder

Bootstrap  Form Builder
在线表单构造器

Bootstrap 在线表单构造器能够以鼠标拖拽的方式迅速生成一个基于Bootstrap的完整表单,减轻了各位码农手写HTML代码的劳动,而且不会出错。

HTML5 Boilerplate

HTML5 Boilerplate
专业的前端模版

HTML5 Boilerplate 是一套专业的前端模版,用以开发快速、健壮、适应性强的app或网站。

Web-Safe Colors

Web Safe Colors
Web安全色

本表中列出的是WEB设计、开发中常用安全色。列于此是为了方便大家参考。

Extended Bootstrap

BootstrapEd
增强Bootstrap

BootstrapEd是基于Bootstrap,并且,优化Bootstrap在中文WEB环境中的效果;增强Bootstrap中的内置组件;增加有价值的通用组件!

Bootstrap Docs

Bootstrap Docs
Bootstrap文档全集

这里收集了Bootstrap从V1.0.0版本到现在,整个文档的历史。Bootstrap本身就是一个传奇,而这些文档就是传奇的见证!

Git Guide

Git Guide
Git简易指南

Git简易指南 -- 帮助你开始使用 git 的简易指南,木有高深内容,;)。

Grumble.js

Grumble.js
气泡形状的提示(Tooltip)控件

一个气泡形状的提示(Tooltip)控件,可以在其围绕的元素周围做360度任意定位。

Cikonss

CIKONSS
纯CSS实现的Icon

Cikonss是纯CSS实现的响应式Icon,兼容IE8+。

 --------------------------------------

看到这些我们都欣喜若狂,这么好的框架一定是项目的首选吧。答案是no

当我们看到Bootrap的优点:面对不同分辨率设备灵活性强、能够快捷解决多设备显示适应问题的同时也要考虑到它的存在的问题。
缺点:兼容各种设备工作量大,效率低下、代码累赘,会出现隐藏无用的元素,加载时间加长、其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况。当然这也是所有框架和响应式布局都存在的特点。
--------------------------------------
正如,我写一个页面,如果自己写的话,可能也就是16kb,但是用bootstrap的话就是24kb,当然这也是用自己最有的方案开比较。一个页面尚且如此,如果是整个项目的话呢。这个都需要自己考虑了。当然,小项目用前端框架还是有点大材小用的。bootstrap如果能配合Angular和html5一起用,那效果就是另一种情况了。

--------------------------------------

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值