bootstrap 之初见

最新推荐文章于 2024-04-21 19:09:42 发布

popAnt

最新推荐文章于 2024-04-21 19:09:42 发布

阅读量826

点赞数

本文链接：https://blog.csdn.net/kfanning/article/details/39780063

版权

猛然间，因为某个需求，需要按照图去画个页面。一阵焦头烂额后，一张凄惨的犹如刚被强暴过的页面出现了。。。。无语中，同事告诉我，你可以采用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~ 我猜你的一个标签能比裹脚布都长~ 不过总之，这也是个不错的工具。让那些写后台程序的孩子们也能写出一个看起来不错的界面效果。