<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap form</title>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<style type="text/css">
.sprite{
background-image:url(./pbgl_rwgl.png);
background-repeat:no-repeat;
display:inline-block;
}
.sprite-accept{
width:12px;
height:12px;
/*background-position:-5px -5px;*/
}
</style>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-xs-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<form role="form" class="form-vertical">
<div class="form-group" >
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-link">链接</button>
<div class="myBtn-content">
<buttion id="s1" type="button" class="btn btn-primary" >
<i class="sprite sprite-accept"></i>
<span class="hidden-xs" >自定义按钮</span>
</div>
<div class="sprite">this is a test!</div>
</form>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
Bootstrap图标库的设计理念是简洁、易用，旨在增强用户界面的可用性和吸引力。 Bootstrap5本身是一个流行的前端框架，它提供了组件化的设计、响应式的布局以及易用的JavaScript插件，帮助开发者快速构建现代网页...
bootstrap 图标icon符号图标glyphicons不正常显示解决办法如下所示： 分享供各位参考： 1、在ff/http:的地址栏中输入“about:config”，即进入配置界面。 2、进入后，搜索“security.fileuri.strict_origin_policy”...
Bootstrap Icons：Bootstrap 有史以来第一次拥有自己的图标库，并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用，从表单到导航组件等。Bootstrap Icons ...
Bootstrap Iconpicker是一款基于Bootstrap框架的前端组件，专为在网页设计中方便地选择和使用图标而设计。这个压缩包文件“bootstrap-iconpicker.zip”包含了所有必要的资源和代码，使开发者能够在Bootstrap 3.x环境...
Bootstrap Icon图标选择组件是前端开发中常用的工具，它基于Bootstrap框架和jQuery库。Bootstrap是一个流行的前端框架，它提供了一套完整的界面组件和布局解决方案，而jQuery是一个快速、小巧、功能丰富的JavaScript...
在这个特定的资源中，我们关注的是"Bootstrap带图标的按钮样式"，这是一种利用Bootstrap基础按钮类并结合CSS3技术来创建带有图标且具有交互效果的按钮。 首先，Bootstrap按钮的基础样式是通过其预定义的CSS类实现的...
Bootstrap 5的Iconpicker用法1-通过CDN < script src = "https://unpkg.com/codethereal-iconpicker@1.1.3/dist/iconpicker.js" > < / script > 2-通过npm npm i codethereal-iconpickerimport Iconpicker ...
React Bootstrap图标 全新的用作React组件。 当前v1.3.0，有1265个图标！ 安装 npm install react-bootstrap-icons --save 要么 yarn add react-bootstrap-icons 用法 import React from ' react ' ; import { ...
Bootstrap图标Vue Bootstrap图标旨在与Bootstrap组件一起使用，从表单控件到导航。 但是，它们也可以在几乎任何项目中工作。 这是因为Bootstrap图标是SVG，因此它们可以快速轻松地缩放并可以使用CSS设置样式。 -该...
基于bootstrap的单选按钮图标 改变了浏览器自带形状，支持自定义图标
一、Bootstrap icon picker组件 这个组件是在github上面搜索的时候找到的，初初看上去，确实是很不错的，并且是基于bootstrap风格的，所以更加适合使用bootstrap风格布局的项目。既然是github上面的，毋庸置疑，这是...
使用 Bootstrap 图标字体返回顶部 链接到 scripts.js 和 style.css 文件，或将它们添加到您当前的文档中。 您还需要链接到引导程序的图标字体作为通过 js 文件附加到正文。 “返回顶部”按钮的默认不透明度为 0.5，...
首先，加载图标（Loading Icon）在网页设计中扮演着至关重要的角色，特别是在内容异步加载或页面正在处理数据时。它们可以给用户带来积极的用户体验，让用户知道系统正在进行后台操作，而不是停滞不前。 在...
4. **兼容性**：作为EasyUI的一部分，这些图标与EasyUI的其他组件有良好的兼容性，可以无缝集成到EasyUI应用中，同时，它们也兼容其他前端框架，如Bootstrap、AngularJS等。 5. **可自定义**：除了预设的颜色和大小...
SVG图标集锦是一个丰富的资源库，包含了多个知名图标的集合，如bootstrap、feather、iconpark、ikonate和ionicons等。这些图标是为网页开发设计的，具有高质量和高度可定制性，特别适合用于现代网页和应用程序界面，...
Icon Picker 是一个基于 Bootstrap 和 Glyphicons 图标库的 jQuery 插件，用于在网页中方便地选择和显示图标。这个工具极大地简化了用户界面中图标选取的过程，为开发者提供了直观的图形化选择方式。 Bootstrap 是...
Bootstrap 使用Font Awesome图标字体文件 集成了圆角按钮 禁用状态按钮 自定义按钮尺寸 可设定按钮动画 旋转和闪烁动画 ps:字体文件在asset里面 说的不是很明白 看下面英文解释吧 Bootstrap buttons as per ...