★:再定制
到这我们都下载完,扔进自己的项目里面,虽然可以马上用了,但是还有些地方需要调整。
我采取了通过加载顺序覆盖Bootstrap的方式,如下:
<link href='bootstrap.css' rel="stylesheet">
<link href='myApp.css' rel="stylesheet"><!-- ← 覆盖bootstrap的css等 -->
原因是比起直接修改Bootstrap的源代码,更加方便维护。如果需要升级Bootstrap,也只需整体替换新版的bootstrap.css文件即可。当然这种方式影响性能,不适合生产环境。
另外注意下面这些内容大多都不是必须的,纯粹个人喜好及心得罢了。
myApp.css内容如下
body {
/*因为调整过navbar的高度,这里需要联动。*/
padding-top: 80px;
/* 追加中文和日文字体 @注1 */
font-family: "Microsoft Yahei", "MS PGothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
input,button,select,textarea {
/* 追加中文和日文字体 */
font-family: "Microsoft Yahei", "MS PGothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
form {
/* 使窗体居中。 */
margin: 0 auto 0px;
padding: 19px 29px 29px;
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
/*日付*/
.date input {
text-align: center;
ime-mode: disabled; /*IE和FF以外ime-mode无效。*/
}
/*数字*/
input[type="number"] {
text-align: right;
ime-mode: disabled; /*IE和FF以外ime-mode无效。*/
}
/**
* ===-------------------------------------- 以下是覆盖Bootstrap的设置。
*/
.navbar-inner .container-fluid {
/*修改导航条的元纯黑背景,改成紫色线性过渡。*/
background: linear-gradient(45deg, #020031 0%, #6d3353 100%);
}
/*导航条图片的模糊转清晰特效*/
.navbar-inner img {
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
.navbar-inner a:HOVER img {
opacity: 1;
}
/*导航条上追加App图标。具体数字取决于图标尺寸。*/
.brand {
background: url(../img/ssm1.png) no-repeat left center;
background-size: 49px 33px;
text-indent: 35px;
}
/*窗体中注释标签加粗。*/
.control-label {
font-weight: bold;
}
/*Modal的漆黑背景改成透明。受不了屏幕整体忽明忽暗的效果!*/
.modal-backdrop,.modal-backdrop.fade.in {
background-color: rgba(0, 0, 0, 0);
}
/*貌似不起作用!*/
.modal.fade {
transition: opacity .3s ease-in-out;
}
/*调整Modal位置,原设置有些偏上*/
.modal,.modal.fade.in {
top: 25%; /* was 10% */
}
.popover {
max-width: 600px;
}
.tooltip-inner {
max-width: 600px;
text-align: left;
}
/*error时tooltip的样式 @注2 ===------------------------------ start */
.tooltip.error .tooltip-inner {
box-shadow: 1px 1px 3px #b94a48;
background-color: #b94a48;
color: white;
}
.tooltip.error.top .tooltip-arrow {
border-top-color: #b94a48;
}
.tooltip.error.right .tooltip-arrow {
border-right-color: #b94a48;
}
.tooltip.error.left .tooltip-arrow {
border-left-color: #b94a48;
}
.tooltip.error.bottom .tooltip-arrow {
border-bottom-color: #b94a48;
}
/*===------------------------------ end */
注1:字体应该在定制时搞定才好。
注2:tooltip需要和Javascript配合,在后面有说明。这里只追加了error时的样式。