`
rensanning
  • 浏览: 3553293 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
Efef1dba-f7dd-3931-8a61-8e1c76c3e39f
使用Titanium Mo...
浏览量:38230
Bbab2146-6e1d-3c50-acd6-c8bae29e307d
Cordova 3.x入门...
浏览量:607654
C08766e7-8a33-3f9b-9155-654af05c3484
常用Java开源Libra...
浏览量:682841
77063fb3-0ee7-3bfa-9c72-2a0234ebf83e
搭建 CentOS 6 服...
浏览量:89568
E40e5e76-1f3b-398e-b6a6-dc9cfbb38156
Spring Boot 入...
浏览量:402165
Abe39461-b089-344f-99fa-cdfbddea0e18
基于Spring Secu...
浏览量:69772
66a41a70-fdf0-3dc9-aa31-19b7e8b24672
MQTT入门
浏览量:91863
社区版块
存档分类
最新评论

关于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主题和模板StartBootstrap.zip

    StartBootstrap 是 Bootstrap 3 主题和模板,完全免费开源。 标签:Start

    bootstrap后台模板框架

    2. **主题定制**:许多模板提供了可自定义的主题选项,允许开发者调整颜色方案、字体和其他视觉元素,以符合品牌风格或个人喜好。 3. **插件集成**:模板中通常集成了第三方库,如jQuery、Chart.js、Moment.js等,...

    bootstrap样式模板2,

    在描述中提到的“比较全面的样式合集”,暗示了这个压缩包可能包含了各种各样的Bootstrap主题、自定义CSS样式、以及可能的SASS或LESS源文件,这些都可以帮助开发者快速改变网站的设计风格,或者满足特定设计需求。...

    Bootstrap视频网站模板

    5. **自定义**:用户可以根据自己的需求定制Bootstrap的主题,改变颜色、字体和间距等,以符合品牌的视觉风格。 在这个“Bootstrap视频网站模板”中,我们可以期待以下特性: - **视频播放器**:可能包含一个定制...

    史上最经典的Bootstrap前台模板

    总结来说,这个"史上最经典的Bootstrap前台模板"利用了Bootstrap的强大功能,结合大图轮播、电商元素和白色主题,提供了一个高效的开发起点。无论是新手还是经验丰富的开发者,都能从中受益,快速创建出美观且功能...

    bootstrap布局模板

    这个压缩包文件“metronic.bootstrap”似乎包含了一套基于Bootstrap的布局模板集合,这将为开发者提供丰富的界面设计选项,帮助他们快速搭建美观且功能齐全的网站。 在Bootstrap布局中,有几个核心概念和技术值得...

    bootstrap网站模板 html页模板

    10. **最佳实践**: 开发者在使用Bootstrap模板时,还需要遵循最佳实践,如使用最新的Bootstrap版本、遵循无障碍设计原则、保持代码整洁等,以提高项目的可维护性和用户体验。 总之,"bootstrap网站模板 html页模板...

    2016年bootstrap精美模板大全

    9. 自定义主题:通过修改预定义的CSS变量,轻松更改模板的整体外观。 使用这些模板,开发者可以节省大量的设计和编码时间,专注于网站的内容和逻辑。同时,由于Bootstrap的广泛使用和社区支持,遇到问题时可以轻松...

    公司业务Bootstrap4模板

    这个“公司业务Bootstrap4模板”是专为创建专业的企业网站设计的,它采用了Bootstrap4的核心技术和设计理念,旨在提供一个高效、美观且易于定制的起点。 模板设计上,该模板以其绿色为主题色,给人一种清新、专业的...

    9个大气简洁的bootstrap后台模板,放出来

    在这个主题中,我们将会深入探讨这些“大气简洁”的Bootstrap后台模板,以及它们如何帮助提升用户体验和开发效率。 首先,让我们逐一分析这些模板的名字。"usmanhalalit-charisma-d29440e"可能是模板作者的名字和...

    bootstrap前端模板框架

    Bootstrap前端模板框架是一种广泛使用的网页开发工具,由Twitter的开发者们创建并开源。它提供了一套完整的、响应式的布局工具,使得开发者能够快速构建出美观且适应不同设备的网站或应用界面。Bootstrap的核心特点...

    bootstrap前端模板(4)

    在"bootstrap前端模板(4)"中,我们可以看到一系列与Bootstrap相关的文件,这些文件构成了一个完整的主题模板,用于创建具有专业外观和功能的单页面网站。 1. **Bootstrap框架**:Bootstrap是最流行且广泛使用的...

    简单蓝色Bootstrap后台模板下载.zip

    这个“简单蓝色Bootstrap后台模板下载”提供了预设计的组件和布局,帮助开发者轻松创建美观且功能丰富的网页界面。模板的设计风格以蓝色为主调,给人一种专业、稳重的感觉,非常适合企业级后台管理系统。 Bootstrap...

    bootstrap前端模板(3)

    这个压缩包“bootstrap前端模板(3)”包含了多个CSS文件,字体文件和一个名为Theme-NineStars的主题结构,这些都是创建Bootstrap模板的关键组成部分。 1. **Bootstrap CSS**: 包含了`bootstrap.css`和`bootstrap....

    Bootstrap Ace模板 tab页效果

    在"Bootstrap Ace模板 tab页效果"这个主题中,我们将深入探讨如何利用此模板实现多tab展示内容的功能。 Bootstrap是一个流行的前端开发框架,它为开发者提供了预设的CSS样式、JavaScript组件和HTML结构,简化了网页...

    bootstrap 后台模板 响应式

    Bootstrap 后台模板是基于流行的前端开发框架Bootstrap构建的网页设计模板,专为构建响应式和移动设备优先的后台管理界面而设计。响应式设计意味着无论用户是在桌面、平板还是手机上浏览,模板都能自动调整布局,...

    bootstrap后台管理模板

    2. 可定制性:Bootstrap提供了一套完整的CSS和JavaScript库,可以通过自定义主题或Sass变量来调整样式和功能,满足特定项目需求。 3. 组件丰富:包括按钮、表单、导航、下拉菜单、模态框、图像轮播等,几乎涵盖了...

    ASP.NET Bootstrap4 网站模板

    3. **定制化主题**:Bootstrap4允许开发者通过Sass变量和混合功能来自定义颜色、字体和其他设计细节,从而打造出独特的网站风格。 4. **JavaScript插件**:模板可能包含了一些基于jQuery的Bootstrap插件,如轮播图...

    个人简历介绍bootstrap模板

    Bootstrap的核心特性包括网格系统、响应式布局、组件库和易于定制的主题。 二、个人简历模板的特点 1. 单页设计:这款模板采用单页布局,所有信息集中在一页上,方便用户一次性查看,无需页面间跳转,提升用户体验...

Global site tag (gtag.js) - Google Analytics