当前位置：首页 > news >正文

bootstrap总结

news 来源：原创 2024/4/28 3:15:05

1，相关链接：

bootstrap中文网： http://v3.bootcss.com

CDN加速服务：

           <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>


2，自适应界面，不同屏幕大小的界面，界面布局不一样

   HTML代码：在head中插入如下代码： <meta name="viewport" content="width=device-width,initial-scale=1">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link href="style.css" type="text/css" rel="stylesheet">
 </head>

 <body>
      <div class="heading"></div>
      <div class="container">
          <div class="left"></div>
          <div class="main"></div>
          <div class="right"></div>
      </div>
      <div class="footing"></div>
    
 </body>
</html>

View Code

css代码：使用@media screen and (min-width:600px) and (max-width:960px) 来调整布局

*{
    margin:0;
    padding:0;
}

.heading,
.container,
.footing{
   margin:10px auto;
}

.heading{
   height:100px;
   background-color:chocolate;
}

.left,
.right,
.main{
 background-color:#ffccff;
}

.footing{
   height:100px;
   background-color:aquamarine;
}

@media screen and (min-width:960px){
   .heading,
   .container,
   .footing{
     width:960px;
   }
   .left,
   .main,
   .right{
      float:left;
      height:500px;
   }
    .left,
    .right{
       width:200px;
    }

    .main{
       margin-left:5px;
       margin-right:5px;
       width:550px;
    }
    .container{
        height:500px;
    }
}


@media screen and (min-width:600px) and (max-width:960px){
      .heading,
      .container,
      .footing{
         width:600px;
      }
      
       .left,
       .main{
         float:left;
         height:400px;
       }

       .right{
          display:none;
       }
       .left{
          width:160px;
       }
       .main{
         width:435px;
         margin-left:5px;
       }
       .container{
           height:400px;
       }

}

@media screen and (max-width:600px){
    .heading,
    .container,
    .footing{
       width:400px;
    }

    .left,
    .right{
       width:400px;
       height:100px
    }
    .main{
       margin-top:10px;
       width:400px;
       height:200px;
    }
    .right{
       margin-top:10px;
     }

     .container{
         height:420px;
     }
}

View Code

3, 选择文件

<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60%
</div>
</div>

View Code

4, 进度条

<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60%
</div>
</div>