下载

Bootstrap (当前版本 v3.3.5)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容,看看哪种方式适合你的需求吧。

用于生产环境的 Bootstrap

编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。

下载 Bootstrap

Bootstrap 源码

Less、JavaScript 和 字体文件的源码,并且带有文档。需要 Less 编译器和一些设置工作

下载源码

森普软件公共sp_public_v2.1.1

这是森普软件专用的CSS文件,里面整合各种常见的CSS调用

下载 sp_public文件

使用 Bootstrap 中文网提供的免费 CDN 加速服务(同时支持 http 和 https 协议)

Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务,请进入BootCDN 主页查看更多可用的工具库。

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.simpro.cn/css/bootstrap.min.css">
                
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.simpro.cn/css/bootstrap-theme.min.css">
                
<!-- 森普sp-public-v2.1.css文件 -->
<link rel="stylesheet" href="http://cdn.simpro.cn/css/sp_public_v2.1.1.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.simpro.cn/js/jquery.min.js"></script>
                
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.simpro.cn/js/bootstrap.min.js"></script>

无下划线.nolink

清除a的下划线.nolink类

以下为详细代码
.nolink{ text-decoration:none;vertical-align:baseline; cursor:pointer; }  
.nolink:link{text-decoration:none;}正常状态
.nolink:link{text-decoration:none;}访问过后的状态
.nolink:hover{text-decoration:none;}鼠标经过的状态
.nolink:active{text-decoration:none;}鼠标点下去时的状态

margin类

调整外边距

详细代码如下

.m-*{margin:*px}/*四周外边距为*px*/
.mt-*{margin-top:*px}/*上外边距为*px*/
.ml-*{margin-left:*px}/*左外边距为*px*/
.mr-*{margin-right:*px}/*--右外边距为*px*/
.mb-*{margin-bottom:*px}/*--下外边距为*px*/
注:起始值为0px;以5px递增,到50px以10px递增到200px
                

例:.m-5m{margin:-5px;}
.m-*m{margin:*px}/*四周外边距为*px*/
.mt-*m{margin-top:*px}/*上外边距为*px*/
.ml-*m{margin-left:*px}/*左外边距为*px*/
.mr-*m{margin-right:*px}/*--右外边距为*px*/
.mb-*m{margin-bottom:*px}/*--下外边距为*px*/
注:距离为负,起始值为-5px;-以5px递增,到-50px以-10px递增到-200px,m表达负数的英文minus
                

例:.m-5b{margin:5%;}
.m-*b{margin:*%}/*四周外边距为*%*/
.mt-*b{margin-top:*%}/*上外边距为*%*/
.ml-*b{margin-left:*%}/*左外边距为*%*/
.mr-*b{margin-right:*%}/*--右外边距为*%*/
.mb-*b{margin-bottom:*%}/*--下外边距为*%*/
注:起始值为5%;以5%递,最大到100%
                

例:.m-5bm{margin:-5%;}
.m-*bm{margin:*%}/*四周外边距为*%*/
.mt-*bm{margin-top:*%}/*上外边距为*%*/
.ml-*bm{margin-left:*%}/*左外边距为*%*/
.mr-*bm{margin-right:*%}/*--右外边距为*%*/
.mb-*bm{margin-bottom:*%}/*--下外边距为*%*/
注:距离为负,起始值为-5%;以-5%递,最大到100%,m表达负数到英文minus
                

padding类

调整内边距

详细代码如下

.p-*{padding:*px}/*四周内边距为*px*/
.pt-*{padding-top:*px}/*上内边距为*px*/
.pl-*{padding-left:*px}/*左内边距为*px*/
.pr-*{padding-right:*px}/*--右内边距为*px*/
.pb-*{padding-bottom:*px}/*--下内边距为*px*/
注:起始值为0px;以5px递增,到50px以10px递增到200px
                

例:.p-5b{padding:5%;}
.p-*b{padding:*%}/*四周内边距为*%*/
.pt-*b{padding-top:*%}/*上内边距为*%*/
.pl-*b{padding-left:*%}/*左内边距为*%*/
.pr-*b{padding-right:*%}/*--右内边距为*%*/
.pb-*b{padding-bottom:*%}/*--下内边距为*%*/
注:起始值为5%;以5%递增,最大到100%
                

例:.p-5m{padding:-5px;}
.p-*m{padding:*px}/*四周内边距为*px*/
.pt-*m{padding-top:*px}/*上内边距为*px*/
.pl-*m{padding-left:*px}/*左内边距为*px*/
.pr-*m{padding-right:*px}/*--右内边距为*px*/
.pb-*m{padding-bottom:*px}/*--下内边距为*px*/
注:距离为负,起始值为-5px;-以5px递增,到-50px以-10px递增到-200px,m表达负数的英文minus
                

