Bootstrap之栅格系统

bootstrap

移动优先  中文官网  http://www.bootcss.com/

 

1.基本模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 兼容IE --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 兼容移动端 --><meta name="viewport" content="width=device-width, initial-scale=1"><title>Document</title><link rel="stylesheet" href="./css/bootstrap.css" style type="text/css">
     <script src="./js/jquery-1.11.3.js"></script><script src="./js/bootstrap.js"></script> </head> <body></body> </html>

2.容器(默认样式中左右各15px的padding)

  流体容器 铺满整个屏幕  例:<div class="container-fluid"</div>  

  固定容器 自适应居中  分辨率大于1200时容器大小为1170px 根据不同分辨率 值会发生改变 例:<div class="container"></div>

    注: 一般头尾部采用流体 主体采用固定

3.栅格系统

  row表示行 ( 会自动处理默认padding )  col表示列

  组合模式  col-lg-  col-md-  col-sm-  col-xs-

  列偏移  col-offset-  ( 只能向右偏移 值的范围:最小为1最大为12 偏移量+自身列数>12时会向右顶出现横向滚动条)

  列排序 col-lg-push(pull)-  ( push为向后排序 pull为向前排序 )

  左浮动 pull-left  右浮动 pull-right

  清除浮动 <div class="clearfix"></div>

  固定定位 affix

  打印类:  

      在打印中可见 非打印中不可见 visible-print-block
      在打印中不可见 非打印中可见 hidden-print

转载于:https://www.cnblogs.com/dreamerC/p/6203606.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/356368.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算器界面网格布局java,安卓案例:网格布局实现计算器界面

安卓案例&#xff1a;网格布局实现计算器界面一、网格布局(GridLayout)GridLayout布局使用虚细线将布局划分为行、列和单元格&#xff0c;也支持一个控件在行、列上都有交错排列。(一)继承关系图(二)常用属性1、针对布局的属性(1)rowCount&#xff1a;行数(2)columnCount&#…

如何让多文本内容只显示一行,其余用省略号来显示

在此需要用到三个属性配合使用&#xff1a; overflow: hidden;/*超出部分隐藏*/white-space: nowrap;/*不换行*/text-overflow:ellipsis;/*超出部分省略号显示*/实例&#xff1a;<p> 兴高采烈的破蛹 重获新生的冲动 寻找爱情世界 美梦  既然不是毛毛虫 就要壮烈的扑火 …

php正则替换p闭合标签,php正则替换标签的实现方法

php正则替换标签的实现方法&#xff1a;首先通过“strip_tags”函数剥去字符串中的HTML标签&#xff1b;然后利用正则表达式替换标签&#xff0c;代码语句如“pregreplace("/s/","",strpregreplace("/s/","")”。推荐&#xff1a;《PH…

php关于ob_start('ob_gzhandler')启用GZIP压缩的bug

如果使用ob_start("ob_gzhandler"); 则ob_clean()后面的输出将不显示&#xff0c;这是个bug&#xff0c;可以用ob_end_clean();ob_start("ob_gzhandler"); 代替ob_clean();否则后面输出内容将是空。 <?phperror_reporting(E_ALL);ob_start("ob_gz…

php ip 省份,PHP有没有生成国内各省份IP地址的类库?

最近项目需要用到随机生成国内IP地址的功能&#xff0c;在网上找了个方法&#xff1a;function rand_ip(){$ip_long array(array(607649792, 608174079), //36.56.0.0-36.63.255.255array(975044608, 977272831), //58.30.0.0-58.63.255.255array(999751680, 999784447), //59…

Html_Img元素 设置图片与其他元素横排高度一致

<img id"numAdd" src"~/Images/jia.jpg" style"width:30px;height:30px;vertical-align:middle;" > 转载于:https://www.cnblogs.com/ingstyle/p/6208202.html

POJ1201 区间

题目大意&#xff1a; 给定n个整数区间[ai,bi]和n个整数ci,求一个最小集合Z&#xff0c;满足|Z∩[ai,bi]|>ci(Z里边在闭区间[ai,bi]的个数不小于ci)。 多组数据&#xff1a; n&#xff08;1<n<50000&#xff09;区间的个数 n行&#xff1a; ai bi ci(0<ai<bi<…

java maven 项目依赖关系,java – 关于依赖关系共享的Maven多模块项目组合

有几个类似的问题,但没有这样的.你如何处理这种情况(典型情况)&#xff1a;一个由8-11个子项目组成的项目,具有父工件/项目和一个主要项目,主要使用/声明其他项目作为模块.问题是所有项目“严格”只共享公共依赖项,如testng,logging,apache commons和stuff.但总是喜欢其中3个使…

junit:junit_JUnit和Hamcrest:在assertEquals上进行改进

