文件名bootsrap源码:forexample/blog
1.<meta name="viewport" content="width=device-width, initial-scale=1">
确定比例缩放:需加到<head>中;
2引入.ico在head中
<link rel="icon" href="../../favicon.ico">
3设定页面的宽度
@media min-width{
.container{
width:970px;
}
}
4先用一个层设定背景,再嵌套一个层来设定这个父层的尺寸,在用
<nav>
<a class=“nav_a” href="#" target="_blank" >brand</a>
</nav>
它的类是{
.a {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
}
5使用以下的样式可以形成一个小三角
.threejiaoshape{
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
6使用下面的代码就可以形成一个带有灰色背景灰黑色边框的的块,独立占据一行
<pre><code>Example code block</code></pre>
7.规定ul的类为pager代码如下就可以产生默认按钮形状的行内块
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
8.Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下,建议将此 <meta>
标签加入到你的页面中:
<meta http-equiv="X-UA-
Compatible
" content="IE=edge">
Compatible// adj:兼容的
兼容国产浏览器
<meta name="renderer" content="webkit">
渲染器
,描绘器renderer
兼容window8的internet explorer和Windows phone 10;对屏幕的宽度和视口的宽度认识不一
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}