Bootstrap网页布局网格的实现

1、Bootstrap网格系统的工作原理

1.1 十二栅格系统

栅格就是网格，英文Grid，之所以有的地方是网格，有的地方是栅格，只是翻译习惯不同。十二栅格系统的意思是将整个屏幕按宽度划分为十二等份，而一等分代表屏幕宽度的十二分之一，为什么划分为十二等份，而不是十等分或其他等份呢，这是因为12是1，2，3，4，6的最小公倍数，根据经验，按照这样的划分是最美观和实用的。当然，我也见过36栅格和十栅格系统，从使用上来看，确实不如12栅格方便。

在十二栅格系统，如果我想把屏幕分为左右两侧，左边占三分之一，右边占三分之二，则可以将左边宽度设置为4栅格，右边设置为8栅格。如果我需要左右各站一半，只需要设置每个为6栅格。如果我只需要设置一个页面占满屏幕，可以直接设置为12栅格。你看，是不是很方便？

1.2 Bootstrap 网格系统标签

Bootstrap 网格系统设计三个标签，分别是container，row，col：

container是容器，在上一节中，专门做了详细的介绍。
row是行的意思，代表着一个水平行
col是单元格，代表着具体每一个单元格，其写法有三种：col、col-栅格数（如col-3）、col-屏幕大小-栅格数（如col-md-3）。

下面是一段示例代码，将屏幕划分为三个等宽的单元，先不用深究具体代码的写法，只需要简单了解一下网格系统的结构即可，后面我们会详细说明。

1.3 Bootstrap 网格系统规则

使用行（row）来创建列的水平组。
一个页面内可以有多个行。
行必须放置在容器（container）内，以便获得适当的对齐（alignment）和内边距（padding）。
内容应该放置在列（col）内，且唯有列可以是行的直接子元素。
列内还可以嵌套行，列内的行无需container，因为列本身就是个容器。
可以直接使用预定义的网格类，比如 col-屏幕大小-栅格数，用于快速创建栅格布局。
预定义类中，屏幕大小有5个值，主要用于响应式设计，见3.1。栅格数为数字1到12，代表占屏幕宽度。

2、Bootstrap 网格系统中单元格宽度设置

2.1 默认等宽布局

如果我们不设置每个列的宽度，则默认有多少个列都会平均分布各列所占宽度，但是如果一行有超过12个列，将会出现不可预知的现象（我是为了研究一下做了几个测试，你没有必要去测试这个，如果你想布局超过12个，可以用表格）。下面我给出一段代码，后面将一直沿用这段代码，做一些微小的更改，不在重复给出。

采用col、col-栅格数设置宽度的时候，预览效果请把窗口宽度设置为最大，否则可能会导致效果偏差，另外我们不建议实际应用中这样设置，请使用响应式网格布局，哪怕你不想响应。



  
    
    
    
    
    
 
    网格系统演示
  
  
  
    
        
            
                Bootstrap是什么？
                
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                
            
            
                Bootstrap是什么？
                
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                
            
            
                Bootstrap是什么？
                
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                
            
            
                Bootstrap是什么？
                
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。

这段代码效果显示如上图所示，你可以将下面单元格部分多复制几个，看一下效果。

2.2 设置每个列宽

试着将三个

中的col分别换为col-3，col-6，col-3或者其他的数值，总之三个数相加和为12即可。当然你也可以删除或者增加一个或几个单元格，总之一行的和为12即可。通过这样的简单设置，可以非常方便的修改单元格的宽度。下图是设置为col分别换为col-2，col-2，col-4，col-4显示效果

2.3 可变宽度的列

如果你在设置单元格数值的时候，如果有三个单元格，只设置了一个，则剩下的两个单元格会平分剩下的空间，这样就可以很方便的设置可变宽度的列了。提醒一下，设置固定值的单元格并不需要在前面，比如，2.1代码你可以设置第二个单元格占屏幕一般（col-6），其他单元格平均分配。

2.4 自动换行的列

当每个单元格都设置了宽度数值，当一行中，剩下的空间不再容纳某个单元格的时候，会自动换行。

将2.1的例子，将四个

中的col都换为col-6，查看效果。

将2.1的例子，将四个

中的col都换为col-12，查看效果。

将2.1的例子，将四个

中的col都换为col-8，查看效果。

