首页 > 其他 > 详细

Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

时间:2016-02-26 18:41:24      阅读:198      评论:0      收藏:0      [点我收藏+]

一,按钮

注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用buttona标签来制作按钮。

框架中提供了基础按钮的例子:

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

不过这里说一下这个button这个标签为啥还要加个type="button"我个人理解是就像input标签一样 任何标签都可成为按钮,换言之就是只要你加了样式之后很多控件也可以挂羊头卖狗肉 ,所以这里指明一下type是button 当然这也只是我个人的一个想法,很多人认为这是一个小BUG,确实我也不否认.

另外 按钮的大小也有相应的定义

技术分享

从上表中不难发现,在Bootstrap框架中控制按钮的大小都是通过修改按钮的paddingline-heightfont-sizeborder-radius几个属性。

按钮的焦点状态也有这么几种 ,基本和input框响应效果一样同样是加了伪类":focus"Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)点击状态(:active)焦点状态(:focus)几种。

1.1图像部分 这点没有特意拿出来单做一个标题内容不是特别多

图像在网页制作中也是常要用到的元素,在Bootstrap框架中对于图像的样式风格提供以下几种风格:

1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图片
3、img-circle:圆形图片
4、img-thumbnail:缩略图片

<img  alt="140x140" src="http://placehold.it/140x140">
<img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140">

由于样式没有对图片做大小上的样式限制,所以在实际使用的时候,需要通过其他的方式来处理图片大小。比如说控制图片容器大小。(注意不可以通过css样式直接修改img图片的大小,这样操作就不响应了

图标问题:这里说的图标就是Web制作中常看到的小icon图标,可以说这些小icon图标是一个优秀Web中不可缺少的一部分,起到画龙点睛的效果。在Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

原文:http://www.cnblogs.com/workstation-liunianguowang/p/5221207.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!