当前位置:首页 > 开发 > Web前端 > 前端 > 正文

Bootstrap笔记(二)

发表于: 2013-06-11   作者:clxy   来源:转载   浏览:
摘要: ★:再定制 到这我们都下载完,扔进自己的项目里面,虽然可以马上用了,但是还有些地方需要调整。 我采取了通过加载顺序覆盖Bootstrap的方式,如下: <link href='bootstrap.css' rel="stylesheet"> <link href='myApp.css' rel="stylesheet"><

★:再定制

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

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号