以下是常见的需要修改的地方:
(1)字库及字体大小
Bootstrap的字库:
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
AdminLTE的字库:
body { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
Honoka的字库:
body { font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
中文的字库:
body { font-family:'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif; }
字体大小目前多以14px为主,太大或太小都不合适。
(2)主题色
- 导航条背景色/悬浮色(下拉项)
- 左侧菜单背景色/悬浮色(下拉项)
- 链接文字色
- 按钮背景色
- 面包屑
- 分页组件色
- 页面标题色
(3)背景色
body { background-color: #fff; } .content-wrapper { background-color: #ecf0f5; }
(4)导航条
.navbar { min-height: 50px; }
(5)表格
标题行颜色
.table th { color: #ffffff; background-color: #42afe3; }
奇偶行背景色
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; } .table-hover > tbody > tr:hover { background-color: #f5f5f5; }
边线
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border: 1px solid #bdbdbd; }
(6)输入框
焦点色
.form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); }
(7)留白
.table { margin-bottom: 16px; } .alert { margin-bottom: 16px; }
(8)表单布局
.form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }