Bootstrap内栅格布局,表格,按钮,图片的个人总结
栅格布局:
container,固定宽度的容器。
container-fluid,百分百宽度的容器。
使用行(row)在水平方向上创建一组列(colmun)。
每一行中最多能够包含12列,超出的列则另起一行排列
你的内容应该放置到列(colmun)中,只有列(colmun)可以作为行(row)的直接子元素。
列偏移:
使用col-*-offset-*类可以将列向右偏移。
例如,col-xs-offset-4表示在超小屏幕上时,将元素向右偏移4列。
div class="container">
<div class="row">
<div class="col-xs-4"><div class="box"></div></div>
<div class="col-xs-4 col-xs-offset-4"><div class="box"></div></div>
</div>
<div class="row">
<div class="col-xs-3 col-xs-offset-3"><div class="box"></div></div>
<div class="col-xs-3 col-xs-offset-3"><div class="box"></div></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4"><div class="box"></div></div>
<div class="col-xs-6 col-sm-4"><div class="box"></div></div>
<div class="col-xs-6 col-sm-4 col-xs-offset-3 col-sm-offset-0"><div class="box"></div></div>
</div>
</div>
嵌套列:
通过在列中嵌套行(row),可以将原有的列再分成12列,如此就实现了列的嵌套。
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4">
<div class="box"></div>
</div>
<div class="col-xs-4">
<div class="box"></div>
</div>
<div class="col-xs-4">
<div class="box"></div>
</div>
</div>
</div>
</div>
</div>
列排序:
使用col-*-push-* 将列向右推,col-*-pull-*将列向左拉。例如下面的代码将box1向右推了6列,将box3向左拉了6列,结果是它们调换了位置。
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-push-6"><div class="box">box1</div></div>
<div class="col-xs-3"><div class="box">box2</div></div>
<div class="col-xs-3 col-xs-pull-6"><div class="box">box3</div></div>
<div class="col-xs-3"><div class="box">box4</div></div>
</div>
</div>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
表格:
.table 必须的基类
.table-bordered 带边框的表格
.table-striped 带条纹的表格(隔行变色)
.table-hover 鼠标悬浮时为整行添加背景色
.table-condensted 紧凑的表格(减少了单元格padding)
响应式的表格:
当屏幕宽度不足以显示所有的表格内容时,表格内容会出现折叠甚至溢出的现象。为了解决这个问题,我们可以将.table元素放到一个具有.table-responsive类的元素内容。
-------------------------------------------------------------------------------------------------------------------
按钮:
我们可以使用以下几种标签表示按钮:
<a href="" class="btn btn-default">Link</a>
<button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-success" value="登录">
<input type="submit" class="btn btn-danger" value="删除">
预定义样式:
<a href="" class="btn btn-default">default</a>
<a href="" class="btn btn-primary">primary</a>
<a href="" class="btn btn-success">success</a>
<a href="" class="btn btn-danger">danger</a>
<a href="" class="btn btn-warning">warning</a>
<a href="" class="btn btn-info">info</a>
<a href="" class="btn btn-link">link</a>
按钮的尺寸:
按钮的尺寸被分成,.btn-lg、.btn-sm、默认尺寸、.btn-xs
<a href="" class="btn btn-default btn-lg">btn-lg</a>
<a href="" class="btn btn-primary">默认尺寸</a>
<a href="" class="btn btn-success btn-sm">btn-sm</a>
<a href="" class="btn btn-danger btn-xs">btn-xs</a>
块级按钮:
块级按钮在移动设备上比较常见,它的宽度会充满整个父元素。
<a href="" class="btn btn-success btn-sm btn-block">提交</a>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
图片:
响应式图片:
通过为img标签添加 .img-responsive 类名,就可以让图片自动根据父元素的宽度进行缩放。
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="./images/banner-1.jpg" alt="" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="./images/banner-2.jpg" alt="" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="./images/banner-3.jpg" alt="" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="./images/banner-4.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
图片形状:
.img-rounded 圆角的图片
.img-circle 圆形图片
.img-thumbnail 缩略图
<div class="row">
<div class="col-xs-12 col-sm-4">
<img src="./images/banner-1.jpg" alt="" class="img-responsive img-rounded">
</div>
<div class="col-xs-12 col-sm-4">
<img src="./images/banner-2.jpg" alt="" class="img-responsive img-circle">
</div>
<div class="col-xs-12 col-sm-4 ">
<img src="./images/banner-3.jpg" alt="" class="img-responsive img-thumbnail">
</div>
</div>
Bootstrap内栅格布局,表格,按钮,图片的个人总结的更多相关文章
- bootstrap的栅格布局不支持IE8该如何解决
用bootstrap的栅格布局在IE8上出现失效的情况,通常有两种解决方式 方法/步骤 方法一:引用第三方js,一个叫respond.js的东西,github上可以搜到 方法二:由于IE8不支 ...
- bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
- bootstrap笔记-栅格布局
1. .clearfix 这个类可以在栅格布局中起到一个不占空间的clear的作用,如下:可以尝试带.clearfix和不带它的区别 <div class="container-f ...
- Bootstrap 框架 栅格布局系统设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...
- 【转及总结】Bootstrap 框架 栅格布局系统底层设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...
- 使用bootstrap的栅格布局,用row后出现横向滚动条
原因: **row默认有:margin-left:-15px; margin-right:-15px: 解决办法: **row外层需要包裹container或者container-fluid,一句话就 ...
- css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
- bootstrap栅格布局-v客学院知识分享
今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...
- BootStrap的栅格式布局
1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...
随机推荐
- 2019 C语言测试
求一元二次方程ax² + bx + c = 0的解 a,b,c为任意整数.(10分) 编写一个口令输入程序,让用户不停输入口令,直到输对为止,假设口令为456.(8分) 输出1000-9999之间能 ...
- mysql5.7新增加用户和授权
迁移mysql数据库,运行项目的时候发现nginx和uWSGI都配置正确,可就是网站打不开,看了log文件,发现错误: django.db.utils.OperationalError: (1044, ...
- tkinter基础-输入框、文本框
本节内容 了解输入框.文本框的使用方法 利用1制作简易界面 首先明确上面由几个元素组成:该界面由界面标题,输入框.两个按钮.文本框组成. 该界面我们需要实现的功能: 在输入框中输入文字,点击inser ...
- [开发ing] Unity项目 - Hero英雄
目录 游戏原型 项目演示 绘图资源 代码实现 技术探讨 参考来源 游戏原型 游戏介绍:这是一款横版类魂游戏,玩家将操控Hero,在诸神黄昏的墓地中,挑战源源不断的敌人,以及近乎无敌的强大boss 灵感 ...
- hystrix,request collapser,请求合并
多个商品,需要发送多次网络请求,调用多次接口,才能拿到结果 可以使用HystrixCollapser将多个HystrixCommand合并到一起,多个command放在一个command里面去执行,发 ...
- WPF 很少人知道的科技
原文:WPF 很少人知道的科技 本文介绍不那么常见的 WPF 相关的知识. 本文内容 在 C# 代码中创建 DataTemplate 多个数据源合并为一个列表显示 使用附加属性做缓存,避免内存泄漏 使 ...
- 关于使用jquery form submit出现多次提交的问题
错误的写法: $(this).submit(function () { $(this).ajaxSubmit({ url: opts.url, type: 'post', dataType: 'jso ...
- MVC中常用的返回值方法
我们上边所看到的Action都是return View();我们可以看作这个返回值用于解析一个aspx文件.而它的返回类型是ActionResult如 public ActionResult Inde ...
- igel udc2 config
igel udc2 config 系统安装盘下载地址 http://www.myigel.biz/?forcedownload /config/bin/igelone_config #!/bin/sh ...
- 小知识:讲述Linux命令别名与资源文件的区别
别名 别名是命令的快捷方式.为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用.语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令.重要的 ...