无论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;
}
分享到:
相关推荐
StartBootstrap 是 Bootstrap 3 主题和模板,完全免费开源。 标签:Start
Bootstrap4的黑色主题模板,解压后可直接当做静态页面使用,与官方内容基本完全一致。 使用ie或其他浏览器在查看时如果没有效果,可能是浏览器阻止了网页上的部分内容,请允许它们并重新查看页面。
史上最经典的Bootstrap前台模板,大图轮播、仿京东商城,白色主题、高端大气。
- 可读性和以内容为中心的主题 - 精美的手工制作和建造,注重细节,满足您的需求 - 大量的帖子类型,包括图像,图像网格,块引用,背景视频,图像滑块,视频嵌入式iframe,弹出视频,HTML5播放器视频,播放器,3种...
国外的单页bootstrap模板,响应式,基于bootstrap 3,蓝色主题感觉挺养眼的; 凑够50字
此模板为 BOOTSTRAP 前台模板,非常好看,为红色和黑色作为主题,高端大气上档次,拿来就可以使用的模板,可以作为企业网站,个人网站等
今天我们整理了blacktie网站分享的高品质Bootstrap 3.0框架制作的主题模板,适合不同需求的网站,有虚拟名片、个人简历、个人网站、作品集展示等类型,我想这些会是设计师、插画师、自由职业者或者想要一个个人主页...
bootstrap页面模板,一共两种主题模板,实际根据各人需求进行修改或者直接使用。
Bootstrap4官方模板Hyper|Bootstrap4官方模板Hyper|Bootstrap4官方模板Hyper
此模板为bootstrap前台模板,主要以红色和黑色作为主题,高端大气,拿来即可使用,可以作为企业网站、个人网站或者个人学习使用等
基于bootstrap_4.0的模版资源,包含前台和后台。适合于快速开发。
BootStrap主题模版,希望可以给需要的朋友帮助。
bootstrap的ace模板,模板完整。包含表格,表单项,登录,主题切换,文件上传等
- 通用页面,如关于我们,服务,联系人,团队,职业,定价,时间表,常见问题解答,404等等 - 内置样式和调色板 - 附带许多页面块模板,以节省您的时间并帮助您获得灵感 - 精心策划的投资组合页面集合 - 字体真棒和...
一款经典的黑色主题Bootstrap后台模板,功能强大,高端大气,动态图表,相册图片可点击放大,覆盖全部按钮标签。
nifty主题_bootstrap模板,风格漂亮
基于bootstrap的UI皮肤模板,响应式HTML5模板,UI皮肤美化,内嵌常用网页UI
FlatLab是通用的bootstrap管理后台模板,使用扁平化设计理念。干净的后台元素内容位置,容易定制和专业编码是其核心力量。这套充分响应管理仪表板模板用Bootstrap4.3.1框架,构建现代网络技术HTML5和CSS3。可重用的UI...
启动Bootstrap中包含的所有模板和主题都是最新的Bootstrap 4! 有关更多信息,请访问网站 。主题-一页代理商的主题。 -全面发展的商务网站。 -干净的博客主题。 干净的博客主题。 -即将到来的主题。 -一页广告素材...