Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式

内容	参数
OS	Windows 10 x64
browser	Firefox 65.0.2
framework	Bootstrap 3.3.7
editor	Visual Studio Code 1.32.1
typesetting	Markdown

code

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><!-- IE将使用最新的引擎渲染网页 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 页面的宽度与设备屏幕的宽度一致初始缩放比例 1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo</title><meta name="author" content="www.cnblogs.com/kemingli"><!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]-->
</head><body><!-- start : demo --><div class="container" style="border:1px solid green;"><h1>普通的按钮</h1><input type="button" value="input所生的按钮" /><br /><button>button所生的按钮</button><br /><a href="#">a所生的按钮</a><br /><hr /><br /><!-- btn是按钮样式的基类 --><h1>添加btn的按钮</h1><input class="btn" type="button" value="input所生的按钮" /><br /><button class="btn">button所生的按钮</button><br /><a class="btn" href="#">a所生的按钮</a><br /><hr /><br /><h1>各种样式的按钮</h1><h2> input所生的按钮融合六种样式</h2><input class="btn btn-primary" type="button" value="btn-primary" /><br /><input class="btn btn-warning" type="button" value="btn-warning" /><br /><input class="btn btn-success" type="button" value="btn-success" /><br /><input class="btn btn-info" type="button" value="btn-info" /><br /><input class="btn btn-danger" type="button" value="btn-danger" /><br /><input class="btn btn-default" type="button" value="btn-default" /><br /><br /><h2> button所生的按钮融合六种样式</h2><button class="btn btn-primary">btn-primary</button><br /><button class="btn btn-warning">btn-warning</button><br /><button class="btn btn-success">btn-success</button><br /><button class="btn btn-info">btn-info</button><br /><button class="btn btn-danger">btn-danger</button><br /><button class="btn btn-default">btn-default</button><br /><br /><h2> a所生的按钮融合六种样式</h2><a class="btn btn-primary" href="#">btn-primary</a><br /><a class="btn btn-warning" href="#">btn-warning</a><br /><a class="btn btn-success" href="#">btn-success</a><br /><a class="btn btn-info" href="#">btn-info</a><br /><a class="btn btn-danger" href="#">btn-danger</a><br /><a class="btn btn-default" href="#">btn-default</a><br /></div><!-- end : demo --><!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 --><script src="bootstrap/js/jquery.min.js"></script><!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 --><script src="bootstrap/js/bootstrap.min.js"></script>
</body></html>

result

resource

[ 文档 ] getbootstrap.com/docs/3.3
[ 源码 ] github.com/twbs/bootstrap
[ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
[ 平台 ] www.cnblogs.com
[ 平台 ] github.com
[ 扩展 - 平台] www.bootcss.com
[ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

Bootstrap是前端开源框架，优秀，值得学习。
博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。
Firefox是开源的浏览器，优秀，值得关注。
面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。
博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

转载于:https://www.cnblogs.com/kemingli/p/10545362.html

Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式相关推荐

bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>boo ...
ios基础考试题1，实现按钮点击改变位置和图片的透明度和动画的使用
ios基础考试题1,实现按钮点击改变位置和图片的透明度和动画的使用考察frame,center,bounds的坐标,改变,动画的使用,图片容器的UIImageView的透明度等知识 oc写法 // ...
python设置tk退出_Python3 tkinter基础 Tk quit 点击按钮退出窗体
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda : 4.5.11 typesetting : Markdown ...
修改video标签自带按钮的默认样式
这里所说的修改video标签中自带按钮的默认样式,指的是用css就可以控制视频播放按钮的大小等我们来看一下 video 的内部构造: chrome 下,开发者工具 setting Prefere ...
android按钮好看的样式
按钮好看的样式首先来一张全部的样式: 下载demo的地址:在最下面简介: 1.按下变背景颜色 2.按下变字体颜色 3.圆角 4.边框 5.背景半透明 6.透明.边框.圆角组合 7.背景颜色.字体颜 ...
【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYP ...
element-ui中 this.$confirm修改确定取消按钮顺序和样式
element-ui中 this.$confirm修改确定取消按钮顺序和样式首先其他博客上说是给 this.$confirm中添加取消样式,我试过了无效本人采用的方案是利用css的gap属性,在项 ...
Bootstrap3基础 btn-group-vertical 按钮组（横着、竖着排列）
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础 input-group-btn 按钮与输入框横向组合
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础 warning/active... 表格的状态类（不同的背景色）
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...

Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式

code

result

resource

Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式相关推荐

最新文章

热门文章