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. mac笔记本安装Android sdk
			
    一.先下载android sdk for mac   给二个靠谱的网址: a). http://down.tech.sina.com.cn/page/45703.html b). http://mac ...
    
			
    2. 
						
  2. 16python的map函数，filter函数，reduce函数
			
    map num_l = [1,6,8,9] def map_test(func,array): ret = [] for i in array: res = func(i) ret.append(re ...
    
			
    3. 
						
  3. pandas数据分析小知识点(一)
			
    最近工作上,小爬经常需要用python做一些关于excel数据分析的事情,显然,从性能和拓展性的角度出发,使用pandas.numpy是比vba更好的选择.因为pandas能提供诸如SQL的很多查找. ...
    
			
    4. 
						
  4. 一篇长文说 git 基础
			
    版本管理在产品级开发中是非常重要的一个部分,它涉及到团队协作,且影响到产品最终的发布.上线以及测试环节,当前最流行的版本控制系统是 git.git 内容非常多,本文尽量克制地来介绍 git 的基础内容 ...
    
			
    5. 
						
  5. Spring||Interview
			
    1.依赖注入(DI)(IOC) 对象本身不负责对象的创建和维护,将控制权转交给外部的容器实现,降低程序的耦合度,只提供java方法让容器决定依赖关系,依赖关系的对象通过JavaBean属性或者构造函数 ...
    
			
    6. 
						
  6. 将Samba设置为Active Directory域控制器
			
    一 简介 从版本4.0开始,samba可以作为Active Directory(AD)域控制器(DC)运行,如果在生产环境中安装samba,建议运行两个或者多个DC用于故障转移 本文介绍如何让将一个S ...
    
			
    7. 
						
  7. Logback 学习指南 一
			
    因为项目中用到 SpringBoot,看到官方文档中提及默认的日志实现是 logback,因此就通过阅读手册和结合实践学习了下相关的知识,记录下以备查阅. 1. logback 是什么? logbac ...
    
			
    8. 
						
  8. 洛谷$P4331\ [BOI2004]\ Sequence$ 数字序列 左偏树
			
    正解:左偏树 解题报告: 传送门$QwQ$ 开始看到的时候$jio$得长得很像之前做的一个$dp$,,, 但是$dp$那题是说不严格这里是严格? 不难想到我们可以让$a_{i},b_{i}$同时减去$ ...
    
			
    9. 
						
  9. Hive/Impala批量插入数据
			
    问题描述 现有几千条数据,需要插入到对应的Hive/Impala表中.安排给了一个同事做,但是等了好久,反馈还没有插入完成--看到他的做法是:对每条数据进行处理转换为对应的insert语句,但是,实际 ...
    
			
    10. 
						
  10. 手算CRC及其实现
			
    前言: 这篇文章主要讲的是如何手算CRC以及运用CRC,更侧重方法的步骤,对原理方面不做探讨. 方法也是按照我个人理解的来,所以并不专业~ 一些搬过来的代码我也修改了一下下 如果想了解原理的可参考资料 ...
    
			
    11.