★:再定制
到这我们都下载完,扔进自己的项目里面,虽然可以马上用了,但是还有些地方需要调整。
我采取了通过加载顺序覆盖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 移动设备优先。 所有列默认都是左浮动 为确保适当的绘制和触屏缩放,加入下面的meta标签
bootstrap作为目前主流框架之一,会使用这个框架会使你更快速开发响应式web、移动端web!
李炎恢Bootstrap讲义笔记 李炎恢Bootstrap讲义笔记 李炎恢Bootstrap讲义笔记
bootstrap笔记总结
bootstrap一些笔记
bootstrap学习笔记-html5 各类简单案例,适合初学者
这是李恢弘老师教bootstrap视频的讲义,我好不容易找到的,免费分享出来资源共享,让大家快速学习bootstrap
tutorials point 原版bootstrap教程,带有笔记
Bootstrap笔记[收集].pdf
bootstrap笔记(每一个知识点都有单独的示例)非常全,容易上手,学习bootstrap的利器
自己整理的bootstrap学习笔记,非常值得拥有,需要的朋友,可以下载学习。
李炎恢bootstrap 讲义笔记代码全套,李炎恢 bootstrap 讲义 代码
李炎恢Bootstrap讲义笔记解压.zip
bootstrap5全套笔记
前端Bootstrap+Es6+vue学习笔记
Bootstrap 笔记 学习 教程 学习总结 有的class类等是官网上还没介绍的