Bootstrap之container与container-fluid

Bootstrap

Bootstrap 是一种HTML、CSS、JS框架，实现响应式web设计（RWD），这里的响应式设计的含义是指：Bootstrap能够根据屏幕的大小来调整能适应任何尺寸的站点（显示器、笔记本电脑、平板电脑或手机）开发

那么Bootstrap在实际编码中是如何使用的呢？

添加下列代码到HTML开头来将Bootstrap添加到任意应用中：

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

现在进入正题，学习一下Bootstrap给的container和container-fluid：

.container类用于固定宽度并支持响应式布局的容器

.container-fluid类用于100%宽度，占据全部视口（viewport）的容器

这里的“固定宽度”，并不是我们自己设置一个固定的数值，而是指，在.container类中，会根据实际的屏幕大小，设定一个固定的值。并且容器在页面是居中显示的。下面看一下.container类的具体内容

.container {  
  padding-right: 15px;  
  padding-left: 15px;  
  margin-right: auto;  
  margin-left: auto;  
}  
@media (min-width: 768px) { //当设备屏幕宽度小于768px，container把固定宽度设为750px  
  .container {  
    width: 750px;  
  }  
}  
@media (min-width: 992px) {  
  .container {  
    width: 970px;  
  }  
}  
@media (min-width: 1200px) {  
  .container {  
    width: 1170px;  
  }  
}  
.container-fluid {  
  padding-right: 15px;  
  padding-left: 15px;  
  margin-right: auto;  
  margin-left: auto;  
}  

.container-fluid自动设置为外层视窗的100%，如果外层视窗为body，那么它将全屏显示，无论屏幕大小，并且自动实现响应式布局。