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

最新推荐文章于 2022-07-11 17:52:14 发布

落花新月

最新推荐文章于 2022-07-11 17:52:14 发布

阅读量7.8k

点赞数 2

分类专栏： Web前端文章标签：栅格系统 bootstrap 列偏移表单水平排列

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/50536126

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

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]-->

上面的代码注释后显示是这样的：

<!--&lt;!&ndash;[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]&ndash;&gt;-->

注意红色部分的内容

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 （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

示例代码：

<!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.列偏移

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>