Bootstrap部分---环境安装及一个可视化的布局；

时间：2022-12-15 19:48:15

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

<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部分---环境安装及一个可视化的布局；

 

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语言开发的第一步&comma;安装开发环境编写第一个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. 第四章&colon;Oracle12c 数据库在linux环境安装

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

随机推荐

  1. Java中对象构造

    构造函数 作用:在构造对象的同时初始化对象.java强制要求对象 诞生同时被初始化,保证数据安全. 调用过程和机制:①申请内存,②执行构造函数的函数体,③返回对象的引用. 特点:与类同名,无返回类型, ...

  2. &lpar;02&rpar;odoo自定义模块

    * 官方建议模块骨架    --------------------------    addons/<my_module_name>/                 │─ __init ...

  3. Linq to sql 操作

    1.往数据库添加数据 NorthwindDataContext abc = new NorthwindDataContext(); abc.Log = Console.Out; User a = ne ...

  4. JS中如何使用Cookie

    1.关于JS设置Cookie的说明 在Javascript脚本里,一个cookie 实际就是一个字符串属性.当你读取cookie的值时,就得到一个字符串,里面当前WEB页使用的所有cookies的名称 ...

  5. Java源码解读&lpar;一&rpar; 8种基本类型对应的封装类型

    说起源码其实第一个要看的应该是我们的父类Object,这里就不对它进行描述了大家各自对其进行阅读即可. 一.八种基本类型 接下来介绍我们的八种基本类型(这个大家都知道吧):char.byte.shor ...

  6. 【Servlet】1、Servlet监听器及相关接口

    Servlet监听器用于监听一些重要事件的发生,监听器对象可以在事情发生前.发生后可以做一些必要的处理. 接口: 目前Servlet2.4和JSP2.0总共有8个监听器接口和6个Event类,其中Ht ...

  7. 【3-20】html 基本知识&sol;表格&sol;超链接

    一.HTML (一).HTML定义 HTML:是指超文本标记语言,用浏览器打开的文件 超文本标记语言:是指页面内包含文本.图片.视频.音频等元素的计算机编程语言 (二).基本格式: <html& ...

  8. mysql 压缩版安装

    环境介绍:win2008_x64+mysql5.7.10  64位 1.将压缩包解压到d:\\mysql目录,并将mysql目录中的my-default.ini 重命名为my.ini 2.将my.in ...

  9. vagrant 入门

    0.说明 本门所有的操作都是基于mac.windows可做相应调整,大体流程是一样的. 1.什么是vagrant 通俗来讲vagrant是一个通过命令行,来管理虚拟机的工具,vagrant本身并没有提 ...

  10. Xcode 利用VVDocumenter 生成注释 通过设置 再生成注释文档

    在写代码的时候,如果按照一定的规范在头文件里写上注释的话, 就可以利用Xcode的文档自动输出功能生成一份完整的HTML项目文档. 生成的格式和Apple Developer网站上的API文档几乎是一 ...

相关文章