文章目录
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>
中即可表现为引用样式。对于直接引用,我们建议用<p>
标签。
- 多种引用样式
对于标准样式的
<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">«</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">«</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">«</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">«</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">«</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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</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© 2015~2020 黑马商城 版权所有</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";
导致:
注意!