BootStrap学习02栅格系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习第一天</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="bootstrap-3.3.7-dist/js/holder.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scle=1, maximum-scale=1, user-scalable=no">
<style> .container {
height: 300px;
} .row {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1>BootStrap前端框架</h1>
<div class="row">
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
<!--<img src="holder.js/100px263" alt="">-->
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
<!--<img src="holder.js/100px263" alt="">-->
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div> </div>
<div class="row">
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
<!--<img src="holder.js/100px263" alt="">-->
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div> </div>
<div class="row">
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
<!--<img src="holder.js/100px263" alt="">-->
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div> </div>
<div class="row">
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
<!--<img src="holder.js/100px263" alt="">-->
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div> </div>
<div class="row">
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
<!--<img src="holder.js/100px263" alt="">-->
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div>
<div class="col-md-3">
<img src="img/img_logo01.jpg" width="100%">
</div> </div>
</div> </body>
</html>
图片占位符生成器：holder.js
<img src="holder.js/100px263" alt="">中,生成一个大小是100px263的图片,p表示百分比
BootStrap学习02栅格系统的更多相关文章
- Bootstrap学习笔记-栅格系统
栅格系统的原理就是在这个界面中这个栅格被分成12个格子,你根据自己的想要的布局就把这个界面分割成你想要的部分就行了.一般如果我们用电脑作为显示器的我们用的样式是col-md 如果你用的显示期变小的情况 ...
- Bootstrap响应式栅格系统的设计原理
1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...
- 【5】了解Bootstrap预置的栅格系统
在开篇之前我们来说2个class,因为以后要用到的 <div class="container"> ... </div> 用.container包裹页面上的 ...
- Bootstrap的核心——栅格系统的使用
前 言 絮叨絮叨 Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 而栅格系统是Bootstrap中的核心,正是因为栅格系统的 ...
- BootStrap学习之栅格布局
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的改变,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin用于生成更具语 ...
- Bootstrap学习3--栅格系统
备注:最新Bootstrap手册:http://www.jqhtml.com/bootstraps-syntaxhigh/index.html 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 ...
- Bootstrap 样式设计 栅格系统
.col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- 大屏幕 大桌面显 ...
- html --- bootstrap 框架 （栅格系统布局）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap学习--栅格系统
响应式布局页面:即同一套页面可以兼容不同分辨率的设备. Bootstrap依赖于栅格系统实现响应式布局,将一行均分为12个格子,可以指定元素占几个格子. 实现过程 1.定义容器,相当于之前的table ...
随机推荐
- Hibernate的一级缓存：快照区
参考来源:http://blog.sina.com.cn/s/blog_981ee5d80102w85f.html
- PHP实现XML传输
sendXML.php <!--发送XML的页面--> <?php $xml_data = '<xml>...</xml>';//发送的xml $url ...
- Visual Studio Code配置 HTML 开发环境
Visual Studio Code配置 HTML 开发环境 https://v.qq.com/x/page/l0532svf47c.html?spm=a2h0k.11417342.searchres ...
- apt-get的一些坑
apt-get update:更新安装列表apt-get upgrade:升级软件apt-get install software_name :安装软件apt-get --purge remove ...
- 在windows下编译出linux可执行程序
set GOARCH=amd64 set GOOS=linux go build xx.go 会生成一个没有后缀的xx二进制文件 将该文件放入linux系统某个文件夹下 赋予权限 chmod 777 ...
- 关于 a 标签 jquery的trigger("click"),无法触发问题。
这个问题的原因不是jquery的trigger("click"), 函数的问题, 而是 a标签之间要有其他子标签,要对这个子标签调用trigger("click" ...
- 各 Android 平台版本支持的 API 级别
平台版本 API 级别 VERSION_CODE 备注 Android 7.0 24 N 平台亮点 Android 6.0 23 M 平台亮点 Android 5.1 22 LOLLIPOP_MR1 ...
- 微信小程序 图片加载失败处理方案
小程序端展示网络资源图片可能会失败,下面介绍一种自己的处理方法 1. js文件中判断图片 url 是否存在,存在则正常显示,不存在则替换url为本地默认图片 2. 当图片 url 存在,但是加载失败时 ...
- Javaweb学习笔记5—Cookie&Session
今天来讲javaweb的第五阶段学习. Cookie和Session同样是web开发常用到的地方. 老规矩,首先先用一张思维导图来展现今天的博客内容. ps:我的思维是用的xMind画的,如果你对我的 ...
- 图解GitHub
转自:http://marklodato.github.io/visual-git-guide/index-zh-cn.html 个人觉得这一篇比一些入门教程更值得看,图解很详细到位,很容易理解其工作 ...