可以看出，虽然设置为col-8也可以每个单元格一行，但是文字只占屏幕的十二分八，也就是三分之二，所以如果没有特殊要求，尽量将每行的单元格数值相加正好为12。

3、Bootstrap 网格响应式布局

3.1 什么是响应式布局

关于响应式布局，简单来说就是在不同屏幕大小的时候，展现出的页面布局不同。例如手机看的时候一行只有一个单元格，平板看的时候一行两个单元格，电脑看的时候有三个。Bootstrap可以很方便的实现这种功能。

3.2 Bootstrap 网格系统屏幕大小划分

看看下面的表格，是不是很熟悉，和断点的规定一模一样，只是多了个xs而已，其实默认就是xs，所以可以直接省略。可以看到，Bootstrap通过5个断点，将屏幕分为6种大小类型。

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container容器	None (auto)	540px	720px	960px	1140px	1320px
屏幕大小类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-

3.3 Bootstrap 网格响应式布局实例

将2.1的例子，将四个

都换成

，改变浏览器窗口大小，查看效果，这段代码的意思是<768px的时候，一行只有一列（每列宽12栅格），当768px<宽度<992px的时候是两列（每类宽6栅格），当大于992px的时候每行3列（每列宽4栅格）。下面是一段演示录像

当然你还可以换分的更细一点,换成

。

在这里告诉你个小技巧，如果你想一行显示几列，宽度只就是用12除以几，哈哈，估计你也能想得到。

3.4 如果你不想响应

如果你想让所有的浏览器显示效果一致，都分为两列，也就是不想让它响应式显示，那么很简单，你把所有的屏幕下的栅格数设置相同的数值即可

，这样就可以保持任何屏幕下一致了。

到此这篇关于Bootstrap网页布局网格的实现的文章就介绍到这了,更多相关Bootstrap网格布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

你可能感兴趣的:(Bootstrap网页布局网格的实现)

