欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Bootstrap笔记(二) 博客分类: Coding bootstrap 

程序员文章站 2024-03-20 19:03:10
...

★:再定制

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

我采取了通过加载顺序覆盖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笔记(三)

相关标签: bootstrap