例:.p-5bm{padding:-5%;}
.p-*bm{padding:*px}/*四周内边距为*%*/
.pt-*bm{padding-top:*px}/*上内边距为*%*/
.pl-*bm{padding-left:*px}/*左内边距为*%*/
.pr-*bm{padding-right:*px}/*--右内边距为*%*/
.pb-*bm{padding-bottom:*px}/*--下内边距为*%*/
注:距离为负,起始值为-5%;以-5%递,最大到100%,m表达负数到英文minuss
                

灰色线类

线条包括单条线、左边线、右边线、上边线、下边线,样式有实线和虚线,颜色为#ffffff白色;颜色为#eaeaea的一级灰色;颜色为#f0f0f0的二级灰色

;颜色为#f5f5f5的三级灰色

;颜色为#efefef的四级灰色;颜色为#f2f2f2的五级灰色

实线类


.hr-s-white{border:1px solid #ffffff;}
.hr-st-white{border-top:1px solid #ffffff;}
.hr-sb-white{border-bottom:1px solid #ffffff;}
.hr-sl-white{border-left:1px solid #ffffff;}
.hr-sr-white{border-right:1px solid #ffffff;}
不同颜色.hr-s-1-* 不同
#eaeaea一级灰色为.hr-s-gray1
#f0f0f0二级灰色为.hr-s-gray2
#f5f5f5三级灰色为.hr-s-gray3
#efefef四级灰色为.hr-s-gray4
#f2f2f2四级灰色为.hr-s-gray5

虚线类


.hr-d-white{border:1px dotted #ffffff;}
.hr-dt-white{border-top:1px dotted #ffffff;}
.hr-db-white{border-bottom:1px dotted #ffffff;}
.hr-dl-white{border-left:1px dotted #ffffff;}
.hr-dr-white{border-right:1px dotted #ffffff;} 
不同颜色.hr-d-1-*不同
#eaeaea一级灰色.hr-d-gray1
#f0f0f0二级灰色为.hr-d-gray2
#f5f5f5三级灰色为.hr-d-gray3
#efefef四级灰色为.hr-d-gray4
#f2f2f2四级灰色为.hr-d-gray5

线条颜色


.hr-color-red{border-color:#f5a71a}红色
.hr-color-blue{border-color:#15a0e6}蓝色
.hr-color-orange{border-color:#00c9c2}橙色
.hr-color-pink{border-color:#fb667a}西瓜红
.hr-color-green{border-color:#88ba24}绿色
.hr-color-violet{border-color:#937eee}紫色     
                

线条粗细


.hr-w2{border-width:2px;}
注:最小为2px,每次递增1px,最大到10px 
                

背景色

红色背景.bg-color-red
蓝色背景.bg-color-blue
橙色背景.bg-color-orange
西瓜红背景.bg-color-pink
绿色背景.bg-color-green
紫色背景.bg-color-violet
一级灰色.bg-color-gray1
二级灰色.bg-color-gray2
三级灰色.bg-color-gray3
四级灰色.bg-color-gray4
五级灰色.bg-color-gray5

字体类

字体大小用.fsize-*表示,字体颜色用.fcolor-表示,颜色为不同程度的灰色和白色。单独的微软雅黑字体样式.font-yh{font-family:"微软雅黑"}

字体大小


.fsize-14{font-size:14px;}
以像素为单位,起始值为12px,以2px递增,最大为30px;
.fsize-12em{font-size:1.2em;}.font-yh{font-family:"微软雅黑"}
以em为单位,有1.2em , 1.5em , 2em , 2.2em , 2.5em , 3em                
                

字体颜色


/*字体灰色*/  
.fcolor-22 {color:#222; } 字体222灰
.fcolor-33 {color:#333; }字体333灰  
.fcolor-66 {color:#666; } 字体666灰 
.fcolor-99 {color:#999; } 字体999灰
/*字体白色*/  
.fcolor-white {color:#fff; } 
/*字体彩色*/
.fcolor-orange{color: #f5a71a} 字体橙色
.fcolor-blue{color: #00c9c2} 字浅蓝色
.fcolor-red{color: #e84044} 字体深红色
.fcolor-pink{color: #fb667a} 字体西瓜红
.fcolor-green{color: #88ba24} 字体绿色
.fcolor-violet{color: #937eee} 字体紫色               
                

高、行高类

高用.h-*表示,行高用.lh-*表示,高和行高的值都是成对出现的。


.h-14{height:14px;}
最小为14px,以2px递增到30px,然后以10px为单位递增到100px,最大为100px
                

行高


.lh-14{line-height:14px;}
.lh-12em{line-height:1.2em;}
最小为14px,以2px递增到30px,然后以10px为单位递增到100px,最大为100px
还有以em为单位的行高,有1.2em/1.5em/2em/2.2em/2.5em/3em 
                

宽类


.w-100{width:100px;}
.w-110{width:110px;}
宽最小为100px,以10px递增到700px后,每次递增50px到800px
                

.w-10b{width:10%;}
最小为10%,最大到100%,每次递增5%
                

全局宽度


.w-all{width:100%}
                

位置类

包括块居中、文本位置、定位、垂直居中

三种居中情况


.center-text{text-align:center;}文本居中
.center-block{margin:0 auto;}块居中
.center{margin:0 auto;text-align:center;}使父元素同子元素都居中
                

定位


.po-fix{position:fixed;}固定定位
.po-re{position:relative;}相对定位(加给父级)
.po-ab{position:absolute;} 绝对定位(加给子集)
                

定位距离左边


.left-10{left:10px}
最小为0px,以5px为单位递增到100px,再以10px为单位递增到800px,最大到800px
                

.left-10b{left:10%}
以百分比为单位,最小为10%,以5%为单位递增到100%
                

定位距离右边


.right-10{right:10px}
最小为0px,以5px为单位递增到100px,再以10px为单位递增到800px,最大到800px
                

.right-10b{right:10%}
以百分比为单位,最小为10%,以5%为单位递增到100%
                

定位距离上边


.top-10{top:10px}
最小为0px,以5px为单位递增到100px,再以10px为单位递增到800px,最大到800px
                

.top-10b{top:10%}
以百分比为单位,最小为10%,以5%为单位递增到100%
                

定位距离下边


.bottom-10{bottom:10px}
最小为0px,以5px为单位递增到100px,再以10px为单位递增到800px,最大到800px
                

.bottom-10b{bottom:10%}
以百分比为单位,最小为10%,以5%为单位递增到100%
                

文本对齐方式


.text-l{text-align:left;}文本左对齐
.text-r{text-align:right;}文本右对齐
                

垂直上下居中


.va-t {vertical-align:top}上居中 
.va-m {vertical-align:middle}中间居中
.va-b {vertical-align:bottom}底居中  
.va-bl {vertical-align:baseline}默认样式 
                

缩进


.ti-1 {text-indent:1em; }  
.ti-2{text-indent:2em; }  
.ti-3 {text-indent:3em; }  
.ti-4 {text-indent:4em; }  
.ti-5 {text-indent:5em; }
                

浮动


.pull-left{float:left;}左浮动
.pull-right{float:right;}}右浮动
.clearfix{clear:both;overflow:hidden;}}清除浮动
                

元素显示隐藏

元素溢出隐藏overflow类


.over-h{overflow:hidden;}溢出隐藏 
.over-a{overflow:auto; }如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
.over-v{overflow:visible; }默认值。内容不会被修剪,会呈现在元素框之                    
                    

显示隐藏元素display类


.di-n {display:none !important; }  
.di-b {display:block !important; }  
.di-i {display:inline !important; }  
.di-ib {display:inline-block !important; }  
                    

visibility类


.vi-h {visibility:hidden !important; }  
.vi-v {visibility:visible !important; } 
                    

边框类

文本框


.input-text{border-left-style: none;border-right-style: none;border-top-style:none;border-bottom: 1px solid #F0F0F0;}文本输入框无上、左、右三边
.text-TXT { border-width:1px; border-style:solid; border-color:#454545; padding:5px; }文本输入框
                

边框圆角

 
.bor-ra-0{border-radius: 0px}弧度最小为0,依次递增1px,最大到10px
.bor-ra-100b{border-radius: 100%}当数值为100%时,没有菱角
                

去掉边框线

 
.bor-none{border:none !important;}
.bor-l-none{border-left:none !important;}
                

去掉点击后边框


.out-none{outline: none !important;}
                

阴影


.shadow-black黑色阴影,透明度为0.5
.shadow-white白色阴影,透明度为0.5
                

阿里巴巴字体图标设置

使用字体图标,有两种路径,一种是下载到本地,一种是在线链接,路径直接按照提示拷贝就可,字体图标的设置.iconfont类,在本css文件中,大小为22px,颜色为灰色#ababab,左右各有5px的内边距


.iconfont{
font-family:"iconfont"!important;
font-size:22px;font-style:normal;color:#ababab;
padding-left:5px;padding-right:5px;
-webkit-font-smoothing:antialiased;
-webkit-text-stroke-width:0.2px;
-moz-osx-font-smoothing:grayscale;
}