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. 002.MFC_对话框_静态文本_编辑框
			
    一.建立 名为dialogAndCtl的MFC工程,并添加如图控件 1.将上方static text 控件 Caption属性设置为在文本框中如数文本,可以统计字符 2.edit control控件属 ...
    
			
    2. 
						
  2. 小白学 Python 爬虫（30）：代理基础
			
    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...
    
			
    3. 
						
  3. [梁山好汉说IT] 边缘计算在梁山的应用
			
    [梁山好汉说IT] 边缘计算在梁山的应用 0x00 摘要 梁山泊下四个酒店就是边缘计算在梁山的应用,以朱贵南山酒店为例能看出其"计算实时/省流量/具备智能"等各种优点. 0x01  ...
    
			
    4. 
						
  4. [03]java中的方法以及控制语句
			
    00 Java中的语句块 语句块(有时叫做复合语句),是用花括号扩起的任意数量的简单Java语句.块确定了局部变量的作用域.块中的程序代码,作为一个整体,是要被一起执行的.块可以被嵌套在另一个块中,但 ...
    
			
    5. 
						
  5. HDU5179 beautiful number 题解 数位DP
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5179 题目大意: 给你一个数 \(A = a_1a_2 \cdots a_n\) ,我们称 \(A\) ...
    
			
    6. 
						
  6. 1071 小赌怡情 (15分)C语言
			
    常言道"小赌怡情".这是一个很简单的小游戏:首先由计算机给出第一个整数:然后玩家下注赌第二个整数将会比第一个数大还是小:玩家下注 t 个筹码后,计算机给出第二个数.若玩家猜对了,则 ...
    
			
    7. 
						
  7. 基于Arduino的红外遥控
			
    1.红外接收头介绍  一.什么是红外接收头?  红外遥控器发出的信号是一连串的二进制脉冲码.为了使其在无线传输过程中免受其他红外信号的干扰,通常都是先将其调制在特定的载波频率上,然后再经红外发射二极管 ...
    
			
    8. 
						
  8. 致Java初学者
			
    致Java初学者 精心整理资料点击获取 前言 ​ 能看到这篇文章的朋友,应该都或多或少的了解Java,也许你现在是个菜鸟还在成长的路上.再此期间你一定遇到了很多困惑疑虑,对未来的学习方向感到很迷惑.作 ...
    
			
    9. 
						
  9. swiper如何禁止用户滑动
			
    禁止用户滑动,只需要在最外层添加class  “swiper-no-swiping” <div class="swiper-container swiper-no-swiping&qu ...
    
			
    10. 
						
  10. Python使用requests爬取一个网页并保存
			
    #导入 requests模块import requests #设置请求头,让网站监测是浏览器 headers = { 'user-agent': 'Mozilla/5.0 (Windows NT 6. ...
    
			
    11.