BootStrap概述（三）

最新推荐文章于 2022-10-21 15:37:46 发布

雨夜※繁华

最新推荐文章于 2022-10-21 15:37:46 发布

阅读量412

点赞数 1

分类专栏： #BootStrap 文章标签： html css python web bootstrap

本文链接：https://blog.csdn.net/qq_44861675/article/details/108846132

版权

#BootStrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

1、排版
2、表单form
3、分页条
4、综合实例（响应式布局页面）

1、排版

1.1、排列对齐的方式（标签通用）

通过文本对齐类，可以简单方便的将文字重新对齐，只要是元素，就能使用该对齐方式。（无论是图片还是什么。）
代码：

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.
<img src="../image/1.jpg" alt="图片"></p><!--居中对齐-->
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

效果：在这里插入图片描述

1.2、改变大小写

通过这几个类可以改变文本的大小写。

<p class="text-lowercase">Lowercased text.</p><!--字母小写-->
<p class="text-uppercase">Uppercased text.</p><!--字母大写-->
<p class="text-capitalize">Capitalized text.</p><!--大写文本-->

效果：
在这里插入图片描述

1.3、基本缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr>元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。
代码：

<abbr title="attribute">attr</abbr>

<!--为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
HTML is the best thing since sliced bread.-->
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

效果：
在这里插入图片描述

1.4、引用

默认样式的引用

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用  标签。

多种引用样式

对于标准样式的 <blockquote>，可以通过几个简单的变体就能改变风格和内容。

命名来源

添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。

另一种展示风格

通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

测试代码：

<blockquote class="blockquote-footer blockquote-reverse">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

效果：
在这里插入图片描述

2、表单form

2.1、表单

表单就是我们之前的form，但是bootstrap添加了一些样式上去。当其获取焦点的时候，会将边框变为蓝色。
测试代码：

<form><!--表单根标签-->
    <div class="form-group">
        <label for="exampleInputEmail1">邮箱</label><!--说明性文字-->
        <!--placeholder是输入框里面的默认文本内容-->
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="邮箱">
    </div>

    <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
    </div>

    <!--文件输入框-->
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <!--复选框，-->
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <!--提交按钮-->
    <button type="submit" class="btn btn-default">提交</button>


    <!--注意事项：
        不要将表单组和输入框组混合使用
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
    -->
</form>

效果图：
在这里插入图片描述
文件选择框样式：

2.2、水平排列的表单

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

<form class="form-horizontal"><!--垂直对齐，水平方向上排列。-->
    <div class="form-group">
        <!--这里联合使用栅格类的样式，class=col-sm-2-->
        <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">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10"><!--设置列偏移和栅格的占据屏幕尺寸-->
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>

效果图：
在这里插入图片描述

2.3、内联表单

通过设置form的类样式为form-inline则可以设置内联表单，使其内容左对齐并且表现为 inline-block 级别的控件。但是只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

你可以手动设置宽度并且可能需要手动设置宽度
在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%;
宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。
如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。

测试代码：

<form class="form-inline"><!--内联表单-->
        <div class="form-group"><!--使用相关的表单组样式。-->
            <label for="exampleInputName2">用户名</label>
            <!--placeholder代表的是输入框的提示信息，-->
            <input type="text" class="form-control" id="exampleInputName2" placeholder="用户名">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">邮箱</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="邮箱">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>

效果图:
在这里插入图片描述

2.4、焦点状态+禁用状态+只读状态

焦点状态
我们将某些表单控件的默认 outline样式移除，然后对 :focus 状态赋予 box-shadow 属性。如我们选择该文本框，则获取焦点其边框颜色变为蓝色。
禁用状态
为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。

 <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled >

当设置了文本的域标题的时候，即fieldset，如果给它添加了禁用状态，则其里面的所有组件禁用，但a 标签的链接功能不受影响

只读状态
为输入框设置readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

 <input class="form-control" type="text" placeholder="Readonly input here…" readonly >

测试代码：

<ul>
    <li>焦点
        <label>文本输入：</label>
        <input class="form-control">
    </li>
    <li>
        <label>禁用状态disabled</label>
        <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
    </li>
    <li><label>只读状态readonly（无法执行输入）</label>
        <input class="form-control" type="text" placeholder="Readonly input here…" readonly>

    </li>

</ul>

效果：
在这里插入图片描述

