首页 > 学术百科

Bootstrap复习二——栅格系统（form表单示例）

Bootstrap复习⼆——栅格系统（form表单⽰例）

1.关于低版本的IE浏览器兼容性问题的解决：

<!--[if lt IE 9]> //注意：这部分不是注释

<![endif]-->穆索尔斯基

上⾯的代码注释后显⽰是这样的：

注意红⾊部分的内容

2.栅格系统：

1）Bootstrap 提供了⼀套响应式、移动设备优先的流式栅格系统，随着屏幕或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。2）⾏（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

3）内容必须放在列（column）⾥⾯，⽽列放在⾏（row）⾥⾯。

4）如果⼀“⾏（row）”中包含了的“列（column）”⼤于 12，多余的“列（column）”则会掉下来到下⼀⾏，即作为⼀个整体另起⼀⾏排列。

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上⼯作的。

超⼩屏幕⼿机(<768px)⼩屏幕平板

(≥768px)

中等屏幕桌⾯显⽰器

(≥992px)

⼤屏幕⼤桌⾯显⽰器

(≥1200px)

栅格系统⾏为总是⽔平排列开始是堆叠在⼀起的，当⼤于这些阈值时将变为⽔平排列C

.container 最⼤宽度None （⾃动）750px970px1170px 类前缀.l-lg-

列（column）数12

最⼤列（column）宽⾃动~62px~81px~97px

槽（gutter）宽30px （每列左右均有 15px）

可嵌套是

偏移（Offsets）是

列排序是

⽰例代码：

<!DOCTYPE html>

<head>

</head>

<body>

《飞鸟集[1]》是泰⼽尔的代表作之⼀，具有很⼤的影响，在世界各地被译为多种中⽂字版本，是最早被译为

中⽂版本的泰⼽尔[2]作品之⼀，包括了三百余⾸清丽的⼩诗。这些诗歌描写⼩草，流萤，落叶，飞鸟，⼭⽔，河流。简短的诗句如

同阳光撒落在挂着⽔珠的树叶上，⼜如天边⼏朵⽩云在倘翔，⼀切都是那样地清新，亮丽，可是其中韵味却很厚实，耐⼈寻味。

</div>

《飞鸟集[1]》是泰⼽尔的代表作之⼀，具有很⼤的影响，在世界各地被译为多种中⽂字版本，是最早被译为

中⽂版本的泰⼽尔[2]作品之⼀，包括了三百余⾸清丽的⼩诗。这些诗歌描写⼩草，流萤，落叶，飞鸟，⼭⽔，河流。简短的诗句如

同阳光撒落在挂着⽔珠的树叶上，⼜如天边⼏朵⽩云在倘翔，⼀切都是那样地清新，亮丽，可是其中韵味却很厚实，耐⼈寻味。

</div>

</body>

</html>

运⾏效果：

3.列偏移

使⽤ .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使⽤ * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽

度。

⽰例代码：

<body>

《飞鸟集[1]》是泰⼽尔的代表作之⼀，具有很⼤的影响，在世界各地被译为多种中⽂字版本，是最早被译为

中⽂版本的泰⼽尔[2]作品之⼀，包括了三百余⾸清丽的⼩诗。这些诗歌描写⼩草，流萤，落叶，飞鸟，⼭⽔，河流。简短的诗句如

同阳光撒落在挂着⽔珠的树叶上，⼜如天边⼏朵⽩云在倘翔，⼀切都是那样地清新，亮丽，可是其中韵味却很厚实，耐⼈寻味。

</div>

<div class="col-lg-6 col-md-offset-2" >娜塔丽·波特曼，本名娜塔莉·赫许勒（Natalie Hershlag,1981年6⽉9⽇-），出⽣于以⾊列耶路撒冷，美国⼥演员。13岁时，她

出演《这个杀⼿不太冷》的⼥主⾓，开始了⼀边读书⼀边拍戏的⽣涯。1997年，波特曼以《管到太平洋》⽚中安·奥格斯特⼀⾓获得

⾦球奖最佳⼥配⾓的提名。1999年，成年后的她凭借《星球⼤战》三部曲帕德梅·艾⽶达拉⼥王⼀⾓...

</div>

</body>

kh560运⾏效果：

4.所有设置了.form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。

但是在

中就没有必要添加了，添加之后效果反⽽会不好。因为⽂件按钮没必要添加⼀个100%的外框。

将 label 元素和前⾯提到的控件包裹在 .form-group 中可以获得最好的排列。

5.内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类应⽤到⼀系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在⼀

⾏。

⽰例代码：（来⾃bootstrap官⽹）

<input type="checkbox"id="inlineCheckbox1"value="option1"> 1

</label>

注意：input标记放在label标签⾥⾯，id和value属性可以不写。 type="checkbox"

<input type="checkbox"id="inlineCheckbox2"value="option2"> 2

</label>

<input type="checkbox"id="inlineCheckbox3"value="option3"> 3

</label>

<input type="radio"name="inlineRadioOptions"id="inlineRadio1"value="option1"> 1

</label>

注意：input标记放在label标签⾥⾯,class="radio-inline"放在label标签⾥⾯。在input标签中

id和value属性可以不写，name属性的值保持⼀致，type="radio"。

<label<input type=

6.Button的默认样式以及⼤⼩的设定

1）为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使⽤ Bootstrap 提供的样式。

<button class="btn btn-default" type="submit">Button</button>

张锷

2）Button 的预定义样式：可以通过class="btn btn-default"、class="btn btn-primary"等来设置button的背景⾊

3）使⽤ .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺⼨的按钮。

7.Label标签可以获得光标

8.⽔平排列的表单：

过为表单添加 .form-horizontal 类，并联合使⽤ Bootstrap 预置的栅格类，可以将 label 标签和控件组⽔平并排布局。这样做将改变 .form-group 的⾏为，使其表现为栅格系统中的⾏（row），因此就⽆需再额外添加 .row 了。

如下代码：

<label for="inputEmail3"class="col-sm-2 control-label">Email</label>

//这⾥的input标签要放在div⾥⾯，在div⾥⾯才可以添加类class="col-sm-10"，不能直接在input标签⾥⾯添加

</div>

青龙膏</form>

⽔平式（参考链接：bootstrap.kinghack/base-css.html）

右对齐的标签和左浮动, 使它们在同⼀⾏⼀⼀对照. 需要从默认的表格中改动⼀些的标记:

在表格添加.form-horizontal

把标签和控件包含在.control-group

在标签添加.control-label

为任何关联的控件添加.controls来确保位置正确

效果及代码：

10.列偏移

使⽤ .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使⽤ * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

11.完整表单代码⽰例及运⾏效果：

河南科技学院学报<!DOCTYPE html>

<head>

<title>Form练习</title>

</head>

3g无线视频服务器<body>

本文发布于:2024-09-20 20:28:17，感谢您对本站的认可！

本文链接：https://www.17tex.com/xueshu/262938.html

上一篇：2022年12部超级大片，每一部都劲爆，最期待的是《阿凡达2》！！

下一篇：豆瓣电影排行榜 - 豆瓣高分经典电影排行版

标签：标签栅格添加系统控件

留言与评论（共有 0 条评论）