返回新闻列表

独立的格栅系统,col-lg col-sm col-md

发布日期: 2024-02-21 | 来源: 智软设计工作室

/* container */
*{ margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
:after,:before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
.container{ position: relative; margin-right: auto; margin-left: auto;}
.row{ position: relative; margin: 0; padding: 0;}
.container:before,.container:after,.row:before,.row:after,.clearfix:before, .clearfix:after{ display: table; content: " "; clear: both;}


/* media */
.col-pd,.col-lg-1,.col-lg-10,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px}.col-xs-1,.col-xs-10,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-wide-1,.col-xs-wide-10,.col-xs-wide-15,.col-xs-wide-2,.col-xs-wide-25,.col-xs-wide-3,.col-xs-wide-35,.col-xs-wide-4,.col-xs-wide-45,.col-xs-wide-5,.col-xs-wide-55,.col-xs-wide-6,.col-xs-wide-65,.col-xs-wide-7,.col-xs-wide-75,.col-xs-wide-8,.col-xs-wide-85,.col-xs-wide-9,.col-xs-wide-95{float:left}.col-xs-10{width:10%}.col-xs-9{width:11.1111111%}.col-xs-8{width:12.5%}.col-xs-7{width:14.2857143%}.col-xs-6{width:16.6666667%}.col-xs-5{width:20%}.col-xs-4{width:25%}.col-xs-3{width:33.3333333%}.col-xs-2{width:50%}.col-xs-1{width:100%}.col-xs-wide-10{width:10%}.col-xs-wide-9{width:90%}.col-xs-wide-8{width:80%}.col-xs-wide-7{width:70%}.col-xs-wide-6{width:60%}.col-xs-wide-5{width:50%}.col-xs-wide-4{width:40%}.col-xs-wide-3{width:30%}.col-xs-wide-2{width:20%}.col-xs-wide-15{width:15%}.col-xs-wide-95{width:95%}.col-xs-wide-85{width:85%}.col-xs-wide-75{width:75%}.col-xs-wide-65{width:65%}.col-xs-wide-55{width:55%}.col-xs-wide-45{width:45%}.col-xs-wide-35{width:35%}.col-xs-wide-25{width:25%}.img-xs-300{ width: 300px;}.img-xs-220{ width: 220px;}.img-xs-190{ width: 190px;}.img-xs-160{ width: 160px;}.img-xs-150{ width: 150px;}.img-xs-140{ width: 140px;}.img-xs-130{ width: 130px;}.img-xs-120{ width: 120px;}.img-xs-110{ width: 110px;}.img-xs-100{ width: 100px;}.img-xs-90{ width: 90px;}.img-xs-80{ width: 80px;}.img-xs-70{ width: 70px;}

@media (min-width: 768px){
	.col-sm-1,.col-sm-10,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-wide-1,.col-sm-wide-10,.col-sm-wide-15,.col-sm-wide-2,.col-sm-wide-25,.col-sm-wide-3,.col-sm-wide-35,.col-sm-wide-4,.col-sm-wide-45,.col-sm-wide-5,.col-sm-wide-55,.col-sm-wide-6,.col-sm-wide-65,.col-sm-wide-7,.col-sm-wide-75,.col-sm-wide-8,.col-sm-wide-85,.col-sm-wide-9,.col-sm-wide-95{float:left}.col-sm-10{width:10%}.col-sm-9{width:11.1111111%}.col-sm-8{width:12.5%}.col-sm-7{width:14.2857143%}.col-sm-6{width:16.6666667%}.col-sm-5{width:20%}.col-sm-4{width:25%}.col-sm-3{width:33.3333333%}.col-sm-2{width:50%}.col-sm-1{width:100%}.col-sm-wide-10{width:10%}.col-sm-wide-9{width:90%}.col-sm-wide-8{width:80%}.col-sm-wide-7{width:70%}.col-sm-wide-6{width:60%}.col-sm-wide-5{width:50%}.col-sm-wide-4{width:40%}.col-sm-wide-3{width:30%}.col-sm-wide-2{width:20%}.col-sm-wide-15{width:15%}.col-sm-wide-95{width:95%}.col-sm-wide-85{width:85%}.col-sm-wide-75{width:75%}.col-sm-wide-65{width:65%}.col-sm-wide-55{width:55%}.col-sm-wide-45{width:45%}.col-sm-wide-35{width:35%}.col-sm-wide-25{width:25%}.img-sm-300{ width: 300px;}.img-sm-220{ width: 220px;}.img-sm-190{ width: 190px;}.img-sm-160{ width: 160px;}.img-sm-150{ width: 150px;}.img-sm-140{ width: 140px;}.img-sm-130{ width: 130px;}.img-sm-120{ width: 120px;}.img-sm-110{ width: 110px;}.img-sm-100{ width: 100px;}.img-sm-90{ width: 90px;}.img-sm-80{ width: 80px;}.img-sm-70{ width: 70px;}
}

