讲解bootstrap的cantainer的属性样式
.cantainer{
height:1000px;
background-color:#f40;
}
.@media(min-width:768px){ //这里意思是当最小宽度
.cantainer{
width:750px;
}
}
.@media(min-width:992px){ //这里意思是当最小宽度
.cantainer{
width:970px;
}
}
.@media(min-width:1200px){ //这里意思是当最小宽度
.cantainer{
width:1170px;
}
}
另外一种用法
.@media(min-width:1200px)and(max-width:900px){ //这里意思是当最小宽度
.cantainer{
width:1170px;
}
}
css奇偶选择器
/*sction部分*/
section:nth-of-type(2n){ //选中所有偶数的section标签
background: #888;
}
section:nth-of-type(2n+1){ //选中所有奇数的section标签
background: #888;
}
css通配符选择器
/*字体图标*/
@font-face {
font-family: 'guzhenhua';
src: url('./font/MiFie-Web-Font.eot') format('embedded-opentype'),
url('./font/MiFie-Web-Font.svg') format('svg'),
url('./font/MiFie-Web-Font.ttf') format('truetype'),
url('./font/MiFie-Web-Font.woff') format('woff');
}
[class^="icon-"],
[class*=" icon-"] { //包含空格:意思是匹配多class的icon属性
font-family: guzhenhua;
font-style: normal;
}
boostrap属性意思
规格:
超小屏幕 手机 (<768px) xs
小屏幕 平板 (≥768px) sm
中等屏幕 桌面显示器 (≥992px) md
大屏幕 大桌面显示器 (≥1200px) lg
hidden-sm 在sm下隐藏
visible-md 在md下显示