2.5、检验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

注意事项

将验证状态传达给辅助设备和盲人用户
使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，但是并不能将这种提示信息传达给使用辅助设备的用户 - 例如屏幕阅读器 - 或者色盲用户。
为了确保所有用户都能获取正确信息，Bootstrap 还提供了另一种提示方式。例如，你可以在表单控件的 <label> 标签上以文本的形式显示提示信息（就像下面代码中所展示的）；包含一个 Glyphicon 字体图标（还有赋予.sr-only 类的文本信息 - 参考Glyphicon 字体图标实例）；或者提供一个额外的辅助信息块。另外，对于使用辅助设备的用户，无效的表单控件还可以赋予一个 aria-invalid="true" 属性。

测试代码：

<div class="form-group has-success"><!--校验成功-->
    <label class="control-label" for="inputSuccess1">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
    <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>


<div class="form-group has-warning"><!--警告-->
    <label class="control-label" for="inputWarning1">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning1">
</div>

<div class="form-group has-error"><!--校验错误-->
    <label class="control-label" for="inputError1">Input with error</label>
    <input type="text" class="form-control" id="inputError1">
</div>

<div class="has-success">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxSuccess" value="option1">
            Checkbox with success
        </label>
    </div>
</div>
<div class="has-warning">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxWarning" value="option1">
            Checkbox with warning
        </label>
    </div>
</div>
<div class="has-error">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxError" value="option1">
            Checkbox with error
        </label>
    </div>
</div>

效果图：
在这里插入图片描述

2.6、控制表单元素尺寸

控件尺寸
通过.input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。(栅格系统控制尺寸)

高度
创建大一些或小一些的表单控件以匹配按钮尺寸。

 <input class="form-control input-lg" type="text" placeholder=".input-lg">
  <input class="form-control" type="text" placeholder="Default input">
   <input class="form-control input-sm" type="text" placeholder=".input-sm">
    <select class="form-control input-lg">... </select>
     <select class="form-control">... </select> 
     <select class="form-control input-sm">... </select>

水平排列的表单组的尺寸
在div里面：通过添加 .form-group-lg 或 .form-group-sm 类，为.form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
调整列（column）尺寸
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

测试代码：

ul>
    <li><p>调节高度,设置input的尺寸</p>
        <label>
            <input class="form-control input-lg" type="text" placeholder=".input-lg">
        </label>
        <label>
            <input class="form-control" type="text" placeholder="Default input">
        </label>
        <label>
            <input class="form-control input-sm" type="text" placeholder=".input-sm">
        </label>

        <label>
            <select class="form-control input-lg">...</select>
        </label>
        <label>
            <select class="form-control">...</select>
        </label>
        <label>
            <select class="form-control input-sm">...</select>
        </label>
    </li>
    <li><P>水平排列的表单组的尺寸</P>
        <form class="form-horizontal">
            <div class="form-group form-group-lg">
                <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
                </div>
            </div>
            <div class="form-group form-group-sm">
                <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
                </div>
            </div>
        </form>
    </li>
    <li><p>调整列（column）尺寸,使用栅格系统</p>
        <div class="row">
            <div class="col-xs-2">
                <label>
                    <input type="text" class="form-control" placeholder=".col-xs-2">
                </label>
            </div>
            <div class="col-xs-3">
                <label>
                    <input type="text" class="form-control" placeholder=".col-xs-3">
                </label>
            </div>
            <div class="col-xs-4">
                <label>
                    <input type="text" class="form-control" placeholder=".col-xs-4">
                </label>
            </div>
        </div>
    </li>
</ul>

测试效果：
在这里插入图片描述

2.7、HTML5中被支持的表单组件

在这里插入图片描述
测试代码：

<!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=4,user-scalable=no">
    <title>HTML5中被支持的输入型控件</title>
    <!-- Bootstrap -->
    <link href="../css/bootstrap3.37.css" rel="stylesheet">
    <script src="../js/jquery-1.12.0.min.js"></script>
    <script src="../js/bootstrap3.37.js"></script>
</head>
<body>
<h2 style="text-align: center">HTML5中被支持的输入型控件</h2>