@media (min-width: 1024px){	
	.col-md-1,.col-md-10,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-wide-1,.col-md-wide-10,.col-md-wide-15,.col-md-wide-2,.col-md-wide-25,.col-md-wide-3,.col-md-wide-35,.col-md-wide-4,.col-md-wide-45,.col-md-wide-5,.col-md-wide-55,.col-md-wide-6,.col-md-wide-65,.col-md-wide-7,.col-md-wide-75,.col-md-wide-8,.col-md-wide-85,.col-md-wide-9,.col-md-wide-95{float:left}.col-md-10{width:10%}.col-md-9{width:11.1111111%}.col-md-8{width:12.5%}.col-md-7{width:14.2857143%}.col-md-6{width:16.6666667%}.col-md-5{width:20%}.col-md-4{width:25%}.col-md-3{width:33.3333333%}.col-md-2{width:50%}.col-md-1{width:100%}.col-md-wide-10{width:10%}.col-md-wide-9{width:90%}.col-md-wide-8{width:80%}.col-md-wide-7{width:70%}.col-md-wide-6{width:60%}.col-md-wide-5{width:50%}.col-md-wide-4{width:40%}.col-md-wide-3{width:30%}.col-md-wide-2{width:20%}.col-md-wide-15{width:15%}.col-md-wide-95{width:95%}.col-md-wide-85{width:85%}.col-md-wide-75{width:75%}.col-md-wide-65{width:65%}.col-md-wide-55{width:55%}.col-md-wide-45{width:45%}.col-md-wide-35{width:35%}.col-md-wide-25{width:25%}.img-md-300{ width: 300px;}.img-md-220{ width: 220px;}.img-md-190{ width: 190px;}.img-md-160{ width: 160px;}.img-md-150{ width: 150px;}.img-md-140{ width: 140px;}.img-md-130{ width: 130px;}.img-md-120{ width: 120px;}.img-md-110{ width: 110px;}.img-md-100{ width: 100px;}.img-md-90{ width: 90px;}.img-md-80{ width: 80px;}.img-md-70{ width: 70px;}
}

