Bootstrap -- 按钮样式与使用

1. 可用于<a>, <button>, 或 <input> 元素的按钮样式

按钮样式使用：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <script type="text/javascript" src="./js/bootstrap.min.js"></script>

</head>

<body>

    <button type="button" class="btn btn-primary">原始按钮</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>

</body>

</html>

实现效果：

2. 各种大小按钮的样式

按钮大小样式的使用：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <script type="text/javascript" src="./js/bootstrap.min.js"></script>

</head>

<body>

  <button type="button" class="btn btn-success">默认大小的按钮</button>

  <button type="button" class="btn btn-success btn-lg">大的按钮</button>

  <button type="button" class="btn btn-success btn-sm">小的按钮</button>

  <button type="button" class="btn btn-success btn-xs">特别小的按钮</button>

</body>

</html>

实现效果：

3. 按钮状态：激活状态（.active）、禁用状态（disabled）

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <script type="text/javascript" src="./js/bootstrap.min.js"></script>

</head>

<body>

  <button type="button" class="btn btn-success">默认按钮</button>

  <button type="button" class="btn btn-success active">激活状态按钮</button>

  <button type="button" class="btn btn-success disabled">禁用状态按钮</button>

</body>

</html>

实现效果：

4. 按钮组：使用 .btn-group 可以创建按钮组

使用按钮组：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <script type="text/javascript" src="./js/bootstrap.min.js"></script>

</head>

<body>

    <div class="btn-group">

        <button type="button" class="btn btn-primary">小胡子</button>

        <button type="button" class="btn btn-primary">大胡子</button>

        <button type="button" class="btn btn-primary">小朋友</button>

    </div>

</body>

</html>

实现效果：

5. 按钮自适应样式

自适应样式使用：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <script type="text/javascript" src="./js/bootstrap.min.js"></script>

</head>

<body>

    <div class="btn-group btn-group-justified">

        <a href="https://www.baidu.com" class="btn btn-primary">百度</a>

        <a href="https://www.taobao.com" class="btn btn-primary">淘宝</a>

        <a href="https://www.qq.com" class="btn btn-primary">腾讯</a>

    </div>

</body>

</html>

实现效果：

Bootstrap -- 按钮样式与使用的更多相关文章

  1. bootstrap按钮样式

    <a class='btn' href='javascript:;'>常规按钮</a> <a class='btn btn-small' href='javascript ...

  2. bootstrap改变上传文件按钮样式，并显示已上传文件名

    参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：原始按钮样式（未被操作）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Bootstrap 按钮

    本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...

  5. BootStrap基本样式

    文本对齐风格:.text-left:左对齐.text-center:居中对齐.text-right:右对齐.text-justify:两端对齐 取消列表符号:.list-unstyled内联列表:.l ...

  6. bootstrap 按钮 文本 浮动 隐藏

    bootstrap 按钮 文本 浮动 隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  8. [置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  9. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

随机推荐

  1. 网络协议 10 - Socket 编程（上）：实践是检验真理的唯一标准

    系列文章传送门: 网络协议 1 - 概述 网络协议 2 - IP 是怎么来,又是怎么没的? 网络协议 3 - 从物理层到 MAC 层 网络协议 4 - 交换机与 VLAN:办公室太复杂,我要回学校 网 ...

  2. AspNetCore 基于流下载文件与示例代码

    昨天说了,AspNetCore如何进行上传文件,其中写了两种方式ajax与模型,其文章地址为:https://www.cnblogs.com/ZaraNet/p/9949167.html 那么既然有上 ...

  3. 转：OAuth 2.0 介绍

    OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版. 本文对OAuth 2.0的设计思路和运行流程,做一个简明通俗的解释,主要参考材料为R ...

  4. 带着萌新看springboot源码06

    这节来说个大家都比较熟悉的东西,就是servlet三大组件,servlet.filter.listener,再说说springboot的内置tomcat. 也许还会说一下tomcat的运行原理,还有, ...

  5. Hbase给初学者的“下马威”

    自从成为架构师()之后,李大胖的学习动力似乎少了一些,尤其是今年(当然也有一些客观因素). 临近岁末,内心着实有些惭愧,决定学习一把大数据.跟随一下业界前沿(其实已经不是前沿了),梦想着有一天能够拥有 ...

  6. jumpserver篇--安装

    参考:https://github.com/jumpserver/jumpserver/wiki/%E5%AE%89%E8%A3%85%E5%9B%BE%E8%A7%A3 服务器环境: ip:192. ...

  7. Java 由浅入深GUI编程实战练习（二）

    一,项目简介 1.利用Java GUI 绘制图像界面,设置整体布局 2.编写一个随机数生成1~100的随机数 3.编写一个验证类,用于验证用户输入值与生成随机数是否相等并记录用户猜测次数,当用户猜测成 ...

  8. 【代码笔记】Web-CSS-CSS Border(边框)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. 四边形不等式优化DP

    记录一下,以免忘了 对于一个形如 \[dp[i][j]=min(dp[i][k]+dp[k][j]+w[i][j])\] 的转移方程(注意取最大值时不一定满足四边形不等式) 定理1 若对于\(a \l ...

  10. MyEclipse自动补全

    打开MyEclipse 6.5,然后"window"→"Preferences". 选择"java",展开,"Editor&quo ...