无论Bootstrap还是其他衍生的模板大部分都是以英文为内容而设计的,对于中文日文等语种来说都是不适合的,所以要修改一些基本设置。当然也有一些优化好的现成模板,比如日文的可以参考[url=https://github.com/windyakin/Honoka]Honoka[/url],中文也有(但好像是收费的)。
以下是常见的需要修改的地方:
[b](1)字库及字体大小 [/b]
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;
}
[color=blue]字体大小目前多以14px为主,太大或太小都不合适。[/color]
[b](2)主题色[/b]
[list]
[*]导航条背景色/悬浮色(下拉项)
[*]左侧菜单背景色/悬浮色(下拉项)
[*]链接文字色
[*]按钮背景色
[*]面包屑
[*]分页组件色
[*]页面标题色
[/list]
[b](3)背景色[/b]
body {
background-color: #fff;
}
.content-wrapper {
background-color: #ecf0f5;
}
[b](4)导航条[/b]
.navbar {
min-height: 50px;
}
[b](5)表格[/b]
标题行颜色
.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;
}
[b](6)输入框[/b]
焦点色
.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);
}
[b](7)留白[/b]
.table {
margin-bottom: 16px;
}
.alert {
margin-bottom: 16px;
}
[b](8)表单布局[/b]
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}