详解Bootstrap各式各样的按钮(推荐)

Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便。

为尊重原创这里贴一下参考的教程:。在我的很多笔记中,您可能会看到我贴的相关的网址,在这里先声明这不是广告,我只是觉得每个人的劳动成果都应该被尊重。这个网站收集了很多的信息,供我学习,我非常的感激,借鉴于这些很好的教程,我做出自己的总结,归纳知识点,方便自己记忆。假如您在做项目或者学习中,正好需要这方面的知识,然后这篇文章刚好可以帮到您,那我将会非常开心。

活学活用,自己利用bootstrap的样式来做一个表格,里边放一些知识点:

normal; word-spacing: 0px; text-transform: none; color: rgb(85,85,85); font: 15px/35px 'microsoft yahei'; widows: 1; letter-spacing: normal; background-color: rgb(255,255,255); text-indent: 0px; -webkit-text-stroke-width: 0px"> ottom; border-bottom: rgb(221,221) 2px solid; padding-bottom: 8px; text-align: left; padding-top: 8px; padding-left: 8px; border-left: rgb(221,221) 1px solid; line-height: 1.4285; padding-right: 8px; border-top-width: 0px">类样式 ottom: rgb(221,221) 1px solid; padding-bottom: 8px; padding-top: 8px; padding-left: 8px; border-left: rgb(221,221) 1px solid; line-height: 1.4285; padding-right: 8px">.btn默认/标准按钮,白色的按下灰色。一个按钮没被操作的样式,而active是按钮被点击时显示的相应的样式。一个危险动作的按钮操作链接 (仍然保留按钮行为)disabled

按钮的各个效果如下:

很明显,圆角按钮~成功按钮都是比较容易理解的,我们主要讲一下原始按钮,激活按钮和禁用按钮。

原始按钮(btn-primary):

指的是一个按钮(原始按钮,激活按钮和禁用按钮都使用了成功按钮的样式),还没有被操作的样式,这里的表现跟其左边的成功按钮样式是一致的,都是没有被按下的样子;

激活按钮(.active):

按钮被点击,被按压时的样式,这个可以说跟原始按钮是 相对应的。

禁用按钮(.disabled):

看到效果很明显,相比于成功按钮,颜色变淡,失去渐变,有一层 蒙蒙的效果,当我们的鼠标悬停在上边的时候,会出现红色的禁用圆圈,这个样式非常利于用户体验。

附上代码

rush:java;"> <Meta charset="UTF-8"> bootsrap按钮

以上所述是小编给大家介绍的详解Bootstrap各式各样的按钮。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...