关于Bootstrap主题模板

无论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;
}

你可能感兴趣的:(杂七杂八)