专注于WEB技术的IT博客

有了Bootstrap再也不担心网站的前端设计

时间:2014-07-09分类: Css浏览:8934
分享到:

Bootstrap(http://www.bootcss.com/ ) 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

预处理脚本

虽然可以直接使用 Bootstrap 提供的 CSS 样式表,不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发,也可以从源码定制自己需要的样式.。

一个框架、多种设备

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

特性齐全

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

遇到Bootstrap真是有点相见恨晚的感觉。有关网站的前端设计,Bootstrap似乎应用尽有,以前花了很多时间才能设计出来的圆角按纽,现在只需加一个css的类样式就可以轻松搞定,更巧的是可以在线可视化布局网页,有了Bootstrap再也不担心网站的前端设计!

漂亮的圆角按纽(图)

清新的表格设计


丰富的素材图标

可视化的在线网页布局系统

Bootstrap相关开源项目推荐


Bootstrap 编码规范

Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。

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

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

Open CDN 开放CDN服务

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

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

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

LESS 一种动态样式语言

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

Grunt 项目构建工具

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

Buttons CSS按钮样式库

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

LayoutIt! Bootstrap可视化布局

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

Unslider jQuery轮播插件

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

Bootstrap Switch Bootstrap开关组件

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

Sco.js Bootstrap组件增强版

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

iCheck 增强复选框和单选按钮

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

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

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

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

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

Preboot  Bootstrap之前世

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

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

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

Responsive Nav  响应式导航

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

Bsie  Bootstrap IE6兼容方案

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

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

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

DateTime Picker  日期时间选择器

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

jQuery UI Bootstrap  用Bootstrap美化jQuery UI

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

Google Bootstrap  Google风格的Bootstrap

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

Flat UI  Metro风格的Bootstrap

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

Metro UI CSS  Bootstrap与Metro融合

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

Font Awesome  Bootstrap专用图标字体

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

Simple Icons Icon汇

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

Bootstrap Form Builder  在线表单构造器

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

HTML5 Boilerplate  专业的前端模版

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

Web Safe Colors  Web安全色

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

Bootstrap Docs  Bootstrap文档全集

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

Git Guide  Git简易指南

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

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

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

CIKONSS  纯CSS实现的Icon

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

猜你喜欢
bootstrap布局篇详解(二)
bootstrap布局篇详解(一)
Bootstrap“减肥”优化攻略
使用Bootstrap轻松打造你的网站
nec更好的解决css方案
几款纯css打造的超酷按钮实例
推荐一款tab切换(js+css)
兼容主流浏览器的css渐变色
960网格系统模板设计的利器
css中使用一张图片显示多个背景
标签 : css 模板
除非注明,本文首发网志博客,欢迎转载!转载请注明本文地址:http://w3note.com/web/168.html,谢谢。
  • 评论
  • 赞助本站