如何更改 Bootstrap 按钮样式?比如改成直角。。。

Feiox
  • 410

网站开发规划中......
觉得 Bootstrap 有很多优秀之处,同时对于满大街的 Bootstrap 超级审美疲劳,尤其是我乃Metro 风格(是北欧极简,不是微软风格)支持者。
吐槽完毕,进入正题:请问如何修改按钮的样式?

回复
阅读 32.9k
9 个回答
Humphry
  • 16.4k
✓ 已被采纳

bootstrap的CSS是用LESS编译的,面对一个编译过后的框架型项目,不建议:

  • 增加权重更高的CSS规则,覆盖原有的(包括使用!important来强制复写)
  • 增加class/id,改变你的DOM属性,然后自己写CSS规则

这样会大大增加你自己的CSS(如果有的话)和CSS框架的耦合度,也会让代码变得越来越多,失去可维护性。

CSS源自哪里,就从根源处解决:下载LESS源文件,然后搜索border-radius属性,把它全部去掉。然后重新编译CSS。

P.S.jQuery Mobile的CSS样式同理。我曾经维护原来同事的一堆复写JQM框架的样式维护得吐血。

找到bootstrap.min.css下border-Radius属性,将其改为:border-Radius="0px";

新建一个button样式,把默认的覆盖掉嘛

定义直角很简单的 border-Radius="0px".
或者部分直角 border-top-right-radius , border-bottom-right-radius

握手一下我也很讨厌圆角。WE are not 2 B squre ^^

之前就是通过加!important强制修改样式。
正确做法是:下载less源码,修改你要修改的部分。或者是直接在官网上定制你要的样式。

宣传栏