Bootstrap 栅格系统简单整理
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。
总结一下我近期的学习Bootstrap的一些理解:
一、.col-xs-1, .col-sm-1, .col-md-1 这些都是什么意思?
.col-xs-超小屏幕 手机 (<768px)。
.col-sm-小屏幕 平板 (≥768px)。
.col-md-中等屏幕 桌面显示器 (≥992px)。
不管在哪种屏幕上,栅格系统都会自动的分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 div占的宽度。
二、一行显示多个标签,form-group 标示一行,如果需要一行显示多个标签,可以在form-group 里面分隔。
效果如图
基本代码
<form role="form">
<div class="panel panel-info">
<div class="form-group">
<label class="col-sm-1 control-label text-right" for="ds_host">
单位名称:</label>
<div class="col-sm-3">
<input class="form-control" id="dwmc" type="text" placeholder="单位名称" />
</div>
<label class="col-sm-1 control-label text-right" for="ds_name">
专业类别:</label>
<div class="col-sm-3">
<select id="sl_zylb" class="selectpicker">
<option value="">全部</option>
</select>
</div>
<label class="col-sm-1 control-label text-right" for="ds_host">
科室:</label>
<div class="col-sm-3">
<select id="sl_ks" class="selectpicker" data-live-search="false" multiple="multiple">
<option value="" selected="selected">全部</option>
</select>
</div>
</div>
</div>
</form>
Bootstrap 栅格系统简单整理的更多相关文章
- 入门——Bootstrap栅格系统
作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...
- Bootstrap栅格系统(布局)
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- Bootstrap栅格系统基本使用
1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...
- Bootstrap 栅格系统 理解与总结
Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- Bootstrap 栅格系统(转载)
源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...
- 初学bootstrap ---栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap 栅格系统初识
以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...
随机推荐
- Spring之<context:property-placeholder location="classpath:... "/>标签路径问题
<context:property-placeholder location="classpath:... "/>中classpath:是src目录下的意思:所以加载 ...
- linq使用字符串参数排序
今天找了半天资料,有两种种方法: 1.把字符串参数变为lambda表达式 2.使用System.Linq.dynamic引用 这里我讲第二种方法 第一步:nuget搜索关键字"dynamic ...
- Java设计模式(六)Adapter适配器模式
一.场景描述 “仪器数据采集器”包含采集数据以及发送数据给服务器两行为,则可定义“仪器数据采集器”接口,定义两方法“采集数据capture”和“发送数据sendData”. “PDF文件数据采集器”实 ...
- Django之ORM基础
ORM简介 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用描述 ...
- Nginx 开启gzip 压缩,实现基于域名的虚拟主机。
一:gzip(GNU-ZIP)是一种压缩技术. 经过gzip压缩后页面大小可以变为原来的30%甚至更小,这样,用户浏览页面的时候速度会块得多. gzip 的压缩页面需要浏览器和服务器双方都支持,实际上 ...
- .net core2.0下Ioc容器Autofac使用
.net core发布有一段时间了,最近两个月开始使用.net core2.0开发项目,大大小小遇到了一些问题.准备写个系列介绍一下是如何解决这些问题以及对应技术.先从IOC容器Autofac开始该系 ...
- Spring Framework 简介
Spring Framework 依赖注入.事务管理.Web应用程序.数据访问.消息传递.测试和更多的核心支持. Tips: Spring 官网:https://spring.io/ spring f ...
- oracle 11g数据库 DMP还原数据库
-------------------------- jd :表空间 -------------------------- --本地登陆 cmd下直接执行 sqlplus/as sysdba; --修 ...
- Java 小记 — RabbitMQ 的实践与思考
前言 本篇随笔将汇总一些我对消息队列 RabbitMQ 的认识,顺便谈谈其在高并发和秒杀系统中的具体应用. 1. 预备示例 想了下,还是先抛出一个简单示例,随后再根据其具体应用场景进行扩展,我觉得这样 ...
- java基础之类与对象
[类 & 对象] 1.类:具有一系列相同属性(特征)和方法(行为)的个体的集合,称为类. 类是一个抽象的概念,只能说类具有哪些属性,而不能直接对属性进行赋值. 例如:人类有身高的属性,但是不能 ...