<ul>
    <li><p><b>输入框</b></p>大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件,<br/>如：<code>text
        、password、datetime、datetime-local、date、month、time、week、number、email、url、search、
        tel 和 color</code><br>必须添加类型声明
        只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
    </li>
    <li><p><b>文本域</b><code>textArea</code></p>
        支持多行文本的表单控件。可根据需要改变 rows 属性。
    </li>
    <li><p><b>多选和单选框</b><code>checkbox、radio</code></p>
        多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
    <br>内联单选和多选框
        <br>通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，
        可以使这些控件排列在一行。
    </li>

    </li>
    <li><p><b>下拉菜单</b><code>select</code></p>
        注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 <code>border-radius</code> 属性来改变的。
        <br>对于标记了 multiple 属性的 <code>select</code> 控件来说，默认显示多选项。
    </li>
</ul>

<hr>
<p>下拉菜单默认显示多项的简单实例：</p>
<select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
</body>
</html>

3、分页条

<!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=4,user-scalable=no">
    <title>分页条的使用和注释</title>
    <!-- Bootstrap -->
    <link href="../css/bootstrap3.37.css" rel="stylesheet">
    <script src="../js/jquery-1.12.0.min.js"></script>
    <script src="../js/bootstrap3.37.js"></script>
</head>
<body>
<h3 style="text-align: center">分页条</h3>
<p>为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。</p>
<ul>
    <li><p>默认分页</p>
        受 Rdio 的启发，我们提供了这个简单的分页组件，用在应用或搜索结果中超级棒。组件中的每个部分都很大，优点是容易点击、易缩放、点击区域大。
        <ul>
            <li>
                <p>禁用和激活状态</p>链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。
                <nav aria-label="...">
                    <ul class="pagination">
                        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                        ...
                    </ul>
                </nav>
                <b>需要在对应的li项里面添加类样式</b><br>我们建议将 active 或 disabled 状态的链接（即a 标签）
                替换为 span 标签，或者在向前/向后的箭头处省略a 标签，这样就可以让其保持需要的样式而不能被点击。

                <nav aria-label="...">
                    <ul class="pagination">
                        <li class="disabled">
                            <span>
                                <span aria-hidden="true">&laquo;</span>
                            </span>
                        </li>
                        <li class="active">
                            <span>1 <span class="sr-only">(current)</span></span>
                        </li>
                        ...
                    </ul>
                </nav>
            </li>
            <li>
            <p>尺寸</p>想要更小或更大的分页？<code>.pagination-lg 或 .pagination-sm</code>
                类提供了额外可供选择的尺寸。 在ul里面添加类样式即可
            <nav aria-label="..."><ul class="pagination pagination-lg">
                    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                <li><a href="#">1</a></li></ul></nav>
            <nav aria-label="..."><ul class="pagination">
                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                <li><a href="#">1</a></li></ul></nav>
            <nav aria-label="..."><ul class="pagination pagination-sm">
                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                <li><a href="#">1</a></li></ul></nav>
            </li>
        </ul>

    </li>
    <li>
        <p>翻页</p>用简单的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。
        <ul>
            <li>默认的翻页使用居中对齐
                <nav aria-label="...">
                    <ul class="pager">
                        <li><a href="#">Previous</a></li>
                        <li><a href="#">Next</a></li>
                    </ul>
                </nav>
            </li>
            <li>如果给li项添加previous或者next的类样式就可以对齐链接
                <nav aria-label="...">
                <ul class="pager">
                    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
                    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
                </ul>
            </nav></li>

            <li>给li项添加disabled类样式可以禁用翻页状态</li>
            <nav aria-label="...">
            <ul class="pager">
                <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
                <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
            </ul>
        </nav>
        </ul>


    </li>
</ul>

</body>
</html>

效果：
在这里插入图片描述

4、综合实例（响应式布局页面）

首先要做到的效果图：
在这里插入图片描述
缩小尺寸：

再缩小尺寸：

完美显示在各个尺寸上面。

注释过的代码：

