bootstrap css排版
smart-form
单行元素: 一般用div包含,class="row"
列元素:用section包含,class="col col-x"(section带有margin-bottom,若想去除,可以使用div)
按钮和元素一般用label,class="类型",里面包含元素标签和span,span内为显示内容。
smart-form中用row和col,别的地方不用,row作用只是margin:-14px 0
smart-form中,section的作用仅仅是添加margin-bottom,使自己与下一行隔离。col之后,元素会变为浮动的,所以要使元素的section起作用,必须要用row或者form-group清除浮动,同时form-group还有section的作用。label的作用是变为块级元素,如果不加col的话就是一个块级元素,用于占据整行。
bootstrap form element:
form的class="form-horizontal",垂直排布的表单
表单的每个区域用section分割,不带class
section区域标题用<legend>标签。
一行元素用<div class="form-group">
显示标签用:<label class="control-label col-md-2">Small Input</label>
便签中输入框用
<div class="col-md-10">
<input class="form-control input-xs" placeholder=".input-xs" type="text">
</div>
示例:
<fieldset>
<legend>Input sizes</legend> <div class="form-group">
<label class="control-label col-md-2">Extra Small Input</label>
<div class="col-md-10">
<input class="form-control input-xs" placeholder=".input-xs" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Small Input</label>
<div class="col-md-10">
<input class="form-control input-sm" placeholder=".input-sm" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Default Input</label>
<div class="col-md-10">
<input class="form-control" placeholder="Default input" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Large Input</label>
<div class="col-md-10">
<input class="form-control input-lg" placeholder=".input-lg" type="text">
</div>
</div> </fieldset>
大致结构:
-xs极小,-sm小,normal普通,-lg大
.col-**-offset-设置偏移多少。
这几种col都会令元素变为float,所以前后需要清除float,form-group与row主要作用就是用来清除float的。
form-group与row的区别:一个带margin-bottom一个不带,带的是为了区分两行
bootstrap css排版的更多相关文章
- Bootstrap CSS概览代码文字标注篇
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Bootstrap CSS 描述
<!DOCTYPE html><html lang="zh-CN"><head> <!--定于内容,和内容的编码格式--> < ...
- (二)Bootstrap CSS 概览
在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 H ...
- 3.Bootstrap CSS 概述
1.HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 ...
- 2.Bootstrap CSS
Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动 ...
- Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...
- bootstrap之排版类
bootstrap之排版类
- Bootstrap CSS 栅格、代码和表格
一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...
- Bootflat – 基于 Bootstrap CSS 框架的扁平化界面
Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架.它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途 ...
随机推荐
- 12_java之构造方法|this|super
01构造方法引入 * A:构造方法的引入 在开发中经常需要在创建对象的同时明确对象的属性值,比如员工入职公司就要明确他的姓名.年龄等属性信息. 那么,创建对象就要明确属性值,那怎么解决呢?也就是在创建 ...
- 【读书笔记】 DevOps实践 - 驭DevOps之力强化技术栈并优化IT运行
读书小结 DevOps实践 - 驭DevOps之力强化技术栈并优化IT运行 这本书共200页,读完大概三天:(我指的不是fulltime的一天,而是工作时间以外的一天) 本书是参加16年QConf开发 ...
- Eclipse weblogic 中文乱码问题解决办法
- LUA使用虚函数与使用回调函数
------------------虚函数overload-------------------------- --回调:寻路中格子坐标改变 CHero.OnSearchToCellsChange = ...
- 搭建一个Web API项目(DDD)
传送阵:写在最后 一.创建一个能跑的起来的Web API项目 1.建一个空的 ASP.NET Web应用 (为什么不直接添加一个Web API项目呢,那样会有些多余的内容(如js.css.Areas等 ...
- doStartTag(),doEndTag()方法的执行
1 .TagSupport与BodyTagSupport的区别 TagSupport与BodyTagSupport的区别主要是标签处理类是否需要与标签体交互,如果需要交互的就用TagSupport,否 ...
- MySQL数据库篇之多表查询
主要内容: 一.多表连接查询 二.复合条件连接查询 三.子查询 1️⃣ 多表连接查询 一.准备表 #建表 create table department( id int, name varchar( ...
- spring boot aop打印http请求回复日志包含请求体
一.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- oracel 查询删除重复记录的几种方法
建表语句CREATE TABLE Persons(PersonID int, LastName varchar(255),FirstName varchar(255),Addres ...
- SQL select 执行顺序
一.sql语句的执行步骤:1)语法分析,分析语句的语法是否符合规范,衡量语句中各表达式的意义.2)语义分析,检查语句中涉及的所有数据库对象是否存在,且用户有相应的权限.3)视图转换,将涉及视图的查询语 ...