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

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

阅读 35k
9 个回答

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源码,修改你要修改的部分。或者是直接在官网上定制你要的样式。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