Bootstrap是twitter开源的一个集html、css、javascript的前端框架。
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
时髦的,直观的,强大的前端开发框架,使得web开发更快速,更容易。
By nerds, for nerds.
书呆子发明,给书呆子用。
Made for everyone.
不仅给桌面的浏览器用,而且可以给pad和手机客户端用,只要开启responsive css。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
就是根据客户端的不同,css做出自适应的变化,响应式css。
修改网格中列的宽度。
在需要的时候,将元素stack而不是float。由于移动设备的屏幕相比桌面浏览器要小,所以需要调整元素的布局。
重新调整字体的大小来适应移动设备。
全局字体14px,行高20px。
p标签,段落下面的margin是一半的行高10px。
.lead类用来突出一个段落。
bootstrap为我们定制了常用html标签的样式,段落,按钮,导航,表格,网格,输入框等等。
还定义了一些常用的按钮样式,布局样式,网格样式。
定制了排版,表格,表单,按钮等等。
还定制了很多的component,下拉菜单,按钮组,tab,breadcrumbs导航,分页,字体,进度条,警告信息等等。
常用的javascript操作,需要注意的是需要JQuery,是基于jquery做的扩展。
一个有意思的功能是bootstrap支持自定义,根据需要定制,就是选择你需要的功能,然后根据你的选择生成最终的css,js。
可以选择自己需要组件,需要的javascript插件。
定制好之后,点击最下面的downlaod,这时候下载的文件就是你定制之后的文件。
你可以直接下载bootstrap提供的zip文件中的css和js。如果对于默认的css不满意,你还可以通过下载https://github.com/twitter/bootstrap的源码,然后修改less文件夹中的.less文件,然后配合less.js使用,或者编译修改的.less文件,生成自己的css文件。
本文转自 virusswb 51CTO博客,原文链接:http://blog.51cto.com/virusswb/1035793,如需转载请自行联系原作者