笔记《深入理解bootstrap》第3章(下) —— CSS布局

上一篇太长了,接下来,继续扯:

3.5.3横向表单,

横向表单不能在form元素上简单应用一个.form-horizontal样式,这是因为其本身没有做什么特殊的设置,只简单设置了一下相关的padding和margin值,源码:

运行效果:

所以,要实现横向表单,不仅要应用上述样式,还要使用bootstrap预设的栅格类,以便将label和控件水平布局,由于.form-horizontal样式改变了.form-group的行为,将其表现的像栅格系统中的行(row)一样,因此就无需再使用.row样式了,示例:

3.5.4、表单控件

1、input

在使用input元素的时候,必须声明type类型,否则可能会引起其他问题,因为bootstrap在定义这些样式的时候,都指定了type类型,比如input[type="text"],

<input type="text" placeholder="请输入文本" />

2、select

下拉列表select的使用方式和原始的一致,多行选择设置multiple为multiple即可,bootstrap会为这些默认的元素提供统一风格的显示,示例:

<select multiple="multiple">
  <option>1</option>
  <option>2</option>
</select>

3、textarea元素

同样,在textarea元素里,定义了rows数字即可定义大文本框的高度,定义了cols可以大文本框的宽度,但是如果在该框架上应用了.form-control样式,则cols属性不起作用,因为.form-control样式的表单控件都设置了100%的宽度(或auto),所以大家在使用时,一旦设置了该样式,就不需要再设置cols属性了,

<textarea name="haha" rows="10" class="form-control" placeholder="请输入文本"></textarea>

4、checkbox和radio

通常在使用时配合label元素使用,但通常会出现左右边距对不起的问题,为此,bootstrap进行了标准设置:

即使用的时候,每个input外部都要用label包住,并且在最外层用容器元素包住,并应用相应的.checkbox和.radio样式,源码:

有些checkbox或者label元素中,文本很少,可能需要横向显示,为此,bootstrap也提供了,相应的内联样式,.checkbox-inline和.radio-inline,效果:

使用方式:

时间: 2024-11-06 02:49:20

笔记《深入理解bootstrap》第3章(下) —— CSS布局的相关文章

HTML 第5章 Div+CSS布局技术

《深入理解bootstrap》读书笔记:第二章 整体架构

一.  整体架构 1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)——这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3.jQuery bootstrap插件的基础 4.响应式设计 兼容多个终端.这是bootstrap的终极理念. 5.css插件 提供丰富的样式. 6.js插件 二. 栅格系统 1.基本实现过程 定义容器的大小——跳转边距——媒询 有以下要求: (1)一行(row)数据必须包含在.container中. .con

bootstrap学习笔记一: bootstrap初认识,hello bootstrap(下)

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

深入理解BootStrap Item8 -- 下拉菜单

1.下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ? LESS版本:对应的源码文件为 dropdowns.less ? Sass版本:对应的源码文件为 _dropdowns.sass ? 编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本

深入理解bootstrap笔记:第一天

书中page1中提及:bootstrap在github上已经有5142个watch.64207个star.23019个fork,ok~what is the watch.star and fork? 经过小编一翻搜索:watch-关注,star-加星,fork-a copy of the code(复制一份),TMD 这英文真无语! 书中page3中提及:经常使用IDE的源码搜索功能,ok! what is IDE? 度娘如是说:IDE(Integrated Development Enviro

全球第一本基于Bootstrap V3.x的图书《深入理解Bootstrap》终于上市了,再次免费送书15本

先说活动规则,再说书的事 经过将近1年的努力,终于有了第一本自己独立编写的书:<深入理解Bootstrap>,基于最新版V 3.1 ,侧重于源码详解.架构分析.插件扩展(全新开发)实战.为了感谢大家以往依赖的支持,所以再次来个大放送,15个名额,具体活动内容和规则如下: 活动1:博客园回帖送书 规则: 5月23.26.27.28.29总计5天,在本帖,每天10.14点的第一个回帖评论者,分别赠送本书1本. 同一ID不可以重复参与活动,重复的话,取紧接着的下一个人. 明确确认后,请PM你的地址.

Linux 程序设计学习笔记----进程管理与程序开发(下)

转载请注明出处:http://blog.csdn.net/suool/article/details/38419983,谢谢! 进程管理及其控制 创建进程 fork()函数 函数说明具体参见:http://pubs.opengroup.org/onlinepubs/009695399/functions/fork.html 返回值:Upon successful completion, fork() shall return 0 to the child process and shall re

【学习笔记】bootstrap之CSS布局

CSS布局 1)使用Bootstrap的时候,所有的HTML文件都需要在其 顶部引用HTML5的DOCTYPE属性, <!DOCTYPE html> <html lang=“en”> … </html> 2)新版Bootstrap是一个移动先行的框架集,移动先 行的影子在整个框架集都可以发现,在移动设备浏览器上,通过为viewport meta标签添加的 user-scalable=no可以禁用其缩放(zooming)功能.禁用缩放 功能后,用户只能滚动屏幕 . 3)B

学习Logistic Regression的笔记与理解(转)

学习Logistic Regression的笔记与理解 1.首先从结果往前来看下how logistic regression make predictions. 设我们某个测试数据为X(x0,x1,x2···xn),Θ(θ0,θ1,θ2,···θn)为我们的学习算法所学到的参数,那么 写成向量的话就变成 Z就是我们得到的结果,但是logistic regression只能处理二值数据,这个Z是一个连续值,它的范围可以很广.为了把这个Z化为二值变量,引人Sigmoid函数 这个函数的图形如下所示

《python基础教程(第二版)》学习笔记 基础部分(第1章)

<python基础教程(第二版)>学习笔记基础部分(第1章)IDEWindows: IDLE(gui), Eclipse+PyDev; Python(command line);Linux/Unix: python >>> 1/2=0 注意整除得0>>> from __future__ import division 执行普通的除法python -Qnew 执行普通的除法 //整除,  1//2=0:%取余数:**乘幂长整型数: 末尾带L十六进制,以0x开头