小白学Java36:Bootstrap

validate插件使用validate插件 bootstrapbootstrap的组成栅格系统使用栅格系统 排版表格表单按钮导航栏分页缩略图模态框轮播图

validate插件

使用validate插件

导入jar包 <script src="jquery-3.4.1.min.js"></script> <script src="messages_zh.js"></script> <script src="validate.min.js" ></script> 使用validate $(元素).validate({ 规则:{项:{细则}}, 提示信息:{项:信息}}; $("#fomr").validate({ rules: {name: {required: true,maxlength: 10}}, messages: {name: "必填"} })

bootstrap

bootstrap的组成

全局CSS样式组件js插件

栅格系统

栅格系统通过一系列的行和列的组合来创建页面布局,

行必须包含在.cintainer(固定宽度)或者.container0fiuid(100%宽度)中以便为其赋予合适的排列 通过行在水平方向创建一组列 栅格系统将每一行分为12份,然后用col-XX-num的方式控制每一个元素占多少份

使用栅格系统

//导入CSS样式 <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css" /> //导入jquery和bootstrap的js <script type="text/javascript" src="jquery-3.4.1.min.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-1 d">1</div> <div class="col-md-2 d">2</div> <!--<div class="col-md-3 d">3</div>--> <div class="col-md-3 d col-md-offset-3">4</div> </div> </div>

排版

标题: <h1>我是h1</h1>我是跟随者 //标题独占一行 <!--要写成行内块--> <span class="h1">我是h1</span>我是跟随者 //行内块 对齐 <p class="text-left">左对齐</p> <p class="text-center">居中对齐</p> <p class="text-right">右对齐</p> 改变大小写 <p class="text-uppercase">全部大写:AbCdefg</p> <p class="text-lowercase">全部小写:ABCdef</p> <p class="text-capitalize">首字母大写:aBcdsFG</p>

表格

表格样式类 table 表格table-striped 表格隔行变色table-hover 悬浮变色 <div class="table-responsive"> <table class="table table-striped table-hover"> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr> <td>1</td> <td>张三</td> <td>14</td> <td>男</td> </tr> <tr> <td>2</td> <td>李四</td> <td>16</td> <td>女</td> </tr> </table> </div>

行状态样式

active:鼠标悬停在行,或单元格上时的颜色success:成功或积极的动作info: 普通的提示信息或动作warning:警告或提醒注意danger 危险或负面影响的动作 <tr> <td class="success">成功</td> <td class="info">普通</td> <td class="warning">警告</td> <td class="danger">危险</td> </tr>

表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<div class="container"> <form> <div class="form-group"> <label for="exampleInputEmail1">电子邮箱</label> <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">选择文件</label> <input type="file" id="exampleInputFile"> <p class="help-block">提示信息</p> </div> <div class="checkbox"> <label> <input type="checkbox"> 多选框 <br /> <input type="checkbox"> 多选框 <br /> <input type="checkbox"> 多选框<br /> </label> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div>

按钮

为 、 或 元素添加按钮类（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">

导航栏

https://v3.bootcss.com/components/#nav

分页

https://v3.bootcss.com/components/#pagination

缩略图

https://v3.bootcss.com/components/#thumbnails

模态框

https://v3.bootcss.com/javascript/#modals

轮播图

https://v3.bootcss.com/javascript/#carousel