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. 同时安装了python3.4和python3.5，如何使用pip？
			
    首先我们python3.4 -m pip --version一下 再python3.5 -m pip --version 一下 发现两个pip版本不同,在使用pip3时,使用的其实是python3.4 ...
    
			
    2. 
						
  2. ajax异步发送时遇到的问题
			
    问题原因是:controller中方法名与url中的名字不一样造成的 解决办法:找到错误的方法名,将其与url中的方法名统一:
    
			
    3. 
						
  3. 大白话讲解Spring的@bean注解
			
    1.Spring注解分类 从广义上Spring注解可以分为两类: 一类注解是用于注册Bean 假如IOC容器就是一间空屋子,首先这间空屋子啥都没有,我们要吃大餐,我们就要从外部搬运食材和餐具进来.这里 ...
    
			
    4. 
						
  4. 《面试宝典》 2019年springboot面试高频题(java)
			
    前言 2019年已经成为了过去,借此机会想好好总结一下2019年项目研发的成效,看看在项目从无到有,都经历了那些变化?取得了哪些成果?踩过哪些坑?一个人.一个研发团队要想有质的飞跃,必须善于反思过去, ...
    
			
    5. 
						
  5. 基于CentOS 7 部署MySQL 5.7的基本操作
			
    关闭selinux # sed -i '/SELINUX/s/enforcing/disabled/' /etc/selinux/config重启后生效# sestatus 修改提示符配置# vi / ...
    
			
    6. 
						
  6. leetcode腾讯精选练习之两数相加
			
    两数相加 题目: 给出两个非空的链表用来表示两个非负的整数.其中,它们各自的位数是按照逆序的方式存储的,并且它们的每个节点只能存储一位数字.如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们 ...
    
			
    7. 
						
  7. 《工具》centos 7.x 下安装 JDK，超详细总结一看就会
			
    第一步 检查 JDK 查看JDK版本,在命令行输入:java -version [root@test ~]# java -version bash: java: command not found 如 ...
    
			
    8. 
						
  8. 7个效果震憾的HTML5应用组件
			
    在HTML5的世界里,任何文本.图像都可以变得令人难以想象,很多HTML5应用也都已经随着浏览器的升级而变得运行飞速,而且兼容性也越来越好.下面为大家介绍7款效果震憾的HTML5应用组件,HTML5是 ...
    
			
    9. 
						
  9. 《C# 爬虫 破境之道》：第二境 爬虫应用 — 第二节：以事件驱动状态、数据处理
			
    续上一节内容,对Web爬虫进行进一步封装,通过委托将爬虫自己的状态变化以及数据变化暴露给上层业务处理或应用程序. 为了方便以后的扩展,我先定义一个蚂蚁抽象类(Ant),并让WorkerAnt(工蚁)继 ...
    
			
    10. 
						
  10. Python知识体系框架 思维导图
			
    技术文档已经独立整理! 请移步个人技术文档:https://anxiangchegu.github.io/technical-doc 如需更多Java.Python.大数据体系知识,请稳移步个人技术文 ...
    
			
    11.