关于Bootstrap主题模板

无论Bootstrap还是其他衍生的模板大部分都是以英文为内容而设计的，对于中文日文等语种来说都是不适合的，所以要修改一些基本设置。当然也有一些优化好的现成模板，比如日文的可以参考 Honoka，中文也有(但好像是收费的)。

以下是常见的需要修改的地方：

（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;
}

关于Bootstrap主题模板

猜你喜欢