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>









												


											
BBOTSTRAP的更多相关文章
	

    
				

	


随机推荐
	

    
									
  1. kube-batch　解析
			
    kube-batch https://github.com/kubernetes-sigs/kube-batch 一. 做什么的? 官方介绍: A batch scheduler of kuberne ...
    
			
    2. 
						
  2. CString::CompareNoCase与CString::Compare的区别
			
    转载:https://blog.csdn.net/lingdxuyan/article/details/4362116 函数原型:int CompareNoCase( LPCTSTR lpsz ) c ...
    
			
    3. 
						
  3. 38.CSS
			
    转载:https://www.cnblogs.com/yuanchenqi/articles/5977825.html css概述 CSS是Cascading Style Sheets的简称,中文称为 ...
    
			
    4. 
						
  4. 13.python基础试题(二)
			
    借鉴:https://www.cnblogs.com/shengyang17/p/8543712.html https://www.cnblogs.com/you-wei1/p/9693254.htm ...
    
			
    5. 
						
  5. Python上下文管理使用
			
    import contextlib from queue import Queue @contextlib.contextmanager def myOpen(file): f = open(file ...
    
			
    6. 
						
  6. 安装ATS(apache traffic server)正向代理
			
    一 traffic server简介 Traffic Server是一种高性能Web代理缓存,可通过在网络边缘缓存频繁访问的信息来提高网络效率和性能.这使内容在物理上更接近最终用户,同时实现更快的交付 ...
    
			
    7. 
						
  7. PAC 代理自动发现简介
			
    一 简介 1.1 什么是PAC文件 代理自动配置(PAC)文件包含一组用javaScript编码的规则,允许web浏览器确定是将Web流量直接发送到Internet还是通过代理服务器发送        ...
    
			
    8. 
						
  8. Tangram: Optimized Coarse-Grained Dataflow for Scalable NN Accelerators 阅读笔记
			
    目录 Tangram: Optimized Coarse-Grained Dataflow for Scalable NN Accelerators 1.Abstract 2.Introduction  ...
    
			
    9. 
						
  9. ThreadLocal源码阅读
			
    package java.lang; import java.lang.ref.WeakReference; import java.util.Objects; import java.util.co ...
    
			
    10. 
						
  10. Python 官方团队在打包项目中踩过的坑
			
    花下猫语:这是 packaging 系列的第三篇译文,该系列是全网关于此话题的最详尽(水平也很高)的一个系列.原作者是 Python 官方打包团队成员,是 virtualenv 和 tox 项目的维护 ...
    
			
    11.