![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
bootstrap分为几大块，今天学习的是类样式。对于这一部分，更多的是一个记忆的过程，因为这些全局样式 对css和html比较精通的情况下手写也是可以的。
一、表格组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 1. 导入bootstrap的css文档--> <link rel="stylesheet" href="static/css/bootstrap.css"> <title>表格</title> </head> <body> <!--创建容器与行与列--> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <!--表格:基类 修饰类1/主题1 修饰类2/主题2 ...--> <table class="table table-bordered table-hover text-center"> <caption class="h3 text-center">我的表格</caption> <!--表头--> <thead> <tr class="info"> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> </thead> <tbody> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr class="danger"> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr class="success"> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td class="warning">X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
二，垂直表单组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 1. 导入bootstrap的css文档--> <link rel="stylesheet" href="static/css/bootstrap.css"> <title>默认垂直表单</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h3 class="text-center">新用户注册</h3> <form> <!--标签+控件: label+input/select/...--> <!--form-group:表单控件组--> <div class="form-group"> <label for="email">邮箱:</label> <input type="email" class="form-control" id="email" name="email" placeholder="Email"> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" class="form-control" id="password" name="password" placeholder="Password"> </div> <div class="form-group"> <label for="file">文件上传:</label> <input type="file" id="file" name="file"> <p class="help-block">文件必须是jpg/png/gif图片格式</p> </div> <div class="form-group"> <label for="level">学历:</label> <select name="level" id="level" class="form-control"> <option value="0">高中</option> <option value="1">本科</option> <option value="2">博士</option> </select> </div> <div class="form-group"> <label for="comment">留言:</label> <textarea name="comment" id="comment" class="form-control" rows="3"></textarea> </div> <!--复选框与按钮组非常特殊,不能使用控件组进行控制--> <label>选择课程:</label> <div class="checkbox"> <label> <input type="checkbox" name="course[]" value="front"> 前端 </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="course[]" value="server" checked> 后端 </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" name="course[]" value="full-stack" disabled> 全栈 </label> </div> <!--将上面的复选框改成水平排列--> <label>选择课程:</label> <div class="checkbox-inline"> <label> <input type="checkbox" name="course[]" value="front"> 前端 </label> </div> <div class="checkbox-inline"> <label> <input type="checkbox" name="course[]" value="server" checked> 后端 </label> </div> <div class="checkbox-inline disabled"> <label> <input type="checkbox" name="course[]" value="full-stack" disabled> 全栈 </label> </div> <label>选择性别:</label> <div class="radio"> <label> <input type="radio" name="gender" checked>男 </label> </div> <div class="radio"> <label> <input type="radio" name="gender">女 </label> </div> <div class="radio"> <label> <input type="radio" name="gender" disabled>待定 </label> </div> <label>选择性别:</label> <div class="radio-inline"> <label> <input type="radio" name="gender" checked>男 </label> </div> <div class="radio-inline"> <label> <input type="radio" name="gender">女 </label> </div> <div class="radio-inline"> <label> <input type="radio" name="gender" disabled>待定 </label> </div> <!--如果想省略掉checkbox和radio中的文本标签内容,怎么办?--> <div class="checkbox"> <label> <input type="checkbox" name="name" aria-label="用户名"> </label> </div> <div class="radio"> <label> <input type="radio" name="name" aria-label="是否同意?"> </label> </div> <br> <button type="button" class="btn btn-primary">提交</button> </form> </div> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
三、内联表单组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 1. 导入bootstrap的css文档--> <link rel="stylesheet" href="static/css/bootstrap.css"> <title>内联表单</title> </head> <body> <!--内联表单: 所有的表单元素全部在同一行显示,通常来说不需要标签说明,必须在sm或以上屏幕才有效(> 768px)--> <form class="form-inline"> <div class="form-group"> <label for="email" class="sr-only">邮箱:</label> <input type="text" class="form-control" id="email" name="email" placeholder="Email"> </div> <div class="form-group"> <label for="password" class="sr-only">密码:</label> <input type="password" class="form-control" id="password" name="password" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> 记住密码 </label> </div> <button class="btn btn-primary">登录</button> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
四、水平表单组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 1. 导入bootstrap的css文档--> <link rel="stylesheet" href="static/css/bootstrap.css"> <title>水平表单</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h3 class="text-center">用户登录</h3> <!--水平表单: --> <form action="" class="form-horizontal"> <div class="form-group"> <label for="email" class="col-sm-2 control-label">邮箱:</label> <div class="col-sm-10"> <input type="email" id="email" class="form-control" placeholder="Email"> </div> </div> <div class="form-group has-error input-lg"> <label for="password" class="col-sm-2 control-label">密码:</label> <div class="col-sm-10"> <input type="password" id="password" class="form-control" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <div class="checkbox"> <label> <input type="checkbox" name="" id="" checked> 记住密码 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <button class="btn btn-primary btn-block">登录</button> </div> </div> </form> </div> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
五、表单状态
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 1. 导入bootstrap的css文档--> <link rel="stylesheet" href="static/css/bootstrap.css"> <title>静态,只读,禁用等</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form class="form-horizontal"> <h3 class="text-center">编辑用户</h3> <div class="form-group"> <label class="col-sm-2 control-label" for="account">用户:</label> <div class="col-sm-8"> <input type="text" class="form-control" placeholder="Account" id="account"> <!--静态控件--> <!-- <p class="form-control-static">admin</p>--> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="role">身份:</label> <div class="col-sm-8"> <!--只读控件--> <input type="text" class="form-control" id="role" placeholder="超级管理员" value="超级管理员" readonly> </div> </div> <div class="form-group"> <div class="checkbox col-sm-8 col-sm-offset-2"> <input type="checkbox" id="change" disabled> <label for="change">更改</label> </div> </div> <div class="col-sm-8 col-sm-offset-2"> <button class="btn btn-primary btn-lg btn-block">保存</button> </div> </form> </div> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
六、按钮组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 1. 导入bootstrap的css文档--> <link rel="stylesheet" href="static/css/bootstrap.css"> <title>按钮预定义样式</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-8"> <h3>1.可以用作按钮的元素:button,input:button,a</h3> <button type="button" class="btn btn-info" role="button">button按钮</button> <input type="button" class="btn btn-default" role="button" value="input按钮"> <a href="http://www.php.cn" class="btn btn-primary">a标签按钮</a> <h3>2.按钮的预定义样式</h3> <button type="button" class="btn btn-default" role="button">default默认灰</button> <button type="button" class="btn btn-primary" role="button">primary首选蓝</button> <button type="button" class="btn btn-success" role="button">success成功绿</button> <button type="button" class="btn btn-info" role="button">info提示浅蓝</button> <button type="button" class="btn btn-warning" role="button">waring警告橙黄色</button> <button type="button" class="btn btn-danger" role="button">danger危险红</button> <button type="button" class="btn btn-link" role="link">Link链接</button> <h3>3.预定义的按钮大小</h3> <button type="button" class="btn btn-default btn-lg" role="button">大按钮</button> <button type="button" class="btn btn-primary" role="button">默认大小按钮</button> <button type="button" class="btn btn-success btn-sm" role="button">小按钮</button> <button type="button" class="btn btn-success btn-xs" role="button">极小按钮</button> <h3>4.按钮状态: 激活</h3> <button type="button" class="btn btn-info">未激活</button> <button type="button" class="btn btn-info active">激活</button> <h3>5.按钮状态:禁用</h3> <button type="button" class="btn btn-primary btn-lg">启用</button> <button type="button" class="btn btn-primary btn-lg disabled">禁用</button> <a href="http://www.php.cn" class="btn btn-warning disabled">php中文网</a> </div> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
七、图片组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 1. 导入bootstrap的css文档--> <link rel="stylesheet" href="static/css/bootstrap.css"> <title>图片</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h3>1.响应式图片: 随屏幕大小可以自动缩放</h3> <!--center-block: 块居中--> <img src="static/images/girl.jpg" alt="氧气美女" class="img-responsive center-block" width="500"> <h3>2.图片的基本类样式</h3> <img src="static/images/girl.jpg" alt="氧气美女" class="img-rounded" width="400"> <img src="static/images/girl.jpg" alt="氧气美女" class="img-circle" width="400"> <img src="static/images/girl.jpg" alt="氧气美女" class="img-thumbnail" width="400"> </div> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
八、前景与背景
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 1. 导入bootstrap的css文档--> <link rel="stylesheet" href="static/css/bootstrap.css"> <title>前景色与背景色</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h3>1.前景色: 文本</h3> <!--正常状态 --> <p class="text-muted">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="text-primary">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="text-info">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="text-success">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="text-warning">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="text-danger">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <h3>2.背景色</h3> <p class="bg-primary">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="bg-info">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="bg-success">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="bg-warning">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <p class="bg-danger">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p> <button type="button" class="close" aria-label="close">X</button> <hr> <span class="caret"></span> <hr> <div class="pull-right" style="float:left">我是左边的内容</div> <div class="pull-left" style="float:right">我是右边的内容</div> <!--清除浮动--> <!--<div style="clear:both"></div>--> <div class="clearfix"></div> </div> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
九、字体图标
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 1. 导入bootstrap的css文档--> <link rel="stylesheet" href="static/css/bootstrap.css"> <title>字体图标</title> </head> <body> <!-- 如果要使用字体图标就必须引入源码中的dist/fonts目录 且该目录必须与bootstrap所在目录同级, 即与css目录同级才有效 --> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <h2 class="text-center">用户登录</h2> <form action="" class="form-horizontal"> <div class="form-group"> <!-- label不用文字,用一个字全图标来表示, 更直观吸引人--> <label for="email" class="control-label col-sm-2 col-sm-offset-2"> <!-- 可以自定义字体图标大小, 因图标非图片,所以会自动无损放大--> <span class="glyphicon glyphicon-envelope text-success" style="font-size: 2rem"></span> </label> <div class="col-sm-4"> <input type="text" class="form-control" id="email"> </div> </div> </form> </div> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
十、下拉菜单组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="static/css/bootstrap.css"> <title>下拉菜单</title> </head> <body> <!-- 下拉菜单需要用到Bootstrap中的js脚本,所以要引入bootstrap.js --> <!--先创建一个下拉菜单的容器--> <div class="dropdown" style="margin-top: 200px;"> <!--按钮--> <button type="button" class="btn btn-default" data-toggle="dropdown"> 前端开发 <span class="caret"></span> </button> <ul class="dropdown-menu"> <!-- 可选:下拉菜单的标题/辅助性说明文字--> <li class="dropdown-header">必备基础</li> <li><a href="">HTML5</a></li> <li><a href="">CSS3</a></li> <li><a href="">JavaScript</a></li> <!--可选的分隔条,当下拉项过多时,可以进行分组管理--> <li class="divider"></li> <li class="dropdown-header">常用框架</li> <li><a href="">jQuery</a></li> <li><a href="">Bootstrap</a></li> </ul> </div> <script src="static/js/jquery-3.4.1.js"></script> <script src="static/js/bootstrap.js"></script> </body> </html>
点击 "运行实例" 按钮查看在线实例
十一、按钮工具条与按钮组
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="static/css/bootstrap.css"> <title>按钮工具条和按钮组</title> </head> <body> <!--创建一个按钮工具条--> <div class="btn-toolbar"> <!--按钮组--> <div class="btn-group btn-group-vertical btn-group-sm"> <button type="button" class="btn btn-default">编辑</button> <button type="button" class="btn btn-default">删除</button> <button type="button" class="btn btn-default">撤消</button> </div> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-info">复制</button> <button type="button" class="btn btn-success">粘贴</button> <button type="button" class="btn btn-warning">剪切</button> </div> <div class="btn-group"> <button type="button" class="btn btn-info">前端技术</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <!-- 可选:下拉菜单的标题/辅助性说明文字--> <li class="dropdown-header">必备基础</li> <li><a href="">HTML5</a></li> <li><a href="">CSS3</a></li> <li><a href="">JavaScript</a></li> <!--可选的分隔条,当下拉项过多时,可以进行分组管理--> <li class="divider"></li> <li class="dropdown-header">常用框架</li> <li><a href="">jQuery</a></li> <li><a href="">Bootstrap</a></li> </ul> </div> </div> <script src="static/js/jquery-3.4.1.js"></script> <script src="static/js/bootstrap.js"></script> </body> </html>
点击 "运行实例" 按钮查看在线实例