[框架]Bootstrap响应式Web框架

Bootstrap响应式Web框架

是目前最受欢迎的前端框架,来自 Twitter又是国外的杰作。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,是一款快速开发Web应用程序的前端工具包,它简洁灵活,使得 Web 开发更加快捷。它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。

Bootstrap响应式框架

Bootstrap 的使用越来越广泛,而且越来越多为 Bootstrap 开发各种扩展和插件来增强 Bootstrap 的功能,也有大量现成的免费的Bootstrap模板可以直接使用。

响应式特性

响应式Web设计是个趋势,这与移动Web的迅猛发展有着密不可分的关系。响应特性需要一开始就考虑网站如何在移动设备上运行,移动设备包括小型手机,平板,以及小于普通台式机显示器的屏幕。在响应式设计 中,一开始就在 Web 页面中构建了灵活性,这样用户就可以通过所有设备查看页面。响应式设计的核心是 CSS3 媒体查询,这是根据设备性质(尤其是用户的显示器大小)来调用 CSS 规则的一种标准方法。

网格系统

网格系统是将盒子布置(比如刚刚描述的)抽象为行和列的一种方法。Bootstrap 为此类网格提供了一个核心的 CSS。您可以通过使用特殊的类,通过嵌入 div 元素将内容放置在任何布局的盒子中。

如果还能想起曾经看到过的大部分 Web 页面,那么您就会认识到它们被分成了一系列的块。位于页面顶部的块可能拥有一个徽标。导航可能位于左边或右边的块中,而内容索引可能也适合放在那个位置。甚至可能出现另一个块包含一个脚注的情况。主要内容本身可能被划分成多个面板或块。过去,Web 设计人员通过使用 CSS 盒子模型(box model)手工设置所有这些块。

总结

如此多的项目都在使用 Bootstrap,以至于许多人现在可以立即识别出基于的 Bootstrap 的站点。这种识别有时候可以创建一种非独创性的效果。一名优秀的设计人员不仅可以给使用 Bootstrap 生成的站点提供自己的不同字符,而且还可以确保该站点的基本元素和响应元素都专用于其内容和使用。但是,只有少数几个项目开始研究这些考虑因素。Bootstrap 尤其适用于将思想的闪光点快速转变为 Web 项目。

这套模板也是我最近使用的一个前端框架,结合ThinkPHP框架写了个小的客户管理系统,记录所有联系拜访的客户信息。使用了一个Bootstrap的bootstrap-table的插件,这样,分页数据加载等都可以轻松实现了。下面是系统中的一个界面的截图。

Bootstrap框架系统示例

Bootstrap的响应式是我个人非常喜欢的特性,一次编写,兼顾所有。集天下之大成。

分享到:更多 ()

21

评论前必须登录!

 

  1. #1

    My husband and i have been absolutely peaceful that Edward could deal with his inquiry from the ideas he gained from your weblog. It’s not at all simplistic to simply possibly be freely giving techniques which usually most people could have been making money from. Therefore we do understand we’ve got the writer to thank because of that. The specific illustrations you’ve made, the simple web site menu, the relationships your site assist to create – it is many astonishing, and it’s aiding our son and our family reckon that this subject matter is thrilling, and that is pretty pressing. Thank you for all the pieces!