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. 【Docker】Jenkins的安装与更新
			
    一.Jenkins安装 1.获取docker镜像 2.查看jenkins版本 3.启动jenkins容器 docker run -d --name jenkins_01 -p 8081:8080 -v ...
    
			
    2. 
						
  2. tjoi2019题解
			
    t1:矩阵快速幂 t2:裸的平衡树 splay比treap代码长太多 常数大一倍 没加输优直接t了 还要特判n=1(我的splay删除的时候会遇到问题) t3: 很显然是容斥 然后对于$A+B+C+D ...
    
			
    3. 
						
  3. Controller中页面跳转完后页面的样式全消失的解决办法
			
    问题的原因应该是在controller中进行页面跳转时当前文件的路径变了 解决办法: 1.在jsp页面中<%@ page language="java" contentTyp ...
    
			
    4. 
						
  4. DOCKER学习_002:Docker的容器管理
			
    一 Docker的基本信息 前面已经安装了Docker,现在看一下已安装Docker的安装环境以及其他信息 1.1 系统环境 [root@docker-server3 ~]# uname -r -.e ...
    
			
    5. 
						
  5. Hadoop集群分布式安装
			
    一 整体介绍 1.1 硬件环境 本文使用三台服务器搭建hadoop集群,使用Centos7.5系统,服务器均有独立ip 1.2 部署的软件 部署服务:namenode(HA),resourcemana ...
    
			
    6. 
						
  6. 洛谷P1248 加工生产调度 贪心
			
    正解:贪心 解题报告: 传送门$QwQ$ $umm$直接看可能比较难想,可以先考虑另一个题? 有$n$个小怪,每打一只小怪会扣$a_i$的血,打完之后会回升$b_i$的血,问至少要多少血量才能使全程血 ...
    
			
    7. 
						
  7. Eclipse和Tomcat的版本问题---已解决
			
    Eclipse和Tomcat的版本问题---已解决 这篇文章主要是解决版本匹配的问题 我的电脑上装的是jdk10,如图: Tomcat装的是9: 接着配置好环境变量,直接上图: 然后启功Tomcat, ...
    
			
    8. 
						
  8. 手写vue observe数据劫持
			
    实现代码: class Vue { constructor(options) { //缓存参数 this.$options = options; //需要监听的数据 this.$data = opti ...
    
			
    9. 
						
  9. 从零开始学asyncio(中)
			
    本篇文章主要是讲解asyncio模块的实现原理. 这个系列还有另外两篇文章: 从零开始学asyncio(上) 从零开始学asyncio(下) 一. asyncio模块简介 asyncio是python ...
    
			
    10. 
						
  10. Ceph 文件系统-全网最炫酷的Ceph Dashboard页面和Ceph监控 -- <5>
			
    Ceph Dashboard实现 Ceph Dashboard介绍 Ceph 的监控可视化界面方案很多----grafana.Kraken.但是从Luminous开始,Ceph 提供了原生的Dashb ...
    
			
    11.