bootsrap中学前段技术

来源：互联网发布：淘宝卖家店铺装修视频编辑：程序博客网时间：2024/04/28 03:37

文件名bootsrap源码：forexample/blog

1.<meta name="viewport" content="width=device-width, initial-scale=1">

确定比例缩放：需加到<head>中；

2引入.ico在head中

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)}

0 0