bootstrap框架基本用法

bootstrap是一种高级的前端开发工具包。它提供了优雅的HTML和CSS规范,由动态CSS语言Less写成。是基于jQuery框架开发的,目前本人尚未对jQuery有系统的学习,因此这里主要是介绍bootstrap的一些基本写法。css

要使用bootstrap和其余框架同样,须要先下载工具包,而且在HTML中引用bootstrap.min.css或者bootstrap.css文件,二者的效果都是同样的差异就在于第一个是简化版,省去了一些没有意义的空格,通常在咱们进行开发的时候使用,能够减小占用的内存,可是若是咱们要对其源代码进行修改或者查询的话,仍是通常使用bootstrap.css。前端

bootstrap对许多咱们常常使用但本身写又比较麻烦的页面元素有很好的支持,使得咱们能很是容易迅速的写出好看的样式,并且若是对其不满意,还能够进行修改,很是很是的牛。bootstrap

这里只介绍table,其余的能够直接在API里面找到。框架

<table class="table"></table>工具

直接写出这句代码,自动生成的表格本身就有了很规范的样式,不用咱们在CSS中再进行编写。布局

并且还能够许多好看的效果:学习

table-striped可使奇数行的背景设为灰色。

table-bordered可使边框显示。

table-hover可使鼠标悬停的行的背景变为灰色

table-condensed可使行间距变小。开发工具

这些咱们都能直接引用,很是的方便,关于这方面就不进行一一介绍,详细可查看API。ip

bootstrap还有一个更为牛的地方,Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增长,系统会自动分为最多12列。它包含了易于使用的预约义classe,还有强大的mixin用于生成更具语义的布局。内存

四种栅格选项,他们分别是col-xs ,col-sm,col-md,col-lg

xs(超小屏幕)
sm(小屏幕)
md(中屏幕)
lg(大屏幕)

这个效果对咱们在进行不一样平台上的开发带来不可思议的便利,它可以根据使用的电脑,手机,ipad..自动对页面进行调节。

相关文章
相关标签/搜索