junit:junit在我的博客文章中&#xff0c;Java越来越接受静态导入吗&#xff1f; 在本文中&#xff0c;我讨论了在Java中越来越多地使用静态导入来使代码在某些情况下更加流畅。 Java中的 单元测试特别受静态导入的影响&#xff0c;在此博客文章中&#xff0c;我提供了一个简单…

java 语音匹配,java-语音识别,是否可以通过正则表达式确定用户所说的内容?

通常,我建议您为返回的每个单词生成一个Soundex,将您要查找的单词的Soundexes对整个列表评分,作为匹配的一部分字符,并使用这些评分来确定哪个单词更可能成为比赛.例如,开始编码为S363,停止编码为S310.下表根据单词的百分比对匹配的单词进行评分&#xff1a;Word Soundex S363 …

vue.js 2.x 能否设置某个组件不被keep-alive 的解决方案

开发项目的时候&#xff0c;使用的是 vue 2.x 版本 搭配路由切换 vue-router &#xff0c;但是很多时候有些页面需要被缓存&#xff0c;有些页面不需要缓存&#xff0c;那么该如何进行一个处理 这里我使用了一个方案来解决这个问题 : 首先在入口页面进行全部缓存标签 即 <ke…

JWT –生成和验证令牌–示例

JWT提供了一种非常有趣的方式来表示可以验证和信任的应用程序之间的声明。 我的目标是展示一个小的样本&#xff0c;它使用出色的Nimbus JOSE JWT库来生成和验证令牌。 总览 进行介绍的最佳地点之一是这里 。 简而言之&#xff0c;要从jwt.io网站的资料中借用&#xff0c;声明…

无表头单链表的总结----输出链表

#include"head.h" void print(struct Student* head) {struct Student *p;printf("There are %d records:\n", sum);p head;if (p ! NULL){do{printf("%ld %d\n", p->num, p->score);p p->next;} while (p ! NULL); //以链表结尾的…

matlab 次坐标轴 标注,matlab标注坐标轴

matlab绘图如何添加图例/坐标轴刻度像这个图里的 那样的图例如何添加 还有坐标轴的刻度如何用像上图的序号 首先打开电脑上的“matlab”软件&#xff0c;主界面如下图所示&#xff0c;箭头处输入代码即可运行。下面输入代码绘制图像&#xff0c;命令行代码如下图所示。点击ente…

JQUERY操作html--获取和设置内容、属性、回调函数

一&#xff1a;jQuery - 获取内容和属性 1.获得内容 - text()、html() 以及 val() text() - 返回所选元素的文本内容 html() - 返回所选元素的内容&#xff08;包括 HTML 标记&#xff09; <script type"text/javascript" src"jquery-1.11.2.min.js">…

scala使用java类_使用Java和Scala将Play Framework 2应用程序部署到Openshift

scala使用java类几个星期&#xff0c; 马克阿特伍德 &#xff08; Mark Atwood&#xff09; &#xff0c; 豪尔赫艾利斯 &#xff08; Jorge Aliss &#xff09;和我塞巴斯蒂安 斯卡塔诺 &#xff08; SebastinScarano&#xff09;参加了红帽网络研讨会LETS PLAY&#xff01; 在…

matlab13节点线路模型,13节点配电网的建模与仿真.doc

..大学生课外创新实验竞赛总结报告项目简介&#xff1a;在配电网的正常运行中&#xff0c;随着用电负荷的变化和系统运行方式的改变&#xff0c;网络中的损耗也将发生变化。要严格保证所有的用户在任何时刻都有额定的电压是不可能的&#xff0c;因此配电网的某个节点电压偏移额…

C语言 · 未名湖边的烦恼

问题描述每年冬天&#xff0c;北大未名湖上都是滑冰的好地方。北大体育组准备了许多冰鞋&#xff0c;可是人太多了&#xff0c;每天下午收工后&#xff0c;常常一双冰鞋都不剩。每天早上&#xff0c;租鞋窗口都会排起长龙&#xff0c;假设有还鞋的m个&#xff0c;有需要租鞋的n…

可视化Java 9模块关系

正如我在之前的文章中所述 &#xff0c;我已经在Java 9 Jigsaw构建上运行Eclipse Neon了一段时间&#xff0c;并且没有任何问题。 我在周末花费了几个小时来修改一些模块化工具的想法。 我为Eclipse Neon写了一个小插件&#xff0c;可视化了各个模块之间的连接。 现在的实现…

matlab怎么整合成一个模块,Matlab如何将m文件制定成模块

代码拷过去&#xff01;可以运行了&#xff0c;记得参数设置界面什么也不用加&#xff01;初始输入记得加入&#xff0c;不然你的S模块会报错&#xff0c;因为你有个reallog函数&#xff01;function [sys,x0,str,ts] guangfu(t,x,u,flag)switch flag,case 0,[sys,x0,str,ts]m…