@media (min-width: 1366px){		
	.visible-lg { display: block !important;}
	.hidden-lg {display: none !important;}	
	.visible-inline-lg { display: inline-block !important;}
	.visible-text-lg { visibility: visible !important;}
	.hidden-text-lg {visibility: hidden !important;}
	.col-lg-1,.col-lg-10,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-wide-1,.col-lg-wide-10,.col-lg-wide-15,.col-lg-wide-2,.col-lg-wide-25,.col-lg-wide-3,.col-lg-wide-35,.col-lg-wide-4,.col-lg-wide-45,.col-lg-wide-5,.col-lg-wide-55,.col-lg-wide-6,.col-lg-wide-65,.col-lg-wide-7,.col-lg-wide-75,.col-lg-wide-8,.col-lg-wide-85,.col-lg-wide-9,.col-lg-wide-95{float:left}.col-lg-10{width:10%}.col-lg-9{width:11.1111111%}.col-lg-8{width:12.5%}.col-lg-7{width:14.2857143%}.col-lg-6{width:16.6666667%}.col-lg-5{width:20%}.col-lg-4{width:25%}.col-lg-3{width:33.3333333%}.col-lg-2{width:50%}.col-lg-1{width:100%}.col-lg-wide-10{width:10%}.col-lg-wide-9{width:90%}.col-lg-wide-8{width:80%}.col-lg-wide-7{width:70%}.col-lg-wide-6{width:60%}.col-lg-wide-5{width:50%}.col-lg-wide-4{width:40%}.col-lg-wide-3{width:30%}.col-lg-wide-2{width:20%}.col-lg-wide-15{width:15%}.col-lg-wide-95{width:95%}.col-lg-wide-85{width:85%}.col-lg-wide-75{width:75%}.col-lg-wide-65{width:65%}.col-lg-wide-55{width:55%}.col-lg-wide-45{width:45%}.col-lg-wide-35{width:35%}.col-lg-wide-25{width:25%}.img-lg-300{ width: 300px;}.img-lg-220{ width: 220px;}.img-lg-190{ width: 190px;}.img-lg-160{ width: 160px;}.img-lg-150{ width: 150px;}.img-lg-140{ width: 140px;}.img-lg-130{ width: 130px;}.img-lg-120{ width: 120px;}.img-lg-110{ width: 110px;}.img-lg-100{ width: 100px;}.img-lg-90{ width: 90px;}.img-lg-80{ width: 80px;}.img-lg-70{ width: 70px;}
	
}
@media (min-width: 1440px){		
	.visible-lg { display: block !important;}
	.hidden-lg {display: none !important;}	
	.visible-inline-lg { display: inline-block !important;}
	.visible-text-lg { visibility: visible !important;}
	.hidden-text-lg {visibility: hidden !important;}
	.col-lg-1,.col-lg-10,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-wide-1,.col-lg-wide-10,.col-lg-wide-15,.col-lg-wide-2,.col-lg-wide-25,.col-lg-wide-3,.col-lg-wide-35,.col-lg-wide-4,.col-lg-wide-45,.col-lg-wide-5,.col-lg-wide-55,.col-lg-wide-6,.col-lg-wide-65,.col-lg-wide-7,.col-lg-wide-75,.col-lg-wide-8,.col-lg-wide-85,.col-lg-wide-9,.col-lg-wide-95{float:left}.col-lg-10{width:10%}.col-lg-9{width:11.1111111%}.col-lg-8{width:12.5%}.col-lg-7{width:14.2857143%}.col-lg-6{width:16.6666667%}.col-lg-5{width:20%}.col-lg-4{width:25%}.col-lg-3{width:33.3333333%}.col-lg-2{width:50%}.col-lg-1{width:100%}.col-lg-wide-10{width:10%}.col-lg-wide-9{width:90%}.col-lg-wide-8{width:80%}.col-lg-wide-7{width:70%}.col-lg-wide-6{width:60%}.col-lg-wide-5{width:50%}.col-lg-wide-4{width:40%}.col-lg-wide-3{width:30%}.col-lg-wide-2{width:20%}.col-lg-wide-15{width:15%}.col-lg-wide-95{width:95%}.col-lg-wide-85{width:85%}.col-lg-wide-75{width:75%}.col-lg-wide-65{width:65%}.col-lg-wide-55{width:55%}.col-lg-wide-45{width:45%}.col-lg-wide-35{width:35%}.col-lg-wide-25{width:25%}.img-lg-300{ width: 300px;}.img-lg-220{ width: 220px;}.img-lg-190{ width: 190px;}.img-lg-160{ width: 160px;}.img-lg-150{ width: 150px;}.img-lg-140{ width: 140px;}.img-lg-130{ width: 130px;}.img-lg-120{ width: 120px;}.img-lg-110{ width: 110px;}.img-lg-100{ width: 100px;}.img-lg-90{ width: 90px;}.img-lg-80{ width: 80px;}.img-lg-70{ width: 70px;}
	
}
@media (min-width: 1600px){	
	.visible-lg { display: block !important;}
	.hidden-lg {display: none !important;}	
	.visible-inline-lg { display: inline-block !important;}
	.visible-text-lg { visibility: visible !important;}
	.hidden-text-lg {visibility: hidden !important;}
}

@media (max-width: 1199px) and (min-width: 1023px){
	.visible-md { display: block !important;}
	.hidden-md { display: none!important;}
	.visible-inline-md { display: inline-block !important;}
	.visible-text-md { visibility: visible !important;}
	.hidden-text-md { visibility: hidden !important;}
}