SOME/IP-SD -- 协议英文原文讲解1 忆源 SOME/IP-SD tcp/ip 网络网络协议
前言SOME/IP协议越来越多的用于汽车电子行业中，关于协议详细完全的中文资料却没有，所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块：1.SOME/IP协议讲解2.SOME/IP-SD协议讲解3.python/C++举例调试讲解1IntroductionandoverviewThisprotocolspecificationspecifiestheformat,messages
最全redis缓存核心知点（原理+图解）敲代码的胖虎数据库 redis 队列数据库分布式
redis缓存核心知点一、主流应用架构二、缓存知识考点三、多路I/O复用模型四、常用的数据类型五、消息队列六、Redis的持久化6.1BGSAVE原理6.2RBD持久化的缺点6.3持久化方式之AOF6.4AOF文件重写6.5Redis数据的恢复6.7RDB和AOF的优缺点6.8RDB-AOF混合持久化方式（新版本的默认备份方式）七、Pipeline及主从同步7.1Pipeline的简介7.2red
SOME/IP--协议英文原文讲解1 忆源 SOME/IP AUTOSAR 网络
前言SOME/IP协议越来越多的用于汽车电子行业中，关于协议详细完全的中文资料却没有，所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块：1.SOME/IP协议讲解2.SOME/IP-SD协议讲解3.python/C++举例调试讲解一、SOME/IP由来及协议下载1.历史SOME/IP（Scalableservice-OrientedMiddlewarEoverIP）是由宝马的La
Chrony 无法同步时间的排查过程中年如酒 Linux linux
文章目录1.问题描述2.检查chrony.conf配置3.检查Chronyd进程状态4.检查Chrony是否在跟踪时间5.检查Chrony是否获取了NTP源6.检查防火墙7.检查网络连接性8.根因9.解决方案10.验证1.问题描述在一台Linux服务器上配置了Chrony作为NTP客户端，配置文件/etc/chrony.conf指定了两个NTP服务器：2.检查chrony.conf配置cat/et
笔记工具--MD-Markdown的语法技巧忆源笔记
MD格式，全称为Markdown格式，是一种轻量级标记语言文件，主要用于创建格式化文本。以下是对MD格式的详细解释：一、定义与特点定义：MD文件是一种纯文本格式的文件，使用简单的符号或语法来标记标题、列表、链接、图片等元素，从而实现对文本的格式化。特点：易读易写：MD文件的语法简洁明了，使得作者能够快速上手并编写出结构清晰的文档。兼容性强：MD文件可以在不同的平台和设备上打开和编辑，如文本编辑器、
Flink-02-flink技术架构及工作原理 TRX1024 Flink
Flink组件栈自下而上，分别针对每一层进行解释说明：Deployment该层主要涉及了Flink的部署模式，Flink支持多种部署模式：本地、集群（Standalone/YARN）、云（GCE/EC2）。Runtime层Runtime层提供了支持Flink计算的全部核心实现，比如：支持分布式Stream处理、JobGraph到ExecutionGraph的映射、调度等等，为上层API层提供基础服
Axios的几种请求方式古城的风cll 前端技术 axios
Axios的get方法和put方法用法相同，第一个参数是路径，第二个参数是对象，里面存放请求参数。Get方法中第二个参数里面，用params对象存放传递的参数Post方法的第二个参数里面，直接存放传递的参数
深入解析 Python 的 __str__() 方法重写 web安全工具库 python microsoft 开发语言
各类资料学习下载合集https://pan.quark.cn/s/8c91ccb5a474在Python中，__str__()是一个特殊的方法，用于定义对象的“非正式”字符串表示。重写__str__()方法可以让我们定制类的实例在打印或转换成字符串时的表现。本文将详细讲解__str__()方法的作用、如何重写它，以及具体的代码示例和运行结果。一、什么是__str__()方法__str__()方法是
MySQL复合索引的最左匹配原则 web2u MySQL mysql android 数据库
聊聊MySQL复合索引的最左匹配原则：从一个简单例子说起今天想跟你们聊聊MySQL里一个挺有意思的话题——复合索引的最左匹配原则。说实话，我刚接触数据库的时候，看到索引这个东西脑袋就有点晕，后来慢慢踩了点坑，才发现这玩意儿其实没那么神秘，反而有点像生活里找东西的逻辑。今天就拿个小例子，带你们看看这东西到底怎么回事，顺便分享下我的理解和心得。先搭个简单场景假设我们有个用户信息表，叫user_info
FastSAM：高效图像分割算法详解与实战阿qi 爱喝拿铁
本文还有配套的精品资源，点击获取简介：图像分割在图像处理领域中起着至关重要的作用，而FastSAM作为一种高效的图像分割算法，结合了像素的局部特征与全局信息，以自适应聚类方式实现了快速且精确的像素级别分割。其采用基于密度的空间聚类方法处理噪声和不规则形状，自适应策略调整聚类参数以增强泛化能力，并优化计算流程实现并行化处理以提升运行速度。FastSAM算法在医疗、自动驾驶等多个领域具有广泛应用前景。
本地Oracle数据库复制数据到Apache Hive的Linux服务器集群的分步流程 weixin_30777913 数据库大数据 hive
我们已经有安装ApacheHive的Linux服务器集群，它可以连接到一个OracleRDS数据库，需要在该Linux服务器上安装配置sqoop，然后将OracleRDS数据库中所有的表数据复制到Hive。为了将本地Oracle数据库中的所有表数据复制到ApacheHiveLinux服务器集群中，您可以遵循以下详细步骤：第一步：安装和配置Sqoop1.下载并安装Sqoop您可以从ApacheSqo
前端解决跨域问题的三种方法 web13638179351 前端 html 面试前端 nginx 服务器
一、cors后端程序员提供的解决跨域访问的方法，和前端程序员没有关系，定义后端程序代码让所有的前端程序都可以访问后端的数据，后端程序告诉服务器这个后端程序的数据任何前端请求都可以访问，服务器就不再执行跨域访问拦截数据的操作。因为博主目前主攻前端对后端并不熟悉，因此这种方法暂不详细解答。二、服务器代理proxy2.1步骤（1）修改Nginx或者Apache服务器文件，目前博主使用的是Nginx代理（
设计模式-建造者模式老菜鸟的每一天设计模式设计模式建造者模式
解释生活中有着很多的Builder的例子，个人觉得大学生活就是一个Builder模式的最好体验：要完成大学教育，一般将大学教育过程分成4个学期进行，因此没有学习可以看作是构建完整大学教育的一个部分构建过程，每个人经过这4年的（4个阶段）构建过程得到的最后的结果不一样，因为可能在四个阶段的构建中引入了很多的参数（每个人的机会和际遇不完全相同）。Builder模式要解决的也正是这样的问题：当我们要创建
Hologres 介绍黄毛火烧雪下数据分析
Hologres是阿里云提供的一款实时数据分析平台，它结合了数据仓库（DataWarehouse）和流式计算（StreamProcessing）的优势，专为大规模数据分析和实时数据处理而设计。Hologres基于PostgreSQL构建，提供了高性能的查询处理、强大的数据分析能力，并能够支持海量数据的实时分析。一、Hologres的核心特点和功能：1、基于PostgreSQL构建：Hologres
Metabase 介绍黄毛火烧雪下 React 数据分析
Metabase是一款开源的商业智能（BI）工具，用于数据可视化和分析，帮助用户从数据库中提取数据，并以易于理解和分享的方式展示分析结果。它特别适用于数据分析师、开发人员、产品经理等角色，可以通过其直观的界面进行数据探索、创建图表和报表，并提供团队协作和共享功能。一、主要功能和特点：1、数据连接和查询：Metabase支持连接多种数据源，包括常见的关系型数据库（如MySQL、PostgreSQL、
JMeter 集成到 Jenkins 实现 CI CD过程小赖同学啊 jmeter专栏 jmeter jenkins ci/cd
将JMeter集成到Jenkins实现CI/CD可以实现自动化的性能测试，以下是详细的实现方式和配置参数说明：1.环境准备JMeter安装：确保JMeter已经安装在Jenkins服务器或者可被Jenkins访问的节点上。记录JMeter的安装路径，例如/opt/apache-jmeter-5.4.1。Jenkins安装与配置：安装Jenkins并确保其正常运行。可以通过浏览器访问Jenkins的
ai大模型自动化测试-TensorFlow Testing 测试模型实例小赖同学啊人工智能自动化测试(app pc API)python 人工智能 tensorflow python
AI大模型自动化测试是确保模型质量、可靠性和性能的关键环节，以下将从测试流程、测试内容、测试工具及测试挑战与应对几个方面进行详细介绍：测试流程测试计划制定确定测试目标：明确要测试的AI大模型的具体功能、性能、安全性等方面的目标，例如评估模型在特定任务上的准确率、召回率等。定义测试范围：界定测试所涵盖的模型功能模块、数据类型、应用场景等，比如是否包括图像识别、自然语言处理等不同功能。规划测试资源：确
Kafka 基础教程 — 可靠的数据传递码炫课堂-码哥 kafka专题 kafka 消息队列
作者简介：大家好，我是码炫码哥，前中兴通讯、美团架构师，现任某互联网公司CTO，兼职码炫课堂主讲源码系列专题代表作：《jdk源码&多线程&高并发》，《深入tomcat源码解析》，《深入netty源码解析》，《深入dubbo源码解析》，《深入springboot源码解析》，《深入spring源码解析》，《深入redis源码解析》等联系qq：184480602，加我进群，大家一起学习，一起进步，一起对
2025年电力新政对储能行业的影响能源革命能源电力交易
对储能行业的影响政策导向：从“强制配储”转向市场化驱动市场机遇：需求场景多样化与全球扩张行业格局：技术竞争与产业链优化配套政策与协同效应储能行业商业模式创新独立储能市场化交易模式用户侧储能与能源服务创新技术驱动的服务升级产业链协同与跨界融合政策配套与金融工具创新未来关注重点对储能行业的影响2025年电力新政对储能行业的影响主要体现在政策导向转变、市场化机制深化和行业格局重构三个方面。政策导向：从“
数据库的 DDL、DML、DQL、DCL 分别是什么？下面谈谈这四者的概念。雪碧聊技术 MySQL 数据库四种操作语句 MySQL SQL
欢迎来到“雪碧聊技术”CSDN博客！在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与
nodejs 的 npm install ， npm run 问题 dev webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序倾旎 nodejs vue
nodejs的npminstall，npmrun问题devwebpack-dev-server’不是内部或外部命令，也不是可运行的程序1.安装脚手架安装脚手架命令：npminstall-globalvue-cli2.升级脚手架有时候需要把整个脚手架升级一下，这个用到命令npminstall--globalvue-cli，这个命令会把整个脚手架升级一下，但是我发现使用上面npm-check命令可以把
DeepSeek：大模型时代的“破局者” qq_44233281 ai 深度学习人工智能
DeepSeek，是谁？DeepSeek，中文名深度求索，是一家成立于2023年7月17日的创新型科技公司，由知名量化资管巨头幻方量化创立，法定代表人系裴湉。公司专注于开发先进的大语言模型（LLM）和相关技术，致力于在人工智能领域实现技术突破和创新应用。在成立后的短时间内，DeepSeek取得了令人瞩目的成绩。2024年1月5日，发布首个包含670亿参数的大模型DeepSeekLLM，该模型从零开
【python随手记】——读取文本文件内容转换为json格式番茄番茄君 python json windows
文章目录前言一、TXT文件转换为JSON数组1.txt文件内容2.python代码3.输出结果二、TXT文件转换为JSON对象1.txt文件2.python代码3.输出结果前言场景：用于读取包含空格分隔数据的TXT文件，并将其转换为结构化JSON文件一、TXT文件转换为JSON数组1.txt文件内容地点A116.40528539.90498943.5地标B121.47370131.2304164.
Docker 的安全配置与优化（一）计算机毕设定制辅导-无忧学长 #Docker docker 安全 php
引言在当今快速发展的云计算和DevOps时代，Docker作为容器化技术的佼佼者，已经成为现代开发和运维的基石。它以其独特的优势，如环境隔离、快速部署、资源高效利用等，极大地改变了软件交付和运行的方式。在微服务架构中，每个微服务都可以被封装成一个独立的Docker容器，实现了服务的隔离和独立部署，使得系统的扩展性和维护性得到了极大的提升。同时，在持续集成和持续交付（CI/CD）流程中，Docker
vLLM专题（十四）-自动前缀缓存 AI专题精讲大模型专题系列人工智能
一、介绍自动前缀缓存（AutomaticPrefixCaching，简称APC）缓存现有查询的KV缓存，以便新查询如果与现有查询共享相同的前缀，可以直接重用KV缓存，从而跳过共享部分的计算。注意有关vLLM如何实现APC的技术细节，请参阅此处。二、在vLLM中启用APC在vLLM引擎中设置enable_prefix_caching=True以启用APC。以下是一个示例：importtimefrom
MySQL知识点思维导图 Java小白白又白各种技术思维导图合集 mysql
MySQL知识点思维导图，文章里是PNG格式，可能不是很清晰，文末附上PDF和xmind工程文件链接，需要的小伙伴自取，都只需要1个币（设置成0个币还需要啥下载码）。如有错误的地方欢迎大家批评指正。MySQL知识点思维导图PDFMySQL知识点思维导图PDF-MySQL文档类资源-CSDN下载MySQL知识点思维导图PDF更多下载资源、学习资料请访问CSDN下载频道.https://downloa
原生支付sdk到unity引擎项目(一) 你一身傲骨怎能输商业化游戏开发技术专栏 unity 游戏引擎
封装一个Unity引擎使用的SDK功能插件涉及多个步骤，从设计和开发到打包和发布。以下是一个详细的步骤指南：1.需求分析和设计确定功能需求：明确SDK需要实现的功能和目标。设计API：设计易于使用的API接口，确保开发者能够方便地集成和使用你的SDK。2.项目设置创建Unity项目：在Unity中创建一个新的项目，用于开发和测试SDK。设置命名空间：为你的SDK选择一个独特的命名空间，避免与其他库
Spring Cloud — Hystrix 服务隔离、请求缓存及合并黄名富微服务 spring cloud hystrix 分布式微服务 spring java
Hystrix的核心是提供服务容错保护，防止任何单一依赖耗尽整个容器的全部用户线程。使用舱壁隔离模式，对资源或失败单元进行隔离，避免一个服务的失效导致整个系统垮掉（雪崩效应）。1Hystrix监控Hystrix提供了对服务请求的仪表盘监控。在客户端加入以下依赖： org.springframework.cloud spring-cloud-starter-hystrix-dashboa
深度学习-133-LangGraph之应用实例(二)使用面向过程和面向对象的两种编程方式构建带记忆的聊天机器人皮皮冰燃深度学习深度学习人工智能 LangGraph
文章目录1通用配置1.1大语言模型ChatOllama1.2函数trim_messages1.2.1函数概述1.2.2函数参数1.2.3测试应用2面向过程编程2.1不裁剪历史信息2.1.1创建图2.1.2调用图2.2裁剪历史信息2.2.1创建图2.2.2调用图3面向对象编程3.1定义类MyState3.2定义类AIChat3.3应用4附录4.1问题及解决tokenizer4.2参考附录1通用配置L
40年之后送走了父母，世上再无至亲之人，你会做些什么呢？山海守门人人生感悟人生思考世间难题痛彻心扉
有这样一个让人痛彻心扉的问题：假如40年之后，你送走了父母的最后一程，而自己又未婚，那时的你会做些什么呢？众多网友的回答，仿若一把把利刃，直直地刺入人心，让人瞬间破防。这是一种刻入骨髓的痛楚，几乎没有人能够读到此处还保持着无动于衷。若是真到了那般田地，或许我们应当在活着的时候，拼尽全力去好好生活。可以想象，在离开这个世界的时候，父母会像小时候接我们放学一样，来迎接我们。余华曾说：“生的终止不过是一
java解析APK 3213213333332132 java apk linux 解析APK
解析apk有两种方法 1、结合安卓提供apktool工具，用java执行cmd解析命令获取apk信息 2、利用相关jar包里的集成方法解析apk 这里只给出第二种方法，因为第一种方法在linux服务器下会出现不在控制范围之内的结果。 public class ApkUtil { /** * 日志对象 */ private static Logger
nginx自定义ip访问N种方法 ronin47 nginx 禁止ip访问
　　　因业务需要，禁止一部分内网访问接口，　由于前端架了F5，直接用deny或allow是不行的，这是因为直接获取的前端Ｆ５的地址。　　　所以开始思考有哪些主案可以实现这样的需求，目前可实施的是三种：　　　一：把ip段放在redis里，写一段lua 二：利用geo传递变量，写一段
mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性 dcj3sjt126com mysql
timestamp有两个属性，分别是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP两种，使用情况分别如下： 1. CURRENT_TIMESTAMP 当要向数据库执行insert操作时，如果有个timestamp字段属性设为 CURRENT_TIMESTAMP，则无论这
struts2+spring+hibernate分页显示 171815164 Hibernate
分页显示一直是web开发中一大烦琐的难题，传统的网页设计只在一个JSP或者ASP页面中书写所有关于数据库操作的代码，那样做分页可能简单一点，但当把网站分层开发后，分页就比较困难了，下面是我做Spring+Hibernate+Struts2项目时设计的分页代码，与大家分享交流。　　1、DAO层接口的设计，在MemberDao接口中定义了如下两个方法： public in
构建自己的Wrapper应用 g21121 rap
我们已经了解Wrapper的目录结构，下面可是正式利用Wrapper来包装我们自己的应用，这里假设Wrapper的安装目录为:/usr/local/wrapper。首先，创建项目应用 &nb
[简单]工作记录_多线程相关 53873039oycg 多线程
最近遇到多线程的问题,原来使用异步请求多个接口(n*3次请求) 方案一使用多线程一次返回数据,最开始是使用5个线程,一个线程顺序请求3个接口,超时终止返回缺点测试发现必须3个接
调试jdk中的源码，查看jdk局部变量程序员是怎么炼成的 jdk 源码
转自：http://www.douban.com/note/211369821/ 学习jdk源码时使用-- 学习java最好的办法就是看jdk源代码，面对浩瀚的jdk（光源码就有40M多，比一个大型网站的源码都多）从何入手呢，要是能单步调试跟进到jdk源码里并且能查看其中的局部变量最好了。可惜的是sun提供的jdk并不能查看运行中的局部变量
Oracle RAC Failover 详解 aijuans oracle
Oracle RAC 同时具备HA(High Availiablity) 和LB(LoadBalance). 而其高可用性的基础就是Failover(故障转移). 它指集群中任何一个节点的故障都不会影响用户的使用，连接到故障节点的用户会被自动转移到健康节点，从用户感受而言，是感觉不到这种切换。 Oracle 10g RAC 的Failover 可以分为3种： 1. Client-Si
form表单提交数据编码方式及tomcat的接受编码方式 antonyup_2006 JavaScript tomcat 浏览器互联网 servlet
原帖地址：http://www.iteye.com/topic/266705 form有2中方法把数据提交给服务器，get和post,分别说下吧。（一）get提交 1.首先说下客户端（浏览器）的form表单用get方法是如何将数据编码后提交给服务器端的吧。对于get方法来说，都是把数据串联在请求的url后面作为参数，如：http://localhost:
JS初学者必知的基础百合不是茶 js函数 js入门基础
JavaScript是网页的交互语言,实现网页的各种效果, JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的
iBatis的分页分析与详解 bijian1013 java ibatis
分页是操作数据库型系统常遇到的问题。分页实现方法很多，但效率的差异就很大了。iBatis是通过什么方式来实现这个分页的了。查看它的实现部分，发现返回的PaginatedList实际上是个接口，实现这个接口的是PaginatedDataList类的对象，查看PaginatedDataList类发现，每次翻页的时候最
精通Oracle10编程SQL(15)使用对象类型 bijian1013 oracle 数据库 plsql
/* *使用对象类型 */ --建立和使用简单对象类型 --对象类型包括对象类型规范和对象类型体两部分。 --建立和使用不包含任何方法的对象类型 CREATE OR REPLACE TYPE person_typ1 as OBJECT( name varchar2(10),gender varchar2(4),birthdate date ); drop type p
【Linux命令二】文本处理命令awk bit1129 linux命令
awk是Linux用来进行文本处理的命令，在日常工作中，广泛应用于日志分析。awk是一门解释型编程语言，包含变量，数组，循环控制结构，条件控制结构等。它的语法采用类C语言的语法。 awk命令用来做什么？ 1.awk适用于具有一定结构的文本行，对其中的列进行提取信息 2.awk可以把当前正在处理的文本行提交给Linux的其它命令处理，然后把直接结构返回给awk 3.awk实际工
JAVA(ssh2框架)+Flex实现权限控制方案分析白糖_ java
目前项目使用的是Struts2+Hibernate+Spring的架构模式，目前已经有一套针对SSH2的权限系统，运行良好。但是项目有了新需求：在目前系统的基础上使用Flex逐步取代JSP，在取代JSP过程中可能存在Flex与JSP并存的情况，所以权限系统需要进行修改。【SSH2权限系统的实现机制】权限控制分为页面和后台两块：不同类型用户的帐号分配的访问权限是不同的，用户使
angular.forEach boyitech AngularJS AngularJS API angular.forEach
angular.forEach 描述: 循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key, obj), 其中obj是被迭代对象，key是obj的property key或者是数组的index，value就是相应的值啦. (此函数不能够迭代继承的属性.)
java-谷歌面试题-给定一个排序数组，如何构造一个二叉排序树 bylijinnan 二叉排序树
import java.util.LinkedList; public class CreateBSTfromSortedArray { /** * 题目:给定一个排序数组，如何构造一个二叉排序树 * 递归 */ public static void main(String[] args) { int[] data = { 1, 2, 3, 4,
action执行2次 Chen.H JavaScript jsp XHTML css Webwork
xwork 写道 <action name="userTypeAction" class="com.ekangcount.website.system.view.action.UserTypeAction"> <result name="ssss" type="dispatcher">
[时空与能量]逆转时空需要消耗大量能源 comsci 能源
无论如何,人类始终都想摆脱时间和空间的限制....但是受到质量与能量关系的限制,我们人类在目前和今后很长一段时间内,都无法获得大量廉价的能源来进行时空跨越..... 在进行时空穿梭的实验中,消耗超大规模的能源是必然
oracle的正则表达式(regular expression)详细介绍 daizj oracle 正则表达式
正则表达式是很多编程语言中都有的。可惜oracle8i、oracle9i中一直迟迟不肯加入，好在oracle10g中终于增加了期盼已久的正则表达式功能。你可以在oracle10g中使用正则表达式肆意地匹配你想匹配的任何字符串了。正则表达式中常用到的元数据(metacharacter)如下： ^ 匹配字符串的开头位置。 $ 匹配支付传的结尾位置。 *
报表工具与报表性能的关系 datamachine 报表工具 birt 报表性能润乾报表
在选择报表工具时，性能一直是用户关心的指标，但是，报表工具的性能和整个报表系统的性能有多大关系呢？要回答这个问题，首先要分析一下报表的处理过程包含哪些环节，哪些环节容易出现性能瓶颈，如何优化这些环节。一、报表处理的一般过程分析 1、用户选择报表输入参数后，报表引擎会根据报表模板和输入参数来解析报表，并将数据计算和读取请求以SQL的方式发送给数据库。 2、
初一上学期难记忆单词背诵第一课 dcj3sjt126com word english
what 什么 your 你 name 名字 my 我的 am 是 one 一 two 二 three 三 four 四 five 五 class 班级，课 six 六 seven 七 eight 八 nince 九 ten 十 zero 零 how 怎样 old 老的 eleven 十一 twelve 十二 thirteen
我学过和准备学的各种技术 dcj3sjt126com 技术
语言VB https://msdn.microsoft.com/zh-cn/library/2x7h1hfk.aspxJava http://docs.oracle.com/javase/8/C# https://msdn.microsoft.com/library/vstudioPHP http://php.net/manual/en/Html
struts2中token防止重复提交表单蕃薯耀重复提交表单 struts2中token
struts2中token防止重复提交表单 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月12日 11:52:32 星期日 ht
线性查找二维数组 hao3100590 二维数组
1.算法描述有序（行有序，列有序，且每行从左至右递增，列从上至下递增）二维数组查找，要求复杂度O(n) 2.使用到的相关知识：结构体定义和使用，二维数组传递（http://blog.csdn.net/yzhhmhm/article/details/2045816） 3.使用数组名传递这个的不便之处很明显，一旦确定就是不能设置列值 //使
spring security 3中推荐使用BCrypt算法加密密码 jackyrong Spring Security
spring security 3中推荐使用BCrypt算法加密密码了，以前使用的是md5， Md5PasswordEncoder 和 ShaPasswordEncoder，现在不推荐了，推荐用bcrpt Bcrpt中的salt可以是随机的，比如： int i = 0; while (i < 10) { String password = "1234
学习编程并不难,做到以下几点即可! lampcy java html 编程语言
不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发各种神奇的软件啦。 1、确定目标学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到
架构师之mysql----------------用group+inner join,left join ,right join 查重复数据（替代in) nannan408 right join
1.前言。如题。 2.代码 (1)单表查重复数据,根据a分组 SELECT m.a,m.b, INNER JOIN （select a,b,COUNT(*) AS rank FROM test.`A` A GROUP BY a HAVING rank>1 )k ON m.a=k.a （2）多表查询，使用改为le
jQuery选择器小结 VS 节点查找（附css的一些东西） Everyday都不同 jquery css name选择器追加元素查找节点
最近做前端页面，频繁用到一些jQuery的选择器，所以特意来总结一下：测试页面： <html> <head> <script src="jquery-1.7.2.min.js"></script> <script> /*$(function() { $(documen
关于EXT tntxia ext
ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用 javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 ExtJs最开始基于YUI技术，由开发人员Jack
一个MIT计算机博士对数学的思考 xjnine Math
在过去的一年中，我一直在数学的海洋中游荡，research进展不多，对于数学世界的阅历算是有了一些长进。为什么要深入数学的世界？作为计算机的学生，我没有任何企图要成为一个数学家。我学习数学的目的，是要想爬上巨人的肩膀，希望站在更高的高度，能把我自己研究的东西看得更深广一些。说起来，我在刚来这个学校的时候，并没有预料到我将会有一个深入数学的旅程。我的导师最初希望我去做的题目，是对appe

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

Bootstrap网页布局网格的实现

目录

1、Bootstrap网格系统的工作原理

1.1 十二栅格系统

1.2 Bootstrap 网格系统标签

1.3 Bootstrap 网格系统规则

2、Bootstrap 网格系统中单元格宽度设置

2.1 默认等宽布局

Bootstrap是什么？

Bootstrap是什么？

Bootstrap是什么？

Bootstrap是什么？

2.2 设置每个列宽

2.3 可变宽度的列

2.4 自动换行的列

3、Bootstrap 网格响应式布局

3.1 什么是响应式布局

3.2 Bootstrap 网格系统屏幕大小划分

3.3 Bootstrap 网格响应式布局实例

3.4 如果你不想响应

你可能感兴趣的:(Bootstrap网页布局网格的实现)