Bootstrap笔记

最新推荐文章于 2024-05-08 10:24:25 发布

普通还不自信的程序员

最新推荐文章于 2024-05-08 10:24:25 发布

阅读量643

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_41841482/article/details/107771798

版权

笔记专栏收录该内容

68 篇文章 0 订阅

订阅专栏

文章目录

一、Validate插件

1.1 概述

jQuery的一个插件，依赖jquery使用
标准的验证方法库

1.2 作用

内置验证规则

拥有必填、数字、Email、URL和信用卡号等19类内置验证规则

自定义验证规则
验证信息提示
实时验证

通过keyup或blur事件触发验证

1.3 使用步骤

导入jQuery文件
导入validate.js
页面加载成功后，对表单进行验证，$(“选择器”).validate();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="validate.min.js"></script>
    <script src="messages_zh.js"></script>
</head>
<body>
<form id="registerForm">
    用户名：<input type="text" name="username"><br/>
    密码：<input type="password" name="password" id="pwd"><br/>
    确认密码：<input type="password" name="repwd"><br/>
    邮箱：<input type="text" name="email"><br/>
    年龄：<input type="text" name="age"><br/>
    <input type="submit" value="注册"><br/>
</form>
<script>
    $(function () {
        $("#registerForm").validate({
            rules:{
                username:{required:true,rangelength:[6,12]},
                password:{required:true,rangelength:[6,12]},
                repwd:{required:true,rangelength:[6,12],equalTo:"#pwd"},
                email:{required:true,email:true},
                age:{required:true,digits:true,min:18}
            },
            // 有了上面的message.js文件，可以不写下面
            messages:{
                username:{required:"必填",rangelength:"长度应该在{0}-{1}之间"},
                password:{required:"必填",rangelength:"长度应该在{0}-{1}之间"},
                repwd:{required:"必填",rangelength:"长度应该在{0}-{1}之间",equalTo:"两次输入不相同"},
                email:{required:"必填",email:"格式错误"},
                age:{required:"必填",digits:"输入整数",min:"未成年禁止注册"}
            }
        })
    })
</script>
</body>
</html>

1.4 校验规则

属性	描述
required:true	必输字段
email:true	必须输入正确格式的电子邮件
number:true	必须是合法数字（负数、小数）
digits:true	必须整数
equalTo:"#field"	输入值必须和#field相同
maxlength:5	输入长度最多是5的字符串（汉字算一个字符）
minlength:10	输入长度最小是10的字符串（汉字算一个字符）
rangelength:[5,10]	长度介于5和10之间的字符串（汉字算一个字符）
range[5,10]	输入值介于5和10之间
max:5	输入值不能大于5
min:10	输入值不能小于10

二、Bootstrap

2.1 概述

用于快速开发web应用程序和网站的前端框架
基于HTML、CSS、JavaScript

2.2 使用步骤

下载：http://www.bootcss.com/
导入bootstrap.css文件
导入jQuery.js文件
导入bootstrap.js文件
将所有内容放到布局容器中

Bootstrap中文文档

2.3 栅格系统

2.3.1 概念

一套响应式、移动设备有限的流式网格系统
随着屏幕或视口尺寸增加，系统会自动分为最多12列
通过一系列的行(row)和列(column)的组合创建页面布局

2.3.2 栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container	最大宽度	None （自动）	750px	970px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px	（每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

2.3.3 实例：从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
在这里插入图片描述

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

2.4 排版

2.4.1 标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

在这里插入图片描述

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

2.4.2 对齐

通过文本对齐类，可以简单方便的将文字重新对齐。
在这里插入图片描述

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

2.5 表格

2.5.1 基本实例

为任意、

标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

class类名	描述
table-striped	条纹状表格
table-bordered	带边框表格
table-hover	鼠标悬停变色
table-condensed	紧缩表格

2.5.2 行状态

通过这些状态类可以为行或单元格设置颜色

class类名	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

在这里插入图片描述

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

2.6 表单

2.6.1 基本实例

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

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </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">Submit</button>
</form>

2.6.2 内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。
只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

在这里插入图片描述

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

在这里插入图片描述

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

2.6.3 水平表单

通过为表单添加 .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">
    </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.6.4 静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可
在这里插入图片描述

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
    <!--图中框中部分-->
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

2.6.5 校验状态

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

<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.7 按钮

2.7.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.7.2 尺寸

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

在这里插入图片描述

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

2.8 图片

2.8.1 响应式图片

随着窗体大小改变大小
通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

<img src="..." class="img-responsive" alt="Responsive image">

2.8.2 图片形状

通过为元素添加以下相应的类，可以让图片呈现不同的形状

在这里插入图片描述

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

2.9 导航栏

使用data-toggle="tab"属性

<div class="container">
    <li role="presentation" class="active"><a href="#" data-toggle="tab">首页</a></li>
    <li role="presentation" class="active"><a href="#" data-toggle="tab">分类</a></li>
    <li role="presentation" class="active"><a href="#" data-toggle="tab">排行</a></li>
</div>

2.9.1 标签导航

注意 .nav-tabs 类依赖 .nav 基类。
在这里插入图片描述

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

2.9.2 胶囊式标签页

HTML 标记相同，但使用 .nav-pills 类
在这里插入图片描述

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

<!--胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类-->
<ul class="nav nav-pills nav-stacked">
  ...
</ul>

2.9.3 路径导航

在一个带有层次的导航结构中标明当前页面的位置
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

2.10 分页

2.10.1 默认

组件中的每个部分都很大，优点是容易点击、易缩放、点击区域大
在这里插入图片描述

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

2.10.2 禁用和激活状态

将 active 或 disabled 状态的链接（即标签）替换为标签，或者在向前/向后的箭头处省略标签，这样就可以让其保持需要的样式而不能被点击

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

2.11 缩略图

在这里插入图片描述

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

2.12 轮播图

在这里插入图片描述

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

普通还不自信的程序员

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap笔记

一、Validate插件1.1 概述jQuery的一个插件，依赖jquery使用标准的验证方法库1.2 作用内置验证规则拥有必填、数字、Email、URL和信用卡号等19类内置验证规则自定义验证规则验证信息提示实时验证通过keyup或blur事件触发验证1.3 使用步骤导入jQuery文件导入validate.js页面加载成功后，对表单进行验证，$(“选择器”).validate();<!DOCTYPE html><html lang="
复制链接

扫一扫