发布于 2014-10-30 16:03:42 | 246 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!
Bootstrap Web前端CSS框架
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
本文为大家讲解的是Bootstrap中的列表组件使用方法,感兴趣的同学参考下。
列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法!
首先,重提一下引用bootstrap的核心文件的问题,以免有些刚入手的朋友忘了这个。
在页面的开头,先引用bootstrap的核心文件(css,js)等。
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="css/bootstrap.min.css" /> <!-- jQuery文件 --> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- 下面这句话是为了让网页在手机端时禁止页面缩放,达到最佳视觉效果,在PC端可以注释掉 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
接下来说到bootstrap的列表组件了:
下面是一个最简单的列表组,仅仅是一个带有多个列表条目的无序列表,另外还需要设置适当的类。bootstrap给我们提供了一些预定义的样式,你可以根据自身的需求通过 CSS 自己定制。
列表组的样式类为:.list-group,列表中每列的样式为:.list-group-item:
<ul class="list-group"> <li class="list-group-item">微笑话列表项1</li> <li class="list-group-item">微笑话列表项2</li> <li class="list-group-item">微笑话列表项3</li> <li class="list-group-item">微笑话列表项4</li> <li class="list-group-item">微笑话列表项5</li> </ul>
运行效果如下:
上面介绍的是bootstrap中最简单的列表;
其实,用div+a标签同样也能够实现上面列表的效果:
<div class="list-group"> <a href="http://www.test.net" class="list-group-item active">微笑话1</a> <a href="#" class="list-group-item">微笑话2</a> <a href="#" class="list-group-item">微笑话3</a> <a href="#" class="list-group-item">微笑话4</a> <a href="#" class="list-group-item">微笑话5</a> </div>
还是用ul、li 的样式,运行效果如下:
同样,bootstrap也给我们提供了几种列表的样式,如果大家觉得列表的样式不是你喜欢的,你也可以重写他的样式,改成自己喜欢的:
<div class="list-group"> <a href="http://www.test.net" class="list-group-item list-group-item-success active">微笑话1</a> <a href="#" class="list-group-item list-group-item-info">微笑话2</a> <a href="#" class="list-group-item list-group-item-warning">微笑话3</a> <a href="#" class="list-group-item list-group-item-danger">微笑话4</a> <a href="#" class="list-group-item" style="background:#F75000;">自己定义的样式</a> </div>
运行效果如下:
然后,我想给列表加上徽章:
<div class="list-group"> <a href="http://www.test.net" class="list-group-item list-group-item-success active"><span class="badge">15</span>微笑话1</a> <a href="#" class="list-group-item list-group-item-info"><span class="badge">14</span>微笑话2</a> <a href="#" class="list-group-item list-group-item-warning"><span class="badge">18%</span>微笑话3</a> <a href="#" class="list-group-item list-group-item-danger"><span class="badge">100</span>微笑话4</a> <a href="#" class="list-group-item" style="background:#F75000;"><span class="badge">33</span>自己定义的样式</a> </div>
于是我得到了徽章:
定制内容
列表组中的每个元素都可以是任何 HTML 内容,甚至是像下面的带链接的列表组。
<div class="list-group"> <a href="http://www.test.net" class="list-group-item active"> <h4 class="list-group-item-heading">这里可以放标题</h4> <p class="list-group-item-text">这里就是内容咯</p> </a> <a href="http://www.test.net" class="list-group-item"> <h4 class="list-group-item-heading">这里可以放标题</h4> <p class="list-group-item-text">这里就是内容咯</p> </a> <a href="http://www.test.net" class="list-group-item"> <h4 class="list-group-item-heading">这里可以放标题</h4> <p class="list-group-item-text">这里就是内容咯</p> </a> <a href="http://www.test.net" class="list-group-item"> <h4 class="list-group-item-heading">这里可以放标题</h4> <p class="list-group-item-text">本文出自博客园-三卷天书</p> </a> </div>
运行得出的结果:
是不是觉得不用自己写CSS实在是太好了呢,好了,今天就跟大家啰嗦到这来,不理解或者不懂的可以回复提问,大家共同学习!