Bootstrap笔记（二） 博客分类： Coding bootstrap

★：再定制

到这我们都下载完，扔进自己的项目里面，虽然可以马上用了，但是还有些地方需要调整。

我采取了通过加载顺序覆盖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时的样式。

Bootstrap笔记（一） Bootstrap笔记（三）