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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。