bootsrap中学前段技术

最新推荐文章于 2020-05-05 21:03:10 发布

老家的回忆

最新推荐文章于 2020-05-05 21:03:10 发布

阅读量397

点赞数

分类专栏： bootsrap

本文链接：https://blog.csdn.net/qq_27905477/article/details/49479163

版权

bootsrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文件名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

收藏

觉得还不错? 一键收藏
0
评论
bootsrap中学前段技术

文件名bootsrap源码：forexample/blog1.确定比例缩放：需加到中；2引入.ico在head中3设定页面的宽度@media min-width{.container{width:970px;}}4先用一个层设定背景，再嵌套一个层来设定这个父层的尺寸，在用brand它的类是{.a {
复制链接

扫一扫

专栏目录