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. Mybatis与Spring集成（易百教程）
			
    整个Mybatis与Spring集成示例要完成的步骤如下: 1.示例功能描述 2.创建工程 3.数据库表结构及数据记录 4.实例对象 5.配置文件 6.测试执行,输出结果 1.示例功能描述 在本示例中 ...
    
			
    2. 
						
  2. 37.html
			
    转载:https://www.cnblogs.com/yuanchenqi/articles/5976755.html 前端概述 import socket def main(): sock = so ...
    
			
    3. 
						
  3. LeetCode 1 Two Sum——在数组上遍历出花样
			
    本文始发于个人公众号:TechFlow   今天是周末,和大家一起来看一道算法题.这道题是大名鼎鼎的LeetCode的第一题,也是面试当中非常常见的一道面试题.题目不难,但是对于初学者来说应该还是很有 ...
    
			
    4. 
						
  4. JWT实现分布式Session
			
    JWT是什么 JWT一看就是简称,它的全称JSON Web Token,从字面上我们看出 1.数据是JSON格式 2.用于Web应用 3.是一个Token,也就是一个令牌方式 看看官方的说明,它定义了 ...
    
			
    5. 
						
  5. DOCKER学习_003:Docker的存储
			
    一 简介 docker提供数据卷来实现数据共享与持久化,而数据卷的挂载有两种方式: 挂载主机目录(Bind mounts) 数据卷容器(Data Volumes) 数据卷是一个可供容器使用的特殊目录, ...
    
			
    6. 
						
  6. ArrayList中删除null元素效率比较
			
    package test; import java.util.ArrayList; import java.util.Collections; import java.util.Iterator; i ...
    
			
    7. 
						
  7. Tomcat从安装到配置Https SSL证书
			
    为什么要写本文? 今天一个群友在群里问怎么给Tomcat配置SSL,也就是HTTPS,他买的阿里云的服务器,自带公网ip,还找到了免费的SSL证书 既然@我了,我就帮忙搞一搞呗,我就要了一个带sudo ...
    
			
    8. 
						
  8. DNS服务器红帽5.4搭建图文教程！！！
			
    DNS服务器 挂载光盘 mount 查看光盘所在位置 mount -t iso9660 设备目录 /mnt 表示挂载 软件包安装 所有软件包都在Server目录下 rpm -ivh /mnt/Serv ...
    
			
    9. 
						
  9. Spring中常见的设计模式——代理模式
			
    一.代理模式的应用场景 生活中的中介,黄牛,等一系列帮助甲方做事的行为,都是代理模式的体现.代理模式(Proxy Pattern)是指为题对象提供一种代理,以控制对这个对象的访问.代理对象在客户端和目 ...
    
			
    10. 
						
  10. Ant Design Pro项目打开页设为登录或者其他页面
			
    Ant Design Pro项目打开页设为登录或者其他页面 一.打开页设为登录页 首先找到utils包中的authority文件,在该文件中找到如下代码: export function getAut ...
    
			
    11.