Bootstrap部分---环境安装及一个可视化的布局;
一:环境安装*****顺序不可变*****
<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部分---环境安装及一个可视化的布局;的更多相关文章
- go语言开发环境安装及第一个go程序
下载Go语言开发包 大家可以在Go语言官网(https://golang.google.cn/dl/)下载 Windows 系统下的Go语言开发包,如下图所示. 安装Go语言开发包 双击我们下载好的G ...
- Bootstrap学习-环境安装
1.<meta http-equiv="X-UA-Compatible" content="IE=edge"> 让IE运行最新的渲染模式. 2.&l ...
- Bootstrap:教程、简介、环境安装
ylbtech-Bootstrap:教程.简介.环境安装 1. Bootstrap 教程返回顶部 1. Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.B ...
- Grafana是一个可视化面板-安装配置介绍
Grafana是一个可视化面板(Dashboard),有着非常漂亮的图表和布局展示,功能齐全的度量仪表盘和图形编辑器,支持Graphite.zabbix.InfluxDB.Prometheus和Ope ...
- 做一个完整的纯react-naitve安卓应用【从环境安装到应用发布】
前提:从来没有写过android 跟 ios 应用,是一个小前端.前一段时间玩了一下 react-native 感觉还不错,应用代码还未开源. 环境: win7 成果: ...
- Go语言开发的第一步,安装开发环境编写第一个Go程序
关于go就不介绍了,google自己的语言.其它的百科,最近比较郁闷,处于纠结状态,不想说话,真心不想说话. 开发工具安装: 安装包下载: http://code.google.com/p/go/do ...
- 一个电脑的重装到java开发环境安装配置的全过程
刚拿到一台别人用过的电脑.看着c盘爆满,而且用了还是windows7操作系统,强迫症发作马上就准备重装系统. 之前换固态使用wepe制作U盘启动盘装系统的步骤和过程全部忘记的,贼尴尬. 同事都看不过眼 ...
- MongoDB学习(二)Windows环境安装MongoDB
MongoDB的官方下载站是http://www.mongodb.org/downloads,可以去上面下载最新的程序下来. 在下载页面可以看到,对操作系统支持很全面,OS X.Linux.Windo ...
- 第四章:Oracle12c 数据库在linux环境安装
一:搭建yum 仓库 对于新手可以参考此文:<Vmware Workstation _linux yum 仓库搭建>.<CentOS7.2 创建本地YUM源和局域网YUM源> ...
随机推荐
- RM报表预览,只有固定的1个订单页面
明明选了多个记录,预览时,只显示最后一个. 原因: 主项数据的数据集选了报表自带的虚拟数据集了.
- Program C 暴力求解
Description A ring is composed of n (even number) circles as shown in diagram. Put natural numbers ...
- web安全测试-AppScan
安全测试应该是测试中非常重要的一部分,但他常常最容易被忽视掉. 尽管国内经常出现各种安全事件,但没有真正的引起人们的注意.不管是开发还是测试都不太关注产品的安全.当然,这也不能怪我们苦B的“民工兄弟” ...
- Access 中数据库操作时提示from子句语法错误
问题:如果在Access 中数据库操作时提示from子句语法错误原因:语句中某一单词为Access中的关键字.如:select * from user.其中user就是一关键字.解决:用中括号[]将其 ...
- 转:HashMap深度解析(一)
HashMap哈希码hashCodeequals 本文来自:高爽|Coder,原文地址:http://blog.csdn.net/ghsau/article/details/16843543,转载 ...
- 一个有趣的IE内核检测网站
http://se.360.cn/v5/iecoretest.html 该网站能有效检测您浏览器的内核,以及版本,操作系统. 找到这个网址,是因为最近解决WebBrowser自动调节IE版本功能时发现 ...
- (转)Ratchet教程:Buttons组件
原文:http://www.w3cplus.com/mobile/create-buttons-with-ratchet.html Ratchet教程:Buttons组件 ...
- hdoj-2033
A+B系列: #include "stdio.h"int main(){ int a[3],b[3],c[3],i,n,j,flag; while(~scanf("%d& ...
- javascript正则表达式替换字符串
var reg = /^per_list(.*)[\d]{1,}(.*)/;var str = "per_listAmtApril1.value";var replaceStr = ...
- Osmocom-BB多信道修改代码相关
修改bb\src\target\firmware\layer1\prim_rx_nb.c 文件 这个nb表示normalburst,指的是ccch的数据,用专业的术语,应该是,一个ccch的burst ...