一：环境安装*****顺序不可变*****

<head>

如果需要可以设定，移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--1.引入 Bootstrap--->

<link href="../../../bootsrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<!--2.引入 jquery---><!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="../../../bootsrap/bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js"></script>

<!--3.引入 js-------->

<script src="../../../bootsrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<!--4.引入以下内容，给网格改宽度-------->

<style>

@media (min-width:768px){.container{width:100%}}

@media (min-width:992px){.container{width:100%}}

@media (min-width:1200px){.container{width:100%}}

*{ margin:0px auto; padding:0px;}

</style>

</head>

总结：

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<!--1.引入 Bootstrap--->

<link href="../../../bootsrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<!--2.引入    jquery--->

<script src="../../../bootsrap/bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js"></script>

<!--3.引入 js-------->

<script src="../../../bootsrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<style>

<!--4.引入以下内容，给网格改宽度-------->

@media (min-width:768px){.container{width:100%}}

@media (min-width:992px){.container{width:100%}}

@media (min-width:1200px){.container{width:100%}}

*{ margin:0px auto; padding:0px;}

</style>

</head>

可视化的一个布局：在一个div class=container中，一个大框（分别占用2,4,6）大框中间的6格框（4,4,4） 左边的4格（8,2）中间4格（6,6）右边4格（12）

 

Bootstrap部分---环境安装及一个可视化的布局；的更多相关文章

  1. go语言开发环境安装及第一个go程序

    下载Go语言开发包 大家可以在Go语言官网(https://golang.google.cn/dl/)下载 Windows 系统下的Go语言开发包,如下图所示. 安装Go语言开发包 双击我们下载好的G ...

  2. Bootstrap学习-环境安装

    1.<meta http-equiv="X-UA-Compatible" content="IE=edge"> 让IE运行最新的渲染模式. 2.&l ...

  3. Bootstrap：教程、简介、环境安装

    ylbtech-Bootstrap:教程.简介.环境安装 1. Bootstrap 教程返回顶部 1. Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.B ...

  4. Grafana是一个可视化面板-安装配置介绍

    Grafana是一个可视化面板(Dashboard),有着非常漂亮的图表和布局展示,功能齐全的度量仪表盘和图形编辑器,支持Graphite.zabbix.InfluxDB.Prometheus和Ope ...

  5. 做一个完整的纯react-naitve安卓应用【从环境安装到应用发布】

    前提:从来没有写过android 跟 ios 应用,是一个小前端.前一段时间玩了一下 react-native 感觉还不错,应用代码还未开源. 环境: win7 成果:                 ...

  6. Go语言开发的第一步,安装开发环境编写第一个Go程序

    关于go就不介绍了,google自己的语言.其它的百科,最近比较郁闷,处于纠结状态,不想说话,真心不想说话. 开发工具安装: 安装包下载: http://code.google.com/p/go/do ...

  7. 一个电脑的重装到java开发环境安装配置的全过程

    刚拿到一台别人用过的电脑.看着c盘爆满,而且用了还是windows7操作系统,强迫症发作马上就准备重装系统. 之前换固态使用wepe制作U盘启动盘装系统的步骤和过程全部忘记的,贼尴尬. 同事都看不过眼 ...

  8. MongoDB学习（二）Windows环境安装MongoDB

    MongoDB的官方下载站是http://www.mongodb.org/downloads,可以去上面下载最新的程序下来. 在下载页面可以看到,对操作系统支持很全面,OS X.Linux.Windo ...

  9. 第四章:Oracle12c 数据库在linux环境安装

    一:搭建yum 仓库 对于新手可以参考此文:<Vmware Workstation _linux yum 仓库搭建>.<CentOS7.2 创建本地YUM源和局域网YUM源> ...

随机推荐

  1. php 加密解密字符串

    /********************************************************************* 函数名称:encrypt 函数作用:加密解密字符串 使用方 ...

  2. tabbarcontroller 内嵌导航 控制器，2层push hide tabbar 后 ，第二层直接返回根视图控制器选择tabbarcontroller的其它vc 无法显示 tabbar的 问题解决方案

    场景如标题 这样不行: [self.navigationController popToRootViewControllerAnimated:YES]; MainViewController *mai ...

  3. Android 之 数据存储

    在Android操作系统中,提供了5种数据存储方式:SharedPreferences存储,文件存储,SQLite数据库存储,ContentProvider存储和网络存储. 一.SharedPrefe ...

  4. hdu1505 dp

    //Accepted 5196 KB 109 ms //类似hdu1506 //输入数据的格式没有明确的限制 //可能出现以下情况 //5 5 //R //F //F F F //F F F F F ...

  5. Alice and Bob（不断补充）

    我之前做过一些博弈的题目,以为博弈都是DP,结果被坑了很多次,其实博弈有很多种,在此,把我见过的类型都搬上来. 1,HDU3951(找规律) 题意:把n枚硬币围成一个圆,让Alice和Bob两个人分别 ...

  6. 四则运算<3>单元测试

    经过分析图一的结果正确,因为输出到文件是为了打印,不要求在线答题功能,因此为实现答题功能. 经过分析,结果正确,满足了选择要求. 选择这六组测试用例的原因是这六组用例将有无乘数法,有无括号,有无负数, ...

  7. 利用phpmyadmin设置mysql主从同步（或者备份）

    一.实现同步的原理: 在主数据库与 从数据库 之间的实现整个复制过程主要由三个线程来完成,其中两个线程(Sql线程和IO线程)在 从数据库 端,另外一个线程(IO线程)在 主数据库 端. 注意: 1. ...

  8. HDU 4819 Mosaic(13年长春现场 二维线段树)

    HDU 4819 Mosaic 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4819 题意:给定一个n*n的矩阵,每次给定一个子矩阵区域(x,y,l) ...

  9. 游戏buff设计参见

    其实这类帖子并没有多少的设计理论,对于策划的提升和帮助也并不大,原因其实在于其适用性太窄,当我要设计XX象棋的时候,它就滚一边去了. 废话不多说切入正题: 游戏中的BUFF/DEBUFF我们见过很多, ...

  10. SQL 面试题及答案（一）

    1. SQL 语法:update set from: http://wenku.baidu.com/link?url=aVr5EbEmx-pNK86rdnas8YDWG8txjg8GEry-HU_dF ...