bootsrap中学前段技术

最新推荐文章于 2025-05-18 16:01:20 发布

老家的回忆

最新推荐文章于 2025-05-18 16:01:20 发布

阅读量427

点赞数

CC 4.0 BY-SA版权

分类专栏： bootsrap

本文链接：https://blog.youkuaiyun.com/qq_27905477/article/details/49479163

bootsrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Bootstrap框架的一些实用技巧，包括设置视口、图标引入、页面宽度调整、导航栏样式定义、小三角形创建、预格式化代码块展示、分页链接样式设定及浏览器兼容性配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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