奇迹969

 

BBOTSTRAP

Bootstrap

第一步：下载

第二步： 解压缩

第三步：引入（head内部  link引入）

 

Bootstrap 全局样式

移动设备优先：
<meta name="viewport" content="width=device-width, initial-scale=1">
（需要在<head>  之间添加元数据标签

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">）


<meta http-equiv="X-UA-Compatible" content="IE=edge">（告诉IE浏览器以最高规格渲染）
 
.c1 {
    background-color: red;
    padding: 10px 20px;
    margin: 0 auto;
    height: 100px;
    width: 100px;
}     margin:0 auto  为 自动居中

一.布局容器
<div class="container">
  ...
</div>
或
<div class="container-fluid">
  ...
</div>

二.栅格系统





<div class="col-xs-6  c1 col-xs-push-6">
</div>
<div class="col-xs-6 c2 col-xs-pull-6">
</div>

或
<div class="col-md-6 col-xs-6 c1  col-xs-offset-3">
</div>

一共12列








三.媒体查询




@media screen and (max-width: 700px) {
            .c1 {
                background-color: green;


放 style 里 








@media screen and (max-width: 700px) {
            .c1 {
                background-color: green;


放 style 里 




 


四 嵌套列




<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>






 

















		

			posted on 
2019-05-14 16:00 
奇迹969 
阅读(135) 
评论(0) 
编辑 
收藏 
举报

		

	

	
	
	






    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    











	
		

导航