Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2030字，纯文字阅读大概需要3分钟。
内容图文
一,按钮
注意：虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格，但个人并不建议这样使用，为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。
框架中提供了基础按钮的例子:
<
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框架中控制按钮的大小都是通过修改按钮的padding、line-height、font-size和border-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效果。
原文：http://www.cnblogs.com/workstation-liunianguowang/p/5221207.html
内容总结
以上是互联网集市为您收集整理的Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单全部内容，希望文章能够帮你解决Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。