您的位置:首页 > Web前端 > BootStrap

bootstrap 之初见

2014-10-04 16:21 381 查看
猛然间,因为某个需求,需要按照图去画个页面。一阵焦头烂额后,一张凄惨的犹如刚被强暴过的页面出现了。。。。无语中,同事告诉我,你可以采用bootstrap来画。可谓是一语惊醒梦中人。于是一天后,就有了这篇小文章……好了,吐槽完毕。下面开始正文。

bootstrap是什么?

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持:所有的主流浏览器都支持 Bootstrap。

Internet Explorer Firefox Opera Google Chrome Safari

容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。

响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

它为开发人员创建接口提供了一个简洁统一的解决方案。

它包含了功能强大的内置组件,易于定制。

它还提供了基于 Web 的定制。

它是开源的。

bootstrap能做什么?

bootstrap可以写你所能想到的常用的html元素。你仅仅需要在标签里加上特定的class即可实现使用bootstrap的样式。比如

<span style="white-space:pre">		</span><table class="table table-bordered table-hover table-striped">
<tr class="row">
<td class="col-md-4 "><p class="text-success">姓名 </td>
<td class="col-md-4"><p class="text-primary">身高</p> </td>
<td class="col-md-4"><p class="text-danger">年龄</p> </td>
</tr>
<tr class="row">
<td class="col-md-4">张三 </td>
<td class="col-md-4">1.65 </td>
<td class="col-md-4">22 </td>
</tr>
</table>
然后你会发现,一个表格就已经出现了

除此之外,还能实现表单等等。

bootstrap 通过各种class 各种叠加class来实现各种不同的功能。你需要知道bootstap究竟能实现什么效果,然后去组合使用它们。就像jquery一样。你知道都能实现什么功能,对与不常用的,我们也可以通过查表来实现出来。具体都有什么功能,大家还是去看看api吧,毕竟有中文api,学习难度直线下滑。地址:http://v3.bootcss.com/css/

bootstrap还继承了一些js来实现一些特效。不过话说,这些玩意儿也基本是基于jquery的。如果你足够心灵手巧,也是可以自己实现的。这些插件大体有之下的功能。

轮播 --------bootstrap-carousel.js

过度效果-----bootstrap-transition.js

模态对话框------bootstrap-modal.js

下拉菜单-------bootstrap-dropdown.js

滚动监听--------bootstrap-scrollspy.js

标签页--------bootstrap-tab.js

工具提示-------bootstrap-tooltip.js

弹出提示--------bootstrap-popover.js

警告框----------bootstrap-alert.js

按钮----------bootstrap-button.js

Collapse-------bootstrap-collapse.js

输入提示------bootstrap-typeahead.js

附加导航------bootstrap-affix.js

总结:bootstrap就是一个前端开发框架。他定义好了一系列的css,标签。让你可以方便的进行开发而无需大面积的跟css对着干。这对css不好的人来说是一个不小的福音。因为他可以帮助你快速的达到你希望的效果。当然,他也不是万能的。也只能部分满足你的需求。对于高度定制化的需求。我猜你的页面会写的凄惨无比。话说凌乱的代码是一种原罪啊。有时候你的一个html标签会写的很长。假如你同事也用了knockjs的话,oh~
我猜你的一个标签能比裹脚布都长~ 不过总之,这也是个不错的工具。让那些写后台程序的孩子们也能写出一个看起来不错的界面效果。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: