记录我的java之路——day26(周更)

最新推荐文章于 2023-07-10 20:28:46 发布
最新推荐文章于 2023-07-10 20:28:46 发布
阅读量405 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34304871/article/details/81865265
版权

玩转bootstrap

Bootstarp介绍

概述

​ Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地 构建基于 PC 及移动端设备的 Web 页面需求。

​ 2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历 各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升 级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端 的开源框架。

​ Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD 以及手机移动端的页面访问。

​ 目前Bootstrap最高版本为BootstrapV4.0.0；本次学习我们以4.0上一个版本-V3.3.7为主要学习版本。

特点

Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：

  1. 跨设备、跨浏览器

    可以兼容所有现代浏览器，包括比较诟病的 IE7、8。当然，本课程不再考虑 IE9 以下 浏览器。

  2. 响应式布局

    不但可以支持 PC 端的各种分辨率的显示，还支持移动端 PAD、手机等屏幕的响应式切 换显示。

  3. 提供的全面的组件

    Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组 件，方便开发者调用。

  4. 内置 jQuery 插件

    Bootstrap 提供了很多实用性的 jquery 插件，这些插件方便开发者实现 Web 中各种 常规特效。

  5. 支持 HTML5、CSS3

    HTML5 语义化标签和 CSS3 属性，都得到很好的支持。

  6. 支持 LESS 动态样式

    LESS（CSS预编译语言） 使用变量、嵌套、操作混合编码，编写更快、更灵活的 CSS。它和 Bootstrap 能 很好的配合开发。

前置知识

学习Boostrap前，建议先掌握以下前置知识:

  1. HTML5

  2. CSS3

  3. JavaScript/JQuery

安装与入门

安装

Bootstrap的使用方式主要包含5种:

  1. 下载独立插件包

  2. 使用在线CDN地址

  3. 基于npm安装到本地

  4. 基于bower安装

  5. 基于Composer安装

在这里我们介绍前两种方案

第一种：下载独立插件包

使用Bootstrap前需要将Boostrap安装包下载到本地，下载地址如下：

https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

解压缩后，目录结构如下:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)

  1. css 目录中有四个 css 后缀的文件，其中包含 min 字样的，是压缩版本，一般使用 这个；不包含的属于没有压缩的，可以学习了解 css 代码的文件；而 map 后缀的文件则是 css 源码映射表，在一些特定的浏览器工具中使用。

  2. js 目录包含两个文件，是未压缩和压缩的 js 文件。

  3. fonts 目录包含了不同后缀的字体文件。

第二种：使用在线CDN地址

Bootstrap 中文网 为 Bootstrap 专门构建了免费的 CDN 加速服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。BootCDN 还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 主页查看更多可用的工具库。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
​
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
​
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Hello-bootstrap

首先，我们创建一个Html5页面，并将Bootstrap核心文件引入：

hello.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>第一个Bootstrap页面</title>
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="jumbotron">
          <div class="container">
              <h1>你好，世界！</h1>
              <p>这是我的第一个bootstrap页面</p>
              <p>
                  <button class="btn btn-primary btn-large">了解更多</button>
              </p>
          </div>
      </di>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

排版与样式

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即 20px)；段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

<!--创建包含段落突出的文本-->
<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>

标题

<!--从 h1 到 h6-->
<h1>Bootstrap 框架</h1> <!--36px-->
<h2>Bootstrap 框架</h2> <!--30px-->
<h3>Bootstrap 框架</h3> <!--24px-->
<h4>Bootstrap 框架</h4> <!--18px-->
<h5>Bootstrap 框架</h5> <!--14px-->
<h6>Bootstrap 框架</h6> <!--12px-->

通过Chrome浏览器开发者工具了解到，Boostrap分别对h1~h6标题标签进行了重构，并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。

<span class="h1">一级标题</span>

注：通过 Chrome浏览器开发者工具查看元素还看到，字体颜色、字体样式、行高均被固定了，从而保 证了统一性，而原生的会根据系统内置的首选字体决定，颜色是最黑色。

在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题

<!--在标题元素内插入 small 元素-->
<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架 <small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架 <small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架 <small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架 <small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架 <small>Bootstrap 小标题</small></h6>

内联文本元素

<!--添加标记，<mark>元素或.mark 类-->
<!--各种加线条的文本-->
<p>Bootstrap<mark>框架</mark></p>
<!--删除的文本-->
<del>Bootstrap 框架</del> 
<!--无用的文本-->
<s>Bootstrap 框架</s> 
<!--插入的文本-->
<ins>Bootstrap 框架</ins> 
<!--效果同上，下划线文本-->
<u>Bootstrap 框架</u> 
​
<!--各种强调的文本-->
<!--标准字号的 85%-->
<small>Bootstrap 框架</small> 
<!--加粗 700-->
<strong>Bootstrap 框架</strong> 
<!--倾斜-->
<em>Bootstrap 框架</em>

文本对齐

<!--居左-->
<p class="text-left">Bootstrap 框架</p> 
<!--居中-->
<p class="text-center">Bootstrap 框架</p>
<!--居右-->
<p class="text-right">Bootstrap 框架</p> 
<!--两端对齐，支持度不佳-->
<p class="text-justify">Bootstrap 框架</p> 
<!--不换行-->
<p class="text-nowrap">Bootstrap 框架</p>

大小写

<!--设置英文文本大小写-->
<!--小写-->
<p class="text-lowercase">Bootstrap 框架</p>
<!--大写-->
<p class="text-uppercase">Bootstrap 框架</p>
<!--首字母大写-->
<p class="text-capitalize">Bootstrap 框架</p>

缩略语

Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

地址文本

<!--设置地址，去掉了倾斜，设置了行高，底部 20px-->
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>

引用文本

<!--默认样式引用，增加了做边线，设定了字体大小和内外边距-->
<blockquote>
    Bootstrap 框架
</blockquote>
​
<!--逆向-->
<blockquote class="blockquote-reverse ">
    Bootstrap 框架
</blockquote>

列表排版

<!--移除默认样式-->
<ul class="list-unstyled">
    <li>Bootstrap 框架</li>
    <li>Bootstrap 框架</li>
    <li>Bootstrap 框架</li>
    <li>Bootstrap 框架</li>
    <li>Bootstrap 框架</li>
</ul>
​
<!--设置成内联-->
<ul class="list-inline">
    <li>Bootstrap 框架</li>
    <li>Bootstrap 框架</li>
    <li>Bootstrap 框架</li>
    <li>Bootstrap 框架</li>
    <li>Bootstrap 框架</li>
</ul>
​
<!--水平排列描述列表-->
<dl class="dl-horizontal">
    <dt>Bootstrap</dt>
    <dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl>

代码

<!--内联代码-->
<code>&lt;section&gt;</code>
<!--用户输入-->
press <kbd>ctrl + ,</kbd>
<!--代码块-->
<pre>&lt;p&gt;Please input...&lt;/p&gt;</pre>

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或可视化窗口（viewport）尺寸的增加，系统会自动分为最多12列 。

移动设备优先

在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏 幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。

<!--分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1,user-scalable=no">

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等 属性的原因，这两种容器类不能相互嵌套。

<!--固定宽度-->
<div class="container">
...
</div>
​
<!--100%宽度-->
<div class="container-fluid">
...
</div>

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

  • 通过“行（row）”在水平方向创建一组“列（column）”。

  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。

创建一个响应式行:

​
<div class="container">
    <div class="row">
    ...
    </div>
</div>

创建最多 12 列的响应式行：

​
<div class="container">
    <div class="row">
        <div class="col-md-1 a">1</div>
        <div class="col-md-1 a">2</div>
        <div class="col-md-1 a">3</div>
        <div class="col-md-1 a">4</div>
        <div class="col-md-1 a">5</div>
        <div class="col-md-1 a">6</div>
        <div class="col-md-1 a">7</div>
        <div class="col-md-1 a">8</div>
        <div class="col-md-1 a">9</div>
        <div class="col-md-1 a">10</div>
        <div class="col-md-1 a">11</div>
        <div class="col-md-1 a">12</div>
    </div>
</div>

注意：以上代码为显示效果明显，添加以下css代码

.a { height: 100px; background-color: #eee; border:1px solid #ccc; }

总列数都是 12，每列分配多列: 

<div class="container">
    <div class="row">
        <div class="col-md-4 a">1-4</div>
        <div class="col-md-4 a">5-8</div>
        <div class="col-md-4 a">9-12</div>
    </div>
    <div class="row">
        <div class="col-md-8 a">1-8</div>
        <div class="col-md-4 a">9-12</div>
    </div>
</div>

 

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

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

​ 如上表格所示，栅格系统最外层区分了四种宽度的浏览器：超小屏(<768px)、小屏 (>=768px)、中屏(>=992px)和大屏(>=1200px)。而内层.container 容器的自适应宽度 为：自动、750px、970px 和 1170px。自动的意思为，如果你是手机屏幕，则全面独占一 行显示。

<!--激活四种屏幕设备-->
<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    </div>
</div>
​
<!--有时我们可以设置列偏移，让中间保持空隙-->
<div class="container">
    <div class="row">
        <div class="col-md-8 a">8</div>
        <div class="col-md-3 col-md-offset-1 a">3</div>
    </div>
</div>
​
<!--也可以嵌套，嵌满也是 12 列-->
<div class="container">
    <div class="row">
        <div class="col-md-9 a">
            <div class="col-md-8 a">1-8</div>
            <div class="col-md-4 a">9-12</div>
        </div>
        <div class="col-md-3 a">
            11-12
        </div>
    </div>
</div>
​
<!--可以把两个列交换位置，push 向左移动，pull 向右移动-->
<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3 a">9</div>
        <div class="col-md-3 col-md-pull-9 a">3</div>
    </div>
</div>

表格与按钮

表格

Bootstrap 提供了一些丰富的表格样式供开发者使用

<!--基本格式-->
<table class="table">
​
<!--条纹状表格-->
<!--让<tbody>里的行产生一行隔一行加单色背景效果 注：表格效果需要基于基本格式.table-->
<table class="table table-striped">
​
<!--带边框的表格-->
<!--给表格增加边框-->
<table class="table table-bordered">
    
<!--悬停鼠标-->
<!--让<tbody>下的表格悬停鼠标实现背景效果-->
<table class="table table-hover">
​
<!--状态类-->
<!--可以单独设置每一行的背景样式-->
<tr class="success">
    
<!--隐藏某一行-->
<tr class="sr-only">
​
<!--响应式表格-->
<!--表格父元素设置响应式，小于 768px 出现边框-->
<body class="table-responsive">

注：一共五种不同的样式可供选择。

样式说明
active鼠标悬停在行或单元格上
success标识成功或积极的动作
info标识普通的提示信息或动作
waring标识警告或需要用户注意
danger标识危险或潜在的带来负面影响的动作

按钮

Bootstrap 提供了很多丰富按钮供开发者使用。Bootstrap为以下html元素提供了按钮支持

  • a元素

  • button元素

  • input元素

<a href="#" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">

有关按钮的注意事项:

  1. 针对组件的注意事项

    虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持<button>元素。

  2. 链接被作为按钮使用时的注意事项

    如果 <a>元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于 链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性

  3. 跨浏览器展现

    1. 我们总结的最佳实践是：强烈建议尽可能使用 元素来获得在各个浏览器上 获得相匹配的绘制效果。

    2. 另外，我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug，其表现是：阻 止我们为基于 元素所创建的按钮设置 line-height 属性，这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。

预定义样式

一般样式:

<button class="btn btn-default">button</button>
样式说明
btn-default默认样式
btn-success成功样式
btn-info一般信息样式
btn-waring警告样式
btn-danger危险样式
btn-primary首选项样式
btn-link链接样式
<!--尺寸大小-->
<!--从大到小的尺寸-->
<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button>
​
<!--块级按钮-->
<!--块级换行-->
<button class="btn btn-block">Button</button>
<button class="btn btn-block">Button</button>
​
<!--激活状态-->
<!--激活按钮-->
<button class="btn active">Button</button>
​
<!--禁用状态-->
<!--禁用按钮-->
<button class="btn active disabled">Button</button>

表单与图片

表单

Bootstrap 提供了一些丰富的表单样式供开发者使用。

  1. 基本格式

//实现基本的表单样式
<form>
    <div class="form-group">
        <label>电子邮件</label>
        <input type="email" class="form-control" placeholder="请输入您的电子邮件">
    </div>
    <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control" placeholder="请输入您的密码">
    </div>
</form>

注：只有正确设置了输入框的 type 类型，才能被赋予正确的样式。支持的输入框控件 包括：text、password、datetime、datetime-local、date、month、time、week、 number、email、url、search、tel 和 color。

  1. 内联表单

//让表单左对齐浮动，并表现为 inline-block 内联块结构
<form class="form-inline">

注：当小于 768px，会恢复独占样式

  1. 表单组合

//前后增加片段
<div class="input-group">
    <div class="input-group-addon">￥</div>
    <input type="text" class="form-control">
    <div class="input-group-addon">.00</div>
</div>

  1. 水平排列

//让表单内的元素保持水平排列
<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">电子邮件</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" placeholder="请输入邮箱地址">
        </div>
    </div>
</form>

注：这里用到了 col-sm 栅格系统，后面章节会重点讲解，而 control-label 表示和 父元素样式同步。

  1. 复选框和单选按钮

//设置复选框，在一行
<div class="checkbox">
    <label>
        <input type="checkbox">体育
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox">音乐
    </label>
</div>
​
//设置禁用的复选框
<div class="checkbox disabled">
    <label>
        <input type="checkbox" disabled>音乐
    </label>
</div>
​
//设置内联一行显示的复选框
<label class="checkbox-inline">
    <input type="checkbox">体育
</label>
<label class="checkbox-inline disabled">
    <input type="checkbox" disabled>音乐
</label>
​
//设置单选框
<div class="radio disabled">
    <label>
        <input type="radio" name="sex" disabled>男
    </label>
</div>

  1. 下拉列表

//设置下拉列表
<select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

  1. 校验状态

//设置为错误状态
<div class="form-group has-error">
<!--
    注：还有其他状态如下
    样式              说明
    has-error       错误状态
    has-success     成功状态
    has-warning     警告状态
-->
    
//label 标签同步相应状态
<label class="control-label">Input with success</label>

  1. 添加额外的图标

//文本框右侧内置文本图标
<div class="form-group has-feedback">
    <label>电子邮件</label>
    <input type="email" class="form-control">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>  
<!--
    注：除了 glyphicon-ok 外，还有几个如下：
    样式                      说明
    glyphicon-ok            成功状态
    glyphicon-warning-sign  警告状态
    glyphicon-remove        错误状态
-->

  1. 控制尺寸

//从大到小
<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm">

注：也可以设置父元素 form-group-lg、form-group-sm，来调整。

图片

Bootstrap 提供了一些丰富的图片样式供开发者使用。

1.图片形状

//三种形状
<img src="img/pic.png" alt="图片" class="img-rounded">
<img src="img/pic.png" alt="图片" class="img-circle">
<img src="img/pic.png" alt="图片" class="img-thumbnail">
//响应式图片
<img src="img/pic.png" alt="图片" class="img-responsive">

 

辅助类与响应式工具

辅助类

Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、 显示关闭图标等等。

  1. 情景文本颜色

样式名描述
text-muted柔和灰
text-primary主要蓝
text-success成功绿
text-info信息蓝
text-warning警告黄
text-danger危险红
//各种色调的字体
<p class="text-muted">Bootstrap教程</p>
<p class="text-primary">Bootstrap教程</p>
<p class="text-success">Bootstrap教程</p>
<p class="text-info">Bootstrap教程</p>
<p class="text-warning">Bootstrap教程</p>
<p class="text-danger">Bootstrap教程</p>

  1. 情景背景色

样式名描述
bg-primary主要蓝
bg-success成功绿
bg-info信息蓝
bg-warning警告黄
bg-danger危险红
//各种色调的背景
<p class="bg-primary">Bootstrap教程</p>
<p class="bg-success">Bootstrap教程</p>
<p class="bg-info">Bootstrap教程</p>
<p class="bg-warning">Bootstrap教程</p>
<p class="bg-danger">Bootstrap教程</p>

  1. 关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失。

<button type="button" class="close">&times;</button>

  1. 三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。

<span class="caret"></span>

  1. 快速浮动

通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。

<div class="pull-left">左边</div>
<div class="pull-right">右边</div>

注：这个浮动其实就是 float，只不过使用了!important 加强了优先级。

  1. 块级居中

<div class="center-block">居中</div>

注：就是 margin:x auto；并且设置了 display:block;。

  1. 清理浮动

<div class="clearfix"></div>

注：这个 div 可以放在需要清理浮动区块的前面即可。

  1. 显示和隐藏

<div class="show">show</div>
<div class="hidden">hidden</div>

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。

.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。

另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。

 

响应式工具

在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类， 就提供了这种解决方案。

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

 超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px)
.visible-xs-*可见隐藏隐藏隐藏
.visible-sm-*隐藏可见隐藏隐藏
.visible-md-*隐藏隐藏可见隐藏
.visible-lg-*隐藏隐藏隐藏可见
.hidden-xs隐藏可见可见可见
.hidden-sm可见隐藏可见可见
.hidden-md可见可见隐藏可见
.hidden-lg可见可见可见隐藏
//超小屏幕激活显示
<div class="visible-xs-block a">Bootstrap</div>
//超小屏幕激活隐藏
<div class="hidden-xs a">Bootstrap</div>

注：对于显示的内容，有三种变体，分别为：block、inline-block、inline

iconfont与按钮组

导航与菜单组件

路径与分页组件

标签与徽章

巨幕页头缩略图和警告框组件

进度条媒体对象和Well组件

列表与面板组件

模态框插件

1.基本使用

使用模态框的弹窗组件需要三层 div 容器元素，分别为 modal(模态声明层)、 dialog(窗口声明层)、content(内容层)。在内容层里面，还有三层，分别为 header(头 部)、body(主体)、footer(注脚)。

基本案例:

<!-- 模态声明，show 表示显示 -->
<div class="modal show" tabindex="-1">
    <!-- 窗口声明 -->
    <div class="modal-dialog">
        <!-- 内容声明 -->
        <div class="modal-content">
            <!-- 头部 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title">会员登录</h4>
            </div>
            <!-- 主体 -->
            <div class="modal-body">
                <p>暂时无法登录会员</p>
            </div>
            <!-- 注脚 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default">注册</button>
                <button type="button" class="btn btn-primary">登录</button>
            </div>
        </div>
    </div>
</div>

如果想让模态框自动隐藏，然后通过点击按钮弹窗，那么需要做如下操作：

  1. 模态框去掉 show，增加一个 id

<div class="modal" id="myModal">

  1. 点击触发模态框显示

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    点击弹窗
</button>

弹窗的大小有三种，默认情况下是正常，还有 lg(大)和 sm(小)

<div class="modal-dialog modal-lg">
<div class="modal-dialog sm-lg">

另外，还可以为模态框提供特效

<!--淡入淡出效果-->
<div class="modal fade" id="myModal">

如果需要使用栅格系统，则只需要在模态框modal-body中嵌套.row元素，然后使用栅格系统中的类即可。

<!-- 主体 -->
<div class="modal-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">1</div>
            <div class="col-md-4">1</div>
            <div class="col-md-4">1</div>
        </div>
    </div>
</div>

2.用法说明

基本使用介绍结束之后，我们就来看下插件的各种重要用法。所有的插件，都是基于 JavaScript/jQuery 的。那么，就有四个要素：用法、参数、方法和事件。

  1. 用法 第一种：

可以通过 data 属性

<div class="data-toggle="modal" data-target="#myModal""></div>

data-toggle 表示触发类型

data-target 表示触发的节点

如果不是使用<button>，而是<a>，其中 data-target 也可以使用 href="#myModal" 取代。当然，我们建议使用 data-target。除了 data-toggle 和 data-target 两个声明 属性外，还有一些可以用选项。

  1. 参数

可以通过在 HTML 元素上设置 data-*的属性声明来控制效果。

属性名类型默认值描述
data-backdrop布尔值或'static'true默认值 true，表示背景存在黑灰透明 遮罩，且单击空白背景可关闭弹窗； 如果为 false，表示背景不存在黑灰 透明遮罩，且点击空白背景不可关闭 弹窗； 如果是字符串'static'，表示背景存 在黑灰透明遮罩，且点击空白不可关 闭弹窗。
data-keyboard布尔值true如果是 true，按 esc 键会关闭窗口； 如果是 false，按 esc 键会不会关闭。
data-show布尔值true如果是 true，初始化时，默认显示； 如果是 false，初始化时，默认隐藏。
hrefurl路径空值如果值不是以#号开头，则表示一个 url 地址，加载 url 内容到 modal-content 容器里，并只加载一 次。如果是#号，就是取代 data-target 的方法。

//空白背景且点击不关闭

data-backdrop="false"

//按下 esc 不关闭

data-keyboard="false"

//初始化隐藏，如果是按钮点击触发，第一次点击则无法显示，第二次显示。

data-show="false"

//加载一次 index.html 到容器内

href="index.html"

当然，针对以上操作，也可以在 JavaScript 直接设置。

属性名类型默认值描述
backdrop布尔值或'static'true默认值 true，表示背景存在黑灰透明 遮罩，且单击空白背景可关闭弹窗； 如果为 false，表示背景不存在黑灰 透明遮罩，且点击空白背景不可关闭 弹窗； 如果是字符串'static'，表示背景存 在黑灰透明遮罩，且点击空白不可关 闭弹窗。
keyboard布尔值true如果是 true，按 esc 键会关闭窗口； 如果是 false，按 esc 键会不会关闭。
show布尔值true如果是 true，初始化时，默认显示； 如果是 false，初始化时，默认隐藏。
remoteurl路径空值远程获取指定内容填充到 modal-content 容器内。

//通过 jQuery 方式声明

$('#myModal').modal({
    show : true,
    backdrop : false,
    keyboard : false,
    remote : 'index.html',
});

  1. 方法

如果说，默认不显示弹窗，那么怎么才能通过点击前后弹窗呢？

参数名使用方法描述
toggle.modal('totgle')触发时，反转切换弹窗状态
show.modal('show')触发时，显示窗口
hide.model('hide')触发时，隐藏窗口

//点击显示弹窗

$('#btn').on('click', function () {
    $('#myModal').modal('show');
});

  1. 事件

模态框支持 4 种事件，分别对应弹出前、弹出后、关闭前和关闭后。

事件类型描述
show.bs.modal在 show 方法调用时立即触发。
shown.bs.modal在模态框完全显示出来，并且等 CSS 动画完成之后触 发。
hide.bs.modal在 hide 方法调用时，但还未关闭隐藏时触发。
hidden.bs.modal在模态框完全隐藏之后，并且等 CSS 动画完成之后触 发。
$('#myModal').on('show.bs.modal', function () {
    alert('在 show 方法调用时立即触发！');
});
​
$('#myModal').on('shown.bs.modal', function () {
    alert('在模态框显示完毕后触发！');
});
​
$('#myModal').on('hide.bs.modal', function () {
    alert('在 hide 方法调用时立即触发！');
});
​
$('#myModal').on('hiden.bs.modal', function () {
    alert('在模态框显示完毕后触发！');
});
​
$('#myModal').on('loaded.bs.modal', function () {
    alert('远程数据加载完毕后触发！');
});

 

下拉菜单和滚动监听插件

下拉菜单

常规使用中，与组件方法一致

//声明式用法
<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>

声明式用法的关键核心：

  1. 外围容器使用 class="dropdown"包裹

  2. 内部点击按钮事件绑定 data-toggle="dropdown"

  3. 菜单元素使用 class="dropdown-menu"

//如果按钮在容器外部，可以通过 data-target 进行绑定。

<button 
        class="btn btn-primary" 
        id="btn" 
        data-toggle="dropdown"
        data-target="#dropdown">

在 JavaScript 调用中，没有属性，方法并不好用，下面介绍四个基本事件

//下拉菜单方法，但仍然需要 data-*

$('#btn').dropdown();
$('#btn').dropdown('toggle');

下拉菜单支持 4 种事件，分别对应弹出前、弹出后、关闭前和关闭后。

事件类型描述
show.bs.dropdown在 show 方法调用时立即触发。
shown.bs.dropdown在下拉菜单完全显示出来，并且等 CSS 动画完成之后 触发。
hide.bs.dropdown在 hide 方法调用时，但还未关闭隐藏时触发。
hidden.bs.dropdown在下拉菜单完全隐藏之后，并且等 CSS 动画完成之后 触发。

//事件绑定

$('#dropdown').on('show.bs.dropdown', function () {
    alert('在调用 show 方法时立即触发！');
});

滚动监听

滚动监听插件是用来根据滚动条所处在的位置自动更新导航项目，显示导航项目高亮显示。

基本案例:

<nav id="nav" class="navbar navbar-default">
            <a href="#" class="navbar-brand">Web 开发</a>
            <ul class="nav navbar-nav">
                <li>
                    <a href="#html5">HTML5</a>
                </li>
                <li>
                    <a href="#bootstrap">Bootstrap</a>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown">JavaScript<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#jquery">jQuery</a>
                        </li>
                        <li>
                            <a href="#yui">Yui</a>
                        </li>
                        <li>
                            <a href="#extjs">Extjs</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div data-offset="0" data-target="#nav" data-spy="scroll" style="height: 200px; overflow: auto; position: relative;padding: 0 10px;">
            <h4 id="html5">HTML5</h4>
            <p>标准通用标记语言下的一个应用 HTML 标准自 1999 年 12 月发布的 HTML4.01 后，后继的 HTML5 和其它标准被束之高阁，为了推动 Web 标准化运动的发展，一些公司联 合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web 超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序， 而 W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML2.0。在 2006 年， 双方决定进行合作，来创建一个新版本的 HTML。</p>
            <h4 id="bootstrap">Bootstrap</h4>
            <p>Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基 于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。[1] 它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出 后颇受欢迎，一直是 GitHub 上的热门开源项目，包括 NASA 的 MSNBC（微软全国广播公司） 的 Breaking News 都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架，如 WeX5 前端开源框架等，也是基于 Bootstrap 源码进行性能优化而来。[3] </p>
            <h4 id="jquery">jQuery</h4>
            <p>JQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 js 库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）， jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML （标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细， 同时还有许多成熟的插件可供选择。jQuery 能够使用户的 html 页面保持代码和 html 内容 分离，也就是说，不用再在 html 里面插入一堆 js 来调用命令了，只需要定义 id 即可。</p>
            <h4 id="yui">Yui</h4>
            <p>近几年随着 jQuery、Ext 以及 CSS3 的发展，以 Bootstrap 为代表的前端 开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出 很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对 这些框架进行初步的介绍与比较，希望能够为大家选择框架提供一点帮助，也为后续详细研 究这些框架的抛砖引玉。
            </p>
            <h4 id="extjs">Extjs</h4>
            <p>ExtJS 可以用来开发 RIA 也即富客户端的 AJAX 应用，是一个用 javascript 写的，主要用于创建前端用户界面，是一个与后台技术无关的前端 ajax 框架。因此，可以 把 ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。ExtJs 最开始基于 YUI 技 术，由开发人员 JackSlocum 开发，通过参考 JavaSwing 等机制来组织可视化组件，无论 从 UI 界面上 CSS 样式的应用，到数据解析上的异常处理，都可算是一款不可多得的 JavaScript 客户端技术的精品。</p>
        </div>

这里有两个重要的属性，如下图：

属性名描述
data-offset默认值为 10，固定内容距滚动容器 10 像素以内， 就高亮显示所对应的菜单。
data-spy设置 scroll，将设置滚动容器监听。
data-target设置#nav，绑定指定监听的菜单

注意：在一个菜单和一个容器的时候，data-target 不设置也可以稳定实现滚动监听高亮。但多个导航时，你不关联其中一个，会导致错误，所以，一般要加上。

如果使用 JavaScript 脚本方式，可以去掉 data-*，使用脚本属性定义：offset、spy 和 target。具体方法如下：

//使用脚本方式定义属性
$('#content').scrollspy({
    offset : 0,
    target : '#nav',
});

滚动监听还有一个切换到新条目的事件。

事件名描述
activate.bs.scrollspy每当一个新条目被激活后都将由滚动监听插件触 发此事件。
//事件绑定在导航上
$('#nav').on('activate.bs.scrollspy', function () {
    alert('新条目被激活后触发此事件！');
});

滚动监听还有一个更新容器 DOM 的方法。

方法名描述
refresh更新容器 DOM 的方法。

//HTML 部分

​
<section class="sec">
<h4 id="html5">HTML5
<a href="#" οnclick="removeSec(this)">删除此项</a></h4>
<p>...</p>
</section>

js部分

//删除内容时，刷新一下 DOM，避免导航监听错位
function removeSec(e) {
    $(e).parents('.sec').remove();
    $('#content').scrollspy('refresh');
}

注意：这个方法必须使用 data-*声明式

 

标签页和工具提示插件

标签页

快速添加、动态的选项卡功能，可以通过本地内容的窗格进行转换，另外，可以通过下拉菜单进行切换。不支持嵌套制表符 ，标签页也就是通常所说的选项卡功能。

基本用法

<ul class="nav nav-tabs">
    <li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>
    <li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
    <li><a href="#jquery" data-toggle="tab">jQuery</a></li>
    <li><a href="#extjs" data-toggle="tab">ExtJS</a></li>
</ul>
​
<div class="tab-content" style="padding: 10px;">
    <div class="tab-pane active" id="html5">...</div>
    <div class="tab-pane" id="bootstrap">...</div>
    <div class="tab-pane" id="jquery">...</div>
    <div class="tab-pane" id="extjs">...</div>
</div>

可以设置淡入淡出效果 fade，而 in 表示首选的内容默认显示

<div class="tab-pane fade in active" id="html5">

也可以换成胶囊式

<ul class="nav nav-pills">

使用 data-target 绑定或不绑定效果都是一样的

使用 JavaScript，直接使用 tab 方法。

$('#nav a').on('click', function (e) {
    e.preventDefault();
    $(this).tab('show');
});
事件类型描述
show.bs.tab在调用 tab 方法时触发
shown.bs.tab在显示整个标签时触发
//事件绑定
$('#nav a').on('show.bs.tab', function () {
    alert('调用 tab 时触发！');
});
$('#nav a').on('shown.bs.tab', function () {
    alert('显示完 tab 时触发！');
});

工具提示

工具提示就是通过鼠标移动选定在特定的元素上时，显示相关的提示语。

基本案例：

<button id="myBtn" data-toggle="tooltip" title="超文本标记语言">HTML5</button>

js部分需要定义

$('#myBtn').tooltip();

工具提示有很多属性来配置提示的显示，具体如下：

属性名描述 
data-animation默认 true，在 tooltip 上应用一个 CSS fade 动画。 如果设置 false，则不应用。 
data-html默认 false，不允许提示内容格式为 html。如果设置 为 true，则可以设置 html 格式的提示内容。 
data-placement默认值 top，还有 bottom、left、right 和 auto。 如果 auto 会自行调整合适的位置，如果是 auto left 则会尽量在左边显示，但左边不行就靠右边 
data-selector默认 false，可以选择绑定指定的选择器。 
data-original-title默认空字符串，提示语的内容。优先级比 title 低 
title默认字空符串，提示语的内容。 
data-trigger默认值 hover foucs，表示怎么触发 tooltip，其 他值为：click、manual。多个值用空格隔开，manual 手动不能和其他同时设置。 
data-delay默认值 0，延迟触发 tooltip(毫秒)，如果传数字则， 表示 show/hide 的毫秒数，如果传对象，结构为： {show:500,hide:100} 
data-container默认值 false，将 tooltip 附加到特定的元素上。比 如组合按钮组提示，容器不够，可以附加 body 上。 container : 'body' 
data-template更改提示框的 HTML 提示语的模版，默认值为：<div class='tooltip'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div>。 
<a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符"
    data-animation="false"
    data-html="true"
    data-placement="auto"
    data-selector="a[rel=tooltip]"
    data-trigger="click"
    data-delay="500"
    data-template="<b>123</b>"
    >HTML5</a>

JavaScript 方式直接去掉前面的 data 即可。包括：animation、html、placement、 selector、original-title、title、trigger、delay、container 和 template 等属 性。

//JavaScript 方式 
$('#section a').tooltip({
    delay : {
    show : 500,
    hide : 100,
    },
    container : 'body'
});

JavaScript 有四个方法：show、hide、toggle

//显示
$('#section a').tooltip('show');
//隐藏
$('#section a').tooltip('hide');
//反转显示和隐藏
$('#section a').tooltip('toggle');
//隐藏并销毁
$('#section a').tooltip('destroy');

Tooltip 中事件有四种。

事件名描述
show.bs.tooltip在 show 方法调用时立即触发
shown.bs.tooltip在提示框完全显示给用户之后触发
hide.bs.tooltip在 hide 方法调用时立即触发
hidden.bs.tooltip在提示框完全隐藏之后触发
$('#select a').on('show.bs.tooltip', function () {
    alert('调用 show 时触发！');
});

 

弹出框和警告框插件

按钮和折叠插件

轮播插件

附加导航插件

 

 

 

 

 

 

 

 

 

 

Adventure。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【JAVA高级】——吃透JDBC中的SQL注入问题和解决方案
不迁怒，不贰过。小知识，大智慧。
10-26 1万+
吃透JDBC中的SQL注入问题和解决方案
【JAVA高级】——吃透JDBC中的事务及事务的封装
不迁怒，不贰过。小知识，大智慧。
11-01 6490
吃透JDBC中的事务及事务的封装
第三十七天 Java基础学习(三十一)
aLntano的博客
07-10 208
在引入了Bootstrap资源的页面代码中，使用div标签并给其添加面板组件的样式即可实现,样式以class属性的方式添加，但是注意添加的样式是Bootstrap中内置的css类样式，面板组件将其内部区域分为了三部分：标题部分，主体部分，以及脚注部分，不同的部分以子div以及其添加的class样式来声明。通过在一个起控制器作用的元素(例如：按钮)上添加data-toggle="modal”属性，或者data-target="#foo”属性，再或者 href="#foo”属性，用于指向被控制的模态框。
（四）栅格系统
weixin_33682790的博客
06-14 621
一、移动设备优先 在 HTML5 中有一份非常重要的 meta，用于设置屏 幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。 //分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scal...
Bootstrap之栅格系统
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
05-07 716
Bootstrap之栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统。一. 移动设备优先所谓移动设备优先，重要的是屏幕，不是设备。移动设备优先就是说起初样式是在移动设备写的，然后写到sm尺寸的时候样式得改变了，于是就加media screen max-width >=768， 再写sm的样式，这样尺寸递进就完成了所有的媒体查询，由于不加media query的样式是在最小尺
栅格系统
lql_h的博客
05-05 2833
一．移动设备优先在 HTML5的项目中，我们做了移动端的项目。它有一份非常重要的meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。 //分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scal...
Java学习之路记录Day-04
Anmuzhou的博客
02-18 222
Day-04 前言： Day-04的内容有变量的分类、基本数据类型、==与equals()的区别、swithch...case选择结构语句；文中有不足的地方还请海涵和纠正，谢谢！！ 一、变量的分类 变量按声明位置(作用范围)分为： 局部变量：在方法中声明的变量称为局部变量；作用范围：离局部变量最近的大括 号{}内使用，因此局部变量的作用域较小。 成员变量：在方法外声明的变量或者在类中声明的变量称为成员变量。成员变量可以在类中直接使用，因此成员变量的作用范围更大。 变量按数据类型为：..
java周记(第二周)
zjzty_的博客
11-05 106
JAVA周记(第二周)
30、JAVA进阶——Socket编程
热门推荐
不迁怒，不贰过。小知识，大智慧。
10-13 2万+
一、Socket知识 1. Socket概述 2. Socket通信原理 3. java.net包 二、基于TCP协议的Socket编程 1.Socket类和ServerSocket类 2.使用Socket编程实现登录功能 三、基于UDP协议的Socket编程 1.DatagramPacket类和DatagramSocket类 2.使用Socket编程实现客户咨询
【JAVA高级】——吃透JDBC中的封装工具类、ORM和Date工具类
不迁怒，不贰过。小知识，大智慧。
10-30 2268
吃透JDBC中的封装工具类、ORM和Date工具类
26、JAVA进阶——多线程
不迁怒，不贰过。小知识，大智慧。
10-10 950
一、认识进程和线程 | 1. 进程 | 2. 线程 | 3. 多线程的优势 | 二、编写线程类 | 三、线程状态和线程调度 | 1.线程的状态 | 2.线程调度
BootStrap知识点
weixin_44075120的博客
02-27 447
一 自定义插件 所谓的插件其实就是jQuery中的一中方法的理解方式，我们可以按照java中对于方法的定义来进行理解。 所以自定义插件就是我们在jQuery中来自定义方法。 需要注意的是$==jQuery $(function(){})==jQuery(function(){}) $(this)得到的是jQuery对象，它能得到jQuery属性 this得到的是html对象，它能得到节点（元素）的...
Bootstrap栅格系统
Just The Way You Are
07-14 574
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统 一.移动设备优先 H5项目中，meta用于设置屏幕和设备等宽以及是否运行用户缩放及缩放比例的问题。 <!--含义：屏幕宽度和设备一致，初始缩放比例，最大缩放比例(不允许用户缩放)--> <meta name="viewport" content="width=device-width,initial-sc
第5章 栅格系统
09-01 291
本节课我们主要学习一下 Bootstrap 的栅格系统， 提供了一套响应式、移动设备优先的流 式栅格系统。 一．移动设备优先 在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏 幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。 //分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放 <meta name="...
Bootstrap资料整理
JourneyX的博客
11-19 2141
输入框和导航组件                        1      Bootstrap 介绍   【学习要点：概述、特点、结构】   1.1    Bootstrap 概述 Bootstrap 是由Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优
基于springboot大学生智能消费记账系统的设计与实现.docx
最新发布
09-06
基于springboot大学生智能消费记账系统的设计与实现.docx
基于Mnist数据集生成用于(多)目标检测的小型数据集.zip
09-06
1 目标检测的定义 目标检测（Object Detection）的任务是找出图像中所有感兴趣的目标（物体），确定它们的类别和位置，是计算机视觉领域的核心问题之一。由于各类物体有不同的外观、形状和姿态，加上成像时光照、遮挡等因素的干扰，目标检测一直是计算机视觉领域最具有挑战性的问题。 目标检测任务可分为两个关键的子任务，目标定位和目标分类。首先检测图像中目标的位置（目标定位），然后给出每个目标的具体类别（目标分类）。输出结果是一个边界框（称为Bounding-box，一般形式为(x1,y1,x2,y2)，表示框的左上角坐标和右下角坐标），一个置信度分数（Confidence Score），表示边界框中是否包含检测对象的概率和各个类别的概率（首先得到类别概率，经过Softmax可得到类别标签）。 1.1 Two stage方法 目前主流的基于深度学习的目标检测算法主要分为两类：Two stage和One stage。Two stage方法将目标检测过程分为两个阶段。第一个阶段是 Region Proposal 生成阶段，主要用于生成潜在的目标候选框（Bounding-box proposals）。这个阶段通常使用卷积神经网络（CNN）从输入图像中提取特征，然后通过一些技巧（如选择性搜索）来生成候选框。第二个阶段是分类和位置精修阶段，将第一个阶段生成的候选框输入到另一个 CNN 中进行分类，并根据分类结果对候选框的位置进行微调。Two stage 方法的优点是准确度较高，缺点是速度相对较慢。 常见Tow stage目标检测算法有：R-CNN系列、SPPNet等。 1.2 One stage方法 One stage方法直接利用模型提取特征值，并利用这些特征值进行目标的分类和定位，不需要生成Region Proposal。这种方法的优点是速度快，因为省略了Region Proposal生成的过程。One stage方法的缺点是准确度相对较低，因为它没有对潜在的目标进行预先筛选。 常见的One stage目标检测算法有：YOLO系列、SSD系列和RetinaNet等。 2 常见名词解释 2.1 NMS(Non-Maximum Suppression) 目标检测模型一般会给出目标的多个预测边界框，对成百上千的预测边界框都进行调整肯定是不可行的,需要对这些结果先进行一个大体的挑选。NMS称为非极大值抑制，作用是从众多预测边界框中挑选出最具代表性的结果，这样可以加快算法效率，其主要流程如下： 设定一个置信度分数阈值，将置信度分数小于阈值的直接过滤掉 将剩下框的置信度分数从大到小排序，选中值最大的框 遍历其余的框，如果和当前框的重叠面积(IOU)大于设定的阈值（一般为0.7），就将框删除（超过设定阈值，认为两个框的里面的物体属于同一个类别） 从未处理的框中继续选一个置信度分数最大的，重复上述过程，直至所有框处理完毕 2.2 IoU(Intersection over Union) 定义了两个边界框的重叠度，当预测边界框和真实边界框差异很小时，或重叠度很大时，表示模型产生的预测边界框很准确。边界框A、B的IOU计算公式为: 2.3 mAP(mean Average Precision) mAP即均值平均精度，是评估目标检测模型效果的最重要指标，这个值介于0到1之间，且越大越好。mAP是AP(Average Precision)的平均值，那么首先需要了解AP的概念。想要了解AP的概念，还要首先了解目标检测中Precision和Recall的概念。 首先我们设置置信度阈值（Confidence Threshold）和IoU阈值（一般设置为0.5，也会衡量0.75以及0.9的mAP值）： 当一个预测边界框被认为是True Positive（TP）时，需要同时满足下面三个条件： Confidence Score > Confidence Threshold 预测类别匹配真实值(Ground truth)的类别 预测边界框的IoU大于设定的IoU阈值 不满足条件2或条件3，则认为是False Positive（FP）。当对应同一个真值有多个预测结果时，只有最高置信度分数的预测结果被认为是True Positive，其余被认为是False Positive。 Precision和Recall的概念如下图所示： Precision表示TP与预测边界框数量的比值 Recall表示TP与真实边界框数量的比值 改变不同的置信度阈值，可以获得多组Precision和Recall，Recall放X轴，Precision放Y轴，可以画出一个Precision-Recall曲线，简称P-R
8051Proteus仿真c源码步进电机C版本
09-06
8051Proteus仿真c源码步进电机C版本提取方式是百度网盘分享地址
零基础入门：KALI V0.21安装与靶场环境搭建
- KALI官网提供了四种不同类型的ISO镜像：Installer（可自定义安装）、Weekly（周更，可能不稳定）、Everything（包含所有工具）和NetInstaller（网络安装，现场下载）。推荐选择Installer版本，因为它的灵活性更高...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值