<!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=4,user-scalable=no">
    <title>综合实例</title>
    <!-- Bootstrap -->
    <link href="../css/bootstrap3.37.css" rel="stylesheet">
    <script src="../js/jquery-1.12.0.min.js"></script>
    <script src="../js/bootstrap3.37.js"></script>
    <script type="text/javascript">

        /*
        检测数据是否为空或者多个空格。
         */
        function isCheckNull(string) {
            let com = document.getElementById(string);
            let div = document.getElementById(string+"Div");/*对应的表单组件*/
            let Msg = document.getElementById(string+"Msg");/*提示信息标签*/
            let rex = /^\s*$/;  //匹配空格多次,必须定义为正则表达式让它识别，才能存在test方法。
            //这样写是错的：let rex = "\s+";
            if(rex.test(com.value)){/*校验成功，即空字符*/
                //不能使用div.className+=..
               div.classList.add("has-error");/*标记红色*//*如果用追加属性会影响的*/
                //div.className+="has-error";/*如果是这个，会导致元素紊乱。*/
                Msg.innerHTML = "不能为空";
                return false;
            }else{
                div.className = "form-group";//覆盖回原来的样式
                Msg.innerText = "";
                return true;
            }
        }
            /*
            检测密码和确认密码两次输入是否相同
             */
            function isSame() {
                let password = document.getElementById("password");
                let rePassword = document.getElementById("rePassword");
                if(password.value===rePassword.value){
                    return true;
                }else{
                    let div = document.getElementById("rePasswordDiv");
                    div.classList.add("has-error");
                    div.focus();//获取焦点
                    document.getElementById("rePasswordMsg").innerText = "密码不一致";
                    return false;
                }
        }
        function checkData() {
            let flag1 = isCheckNull("username");
            let flag2 = isCheckNull("password");
            let flag3 = isCheckNull("rePassword");
            if(flag3&&flag2&&flag1){
                return isSame();
            }
            return false;//否则无法提交
    }
    </script>