@media (max-width: 1023px) and (min-width: 767px){	
	.visible-sm { display: block !important;}
	.hidden-sm { display: none !important;}	
	.visible-inline-sm { display: inline-block !important;}
	.visible-text-sm { visibility: visible !important;}
	.hidden-text-sm { visibility: hidden !important;}
}


	
@media (max-width: 767px){	
	
	.visible-xs { display: block !important;}
	.hidden-xs {display: none!important;}
	.visible-inline-xs { display: inline-block !important;}
	.visible-text-xs { visibility: visible !important;}
	.hidden-text-xs {visibility: hidden !important;}
			
	/* all */	
	body{ font-size: 12px; line-height: 20px;}	
	
	/* text */
	h1{ font-size:24px;}
	h2{ font-size:20px;}
	h3{ font-size:18px;}
	h4{ font-size:16px;}
	h5{ font-size:14px;}
	h6{ font-size:12px;}
	
	
	
}



使用方法:col-lg-8 col-md-6 col-sm-4 col-xs-3

代表超大屏幕显示8列  中大屏幕显示6列  小屏幕4列  手机端3列, 


推荐技术资料

ueditor去掉编辑器过滤功能,完成编写好的代码不被过滤,

2024-02-01

默认的ueditor编辑器会转换div为P,和过滤了一些style样式 以及一些自定义的标签,如aos="fade-up",下面告诉大家怎么设置。打开ueditor.config.js,如果已经有了一下代码,把他们的参数ture改成false,如果没有直接加入进去,// 允许进入编辑器的 div 标签自动变成 p 标签,allowDivTransToP:false,xxsFilt

阅读更多

google翻译api参数设置,google.translate.TranslateElement 参数配置

2021-11-11

<divid=”google_translate_element”style=”display:none;”></div><scripttype=”text/javascript”src=”//translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit”></script><scripttype=”text/javascript”>fu

阅读更多

pbootcms的pboot:if判断字段内容是否为空,报错,

2023-05-29

解决办法:程序运行异常: Modulo by zero,位置: /data/home/qxu1539590078/htdocs/core/function/helperphp,第838行pbootcms 判断字段内容是否为空,会出现以上问题,导致的原有就是内容里又特殊字符,那我们怎么解决了。可用用如下方法,截取部分来做判断:{pboot:if('{content:ext_gzcanr2 len=8}'!=''

阅读更多

2023最新google翻译网页api使用方法,测试可用

2023-04-19

原来多年用的突然失效了,今天重新研究了个。测试是可用的,翻译条 class变换了。重新加入对于css就行了。注意翻译一定要翻墙可访问,google翻译才行,<style>隐藏google翻译条,.skiptranslate{ display: none !important;}</style><div id="google_tran

阅读更多

禁止复制功能,实用于电脑pc和移动手机端触屏浏览器

2023-02-22

需要添加一段css代码:* { -webkit-touch-callout:none;/*系统默认菜单被禁用*/ -webkit-user-select:none;/*webkit浏览器*/ -khtml-user-select:none;/*早起浏览器*/ -moz-user-select:none;/*火狐浏览器*/ -

阅读更多

独立的格栅系统,col-lg col-sm col-md

2024-02-21

/*container*/*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.container{position:r

阅读更多

pbootcms 自动获取标题内容,填写到url名称字段,英文seo必备

2024-01-02

利用jquery 解决,并且过滤特殊字符和空格问题,<script>//增加自动获取url名称$(document).ready(function() { // 监听上一个表单输入内容的变化 $('#input1').on('input', function() { var inpu

阅读更多

阿里云虚拟主机FTP FIlezilla无法链接提示 421 There are too many connections from your internet address.解决办法

2022-05-18

今天在用FIlezilla 链接阿里云虚拟主机FTP ,提示421 There are too many connections from your internet address.但是查看了设置都没错。网上有的说。把并发设置为1.但是测试了还是不行。我发现是要把密码类型设置为明文才行。。如下图:

阅读更多

pbootcms幻灯片新增一个手机图片上传字段

2024-07-01

首先到数据库【ay_slide】表中新增一个轮播图字段,我加得是Mpic找到路径:/apps/admin/controller/content/下找到SlideContrller.php文件找到代码:// 轮播图增加,添加【picc】这个新增的数据字段名称,该文件共需要新增四处,可以对照其他字段进行添加如图,下面修改数据 得地方也改下。然后修改模板文件,/apps/ad

阅读更多