Bootstrap复习二——栅格系统（form表单示例）
来源：互联网 发布：听说桐岛要退部 知乎 编辑：程序博客网 时间：2024/06/10 16:37
1.关于低版本的IE浏览器兼容性问题的解决：
<!--[if lt IE 9]> //注意：这部分不是注释<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->上面的代码注释后显示是这样的：
注意红色部分的内容<!--<!–[if lt IE 9]>--><!--<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>--><!--<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>--><!--<![endif]–>-->
2.栅格系统：
1）Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
2）行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
3）内容必须放在列（column）里面，而列放在行（row）里面。
4）如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”则会掉下来到下一行，即作为一个整体另起一行排列。
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
.container 最大宽度.col-xs-.col-sm-.col-md-.col-lg-<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>栅格系统</title> <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.min.js"></script> <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script></head><body> <div class="container"> <div class="row" style="margin:50px auto;"> <div class="col-lg-4" style="height: 500px;border: #97ff9b solid 1px;padding: 10px;"> 《飞鸟集[1]》是泰戈尔的代表作之一，具有很大的影响，在世界各地被译为多种中文字版本，是最早被译为 中文版本的泰戈尔[2]作品之一，包括了三百余首清丽的小诗。这些诗歌描写小草，流萤，落叶，飞鸟，山水，河流。简短的诗句如 同阳光撒落在挂着水珠的树叶上，又如天边几朵白云在倘翔，一切都是那样地清新，亮丽，可是其中韵味却很厚实，耐人寻味。 </div> <div class="col-lg-6" style="height: 500px;border: #97ff9b solid 1px; padding: 10px"> 《飞鸟集[1]》是泰戈尔的代表作之一，具有很大的影响，在世界各地被译为多种中文字版本，是最早被译为 中文版本的泰戈尔[2]作品之一，包括了三百余首清丽的小诗。这些诗歌描写小草，流萤，落叶，飞鸟，山水，河流。简短的诗句如 同阳光撒落在挂着水珠的树叶上，又如天边几朵白云在倘翔，一切都是那样地清新，亮丽，可是其中韵味却很厚实，耐人寻味。 </div> </div> </div></body></html>运行效果：
3.列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
示例代码：
<body> <div class="container"> <div class="row" style="margin:50px auto;"> <div class="col-lg-4" style="height: 500px;border: #97ff9b solid 1px;padding: 10px;"> 《飞鸟集[1]》是泰戈尔的代表作之一，具有很大的影响，在世界各地被译为多种中文字版本，是最早被译为 中文版本的泰戈尔[2]作品之一，包括了三百余首清丽的小诗。这些诗歌描写小草，流萤，落叶，飞鸟，山水，河流。简短的诗句如 同阳光撒落在挂着水珠的树叶上，又如天边几朵白云在倘翔，一切都是那样地清新，亮丽，可是其中韵味却很厚实，耐人寻味。 </div> <div class="col-lg-6 col-md-offset-2" style="height: 500px;border: #97ff9b solid 1px; padding: 10px"> 娜塔丽·波特曼，本名娜塔莉·赫许勒（Natalie Hershlag,1981年6月9日-），出生于 以色列耶路撒冷，美国女演员。13岁时，她 出演 《这个杀手不太冷》的女主角，开始了一边读书一边拍戏的生涯。1997年，波特曼以《管到太平洋》片中安·奥格斯特一角获得 金球奖最佳女配角的提名。1999年，成年后的她凭借 《星球大战》三部曲 帕德梅·艾米达拉女王一角... </div> </div> </div></body>运行效果：
4.所有设置了.form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。
但是在
<input type="file">
中就没有必要添加了，添加之后效果反而会不好。因为文件按钮没必要添加一个100%的外框。
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
5.内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
示例代码：（来自bootstrap官网）
<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1</label>注意：input标记放在label标签里面，id和value属性可以不写。 type="checkbox"<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2</label><label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3</label><label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1</label>注意：input标记放在label标签里面,class="radio-inline"放在label标签里面。在input标签中id和value属性可以不写，name属性的值保持一致，type="radio"。<label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2</label><label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3</label>
6.Button的默认样式以及大小的设定
1）为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
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 了。
如下代码：
<form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> //这里的input标签要放在div里面，在div里面才可以添加类class="col-sm-10"，不能直接在input标签里面添加 </div> </div></form>9..control-label ：默认情况下文字采用右对齐
水平式（参考链接：http://bootstrap.kinghack.com/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><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Form练习</title> <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.min.js"></script> <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script></head><body><div class="container" style="margin-top: 50px"> <form class="form-horizontal"> <!--class="form-horizontal"--> <div class="form-group"> <label for="username" class="col-lg-2 control-label ">用户名：</label> <!--control-label--> <div class="col-lg-10"> <input type="text" id="username" class="form-control" placeholder="请输入用户名"> <!--form-control--> </div> </div> <div class="form-group"> <label for="password" class="col-lg-2 control-label ">密码：</label> <div class="col-lg-10"> <input type="password" class="form-control" id="password" placeholder="请输入密码"> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label">上传图片：</label> <div class="col-lg-10"> <input type="file"> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label">兴趣爱好：</label> <div class="col-lg-10"> <label class="checkbox-inline"><input type="checkbox">唱歌</label><!--<label class="checkbox-inline">--> <label class="checkbox-inline"><input type="checkbox">运动</label> <label class="checkbox-inline"><input type="checkbox">看书</label> <label class="checkbox-inline"><input type="checkbox">下棋</label> <label class="checkbox-inline"><input type="checkbox">购物</label> <label class="checkbox-inline"><input type="checkbox">电影</label> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label">学历：</label> <div class="col-lg-10"> <label class="radio-inline"><input type="radio" name="radio">中学</label> <!--radio-inline、还没解决只能选一个的问题--> <label class="radio-inline"><input type="radio" name="radio">大专</label> <label class="radio-inline"><input type="radio" name="radio">本科</label> <label class="radio-inline"><input type="radio" name="radio">硕士</label> <label class="radio-inline"><input type="radio" name="radio">博士</label> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label">个人简介:</label> <div class="col-lg-10"> <textarea placeholder="请输入个人简介" rows="8" class="form-control"></textarea> <!--<input type="text" placeholder="请输入个人简介">--> </div> </div> <div class="col-lg-10 col-lg-offset-2"> <button class="btn btn-success btn-lg">提交</button> </div> </form></div></body></html>
运行效果：
0 0
- Bootstrap复习二——栅格系统（form表单示例）
- 用Bootstrap栅格系统表单
- 【03】Bootstrap — 栅格系统
- 【07】Bootstrap — Form表单
- 学习——Bootstrap网格（栅格）系统
- bootstrap——css样式（一、栅格系统）
- Bootstrap栅格系统（布局）
- Bootstrap基础4——form表单
- Bootstrap CSS——表单（二）
- Bootstrap中的栅格栅格系统
- bootstrap的栅格系统（网格系统）
- 【BootStrap】栅格系统、表单样式与按钮样式-附有源码
- 【BootStrap】栅格系统、表单样式与按钮样式-附有源码
- 最常用前端框架BootStrap——栅格系统
- 深入理解BootStrap-- 栅格系统（布局）
- Bootstrap栅格系统（屏幕大小）
- Bootstrap栅格系统研究
- CSS Bootstrap 栅格系统
- 快速合并同一个excel表中的多个sheet
- Java 信号量 Semaphore 介绍
- 关于js单线程的问题
- HDU1240 Asteroids!(BFS)
- 10、异常
- Bootstrap复习二——栅格系统（form表单示例）
- angular js过滤器
- ios基本控件之UISlide
- jquery.qrcode生成二维码
- 3196: Tyvj 1730 二逼平衡树
- ios基本控件之UISegmentControl
- BitnamiGitLab升级以及Troubledshooting
- 循环遍历同类控件
- Android SDK Manager更新太慢的解决方法