</head>
<body>
<div class="container">
    <!--第一行是网站的头部-->
    <div class="row">
        <div class="col-md-4"><img src="../image/logo.png" alt="logo"/></div>
        <div class="col-md-5" style="margin-top: 5px"><img src="../image/header.png" alt="header"/></div>

        <!--发现按钮部分没有居中，添加盒子模型改变上面的边距-->
        <div class="col-md-3" style="margin-top: 10px">
            <!--蓝色按钮-->
            <a  class="btn btn-primary" href="#">登陆</a><!--将a标签变为按钮，添加bootstrap样式-->
            <a class="btn btn-primary" href="#">注册</a>
            <!--红色按钮，警告-->
            <a  class="btn btn-warning" href="#">购物车</a>
        </div>
    </div>
    <!--第二行是导航栏-->
    <div class="row">
        <nav class="navbar  navbar-inverse ">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span><!--阅读器模式，触摸时会朗读出来。-->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">首页</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <!--激活状态的link-->
                        <li class="active"><a href="#">手机数码<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">电脑办公</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                               role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">儿童玩具</a></li>
                                <li><a href="#">母婴用品</a></li>
                                <li><a href="#">汽车配件</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-right">
                        <div class="form-group">
                            <label>
                                <input type="text" class="form-control" placeholder="Search">
                            </label>
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
        </nav>
    </div>
        <!--第三行是注册页面，分为三列，估计比例为2，8，2的栅格系统-->
    <!--设置图片不重复填充，尺寸是覆盖，其余可以选择的：contain，fixed，auto-->
    <div class="row" style="background-image: url('../image/background.jpg');background-repeat: no-repeat;background-size: cover"><!--背景图片不重复填充-->
        <!--注册页面--><!--需要添加一下与上面的边距-->
        <div class=" col-sm-offset-2 col-sm-8" style="border: 2px  solid gainsboro;background-color: white">
                <p style="color: blue;">用户注册</p>
                <!--表单，水平排列的-->
                <form class="form-horizontal" onsubmit="return checkData()"><!--垂直对齐，水平方向上排列。-->
                    <!--用户名-->
                    <div  id="usernameDiv" class="form-group">
                        <!--这里联合使用栅格类的样式，class=col-sm-2-->
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div  class="col-sm-8">
                            <input type="text" class="form-control" id="username" placeholder="用户名"><!--问题，如何获取表单那里面的值，判断它非空-->
                        </div>
                        <label id="usernameMsg" class="col-sm-2 control-label"></label><!--添加control-label-->
                    </div>

                    <!--密码-->
                    <div  id="passwordDiv" class="form-group">
                        <label for="password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-8"><!--设置一下栅格列属性-->
                            <input type="password" class="form-control" id="password" placeholder="密码">
                        </div>
                        <label id="passwordMsg" class="col-sm-2 control-label"></label>
                    </div>

                    <!--确认密码-->
                    <div   id="rePasswordDiv" class="form-group">
                        <label for="rePassword" class="col-sm-2 control-label">确认密码</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" id="rePassword" placeholder="确认密码">
                        </div>
                        <label id="rePasswordMsg" class="col-sm-2 control-label"></label>
                    </div>

                    <!--emil-->
                    <div id="emailDiv" class="form-group">
                        <label for="email" class="col-sm-2 control-label">email</label>
                        <div class="col-sm-8">
                            <input type="email" class="form-control" id="email" placeholder="email">
                        </div>
                       <!-- <label id="emailMsg" class="col-sm-2 control-label"></label>-->
                    </div>
                    <!--姓名：-->
                    <div id="nameDiv" class="form-group">
                        <label for="name" class="col-sm-2 control-label">姓名</label>
                        <div  class="col-sm-8">
                            <input type="text" class="form-control" id="name" placeholder="name">
                        </div>
                      <!--  <label id="nameMsg" class="col-sm-2 control-label"></label>-->
                    </div>
                    <!--单选框radio,一个div使用表单组的样式，然后里面添加一个单选框，由多个label和input构成。
                    每个input使用radio的type。label使用bootstrap的radio-line的样式使得单选的选项内联。
                    -->
                    <div class="form-group">
                        <label href="#sex" class="col-sm-2 control-label">性别</label>
                        <div class="radio">
                            <label class="radio-inline">
                                <input type="radio" value="man" class="sex">男<!--checked="checked"-->
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="woman">女
                            </label>
                        </div>
                    </div>
                    <!--添加提交按钮，同时设置列偏移和按钮的样式为danger-->
                    <div class="form-group">
                        <button type="submit" class="btn btn-danger col-sm-offset-2">注册</button>
                    </div>

                </form>
            </div>
    </div>

    <!--第四行是广告图片。-->
    <div class="row" style="margin-top: 10px">
        <div class="col-md-12 text-center"><!--添加居中-->
            <img src="../image/bottom.png" alt="bottom">
        </div>

    </div>
    <!--第五行是很多超链接,使用内联列表即可。-->
    <div class="row" style="margin-top: 10px">
        <div class="col-md-12">
            <ul class="list-inline text-center" >
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">招贤纳士</a></li>
            <li><a href="#">法律声明</a></li>
            <li><a href="#">友情链接</a></li>
            <li><a href="#">支付方式</a></li>
            <li><a href="#">配送方式</a></li>
            <li><a href="#">服务声明</a></li>
            <li><a href="#">广告声明</a></li>
        </ul>
        </div>
    </div>
    <!--第六行是版权-->
    <div class="row" >
        <!--注意，版权是比较小的，我们可以添加xs。-->
        <div class="col-xs-12 text-center"><!--务必遵循布局容器——行——列——元素的定义方式-->
            <span style="align-content: center">Copyright&copy;&nbsp;2015~2020&nbsp;黑马商城&nbsp;版权所有</span>
        </div>
    </div>

</div>

</body>
</html>

一个小问题，如果js里面检验数据的时候使用:

<script>
 function isCheckNull(string) {
            let com = document.getElementById(string);
            let div = document.getElementById(string+"Div");/*对应的表单组件*/
            let Msg = document.getElementById(string+"Msg");/*提示信息标签*/
            let rex = /^\s*$/;  //匹配空格多次,必须定义为正则表达式让它识别，才能存在test方法。
            //这样写是错的：let rex = "\s+";
            if(rex.test(com.value)){/*校验成功，即空字符*/
                //不能使用div.className+=..
               div.classList.add("has-error");/*标记红色*//*如果用追加属性会影响的*/
                //div.className+="has-error";/*如果是这个，会导致元素紊乱。*/
                Msg.innerHTML = "不能为空";
                return false;
            }else{
                div.className = "form-group";//覆盖回原来的样式
                Msg.innerText = "";
                return true;
            }
        }
        </script>

使用了这个：

div.className+="has-error";

导致：
在这里插入图片描述
注意！

雨夜※繁华

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
BootStrap概述（三）

1、排版1.1、排列对齐的方式（标签通用）通过文本对齐类，可以简单方便的将文字重新对齐，只要是元素，就能使用该对齐方式。（无论是图片还是什么。）代码：Left aligned text.Center aligned text.<img src="../image/1.jpg" alt="图片">&l
复制链接

扫一扫