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. spark使用udf给dataFrame新增列

    在 spark 中给 dataframe 增加一列的方法一般使用 withColumn // 新建一个dataFrame val sparkconf = new SparkConf() .setMas ...

  2. RedirectToAction()转移方式及参数传递

    今天在做一个功能的时,使用RedirectToAction()需要从这里传几个参数,从网上查了一下,这样解决.真好. Return RedirectToAction("Index" ...

  3. influxdb使用说明

    前言 influxdb是目前比较流行的时间序列数据库. 何谓时间序列数据库?什么是时间序列数据库,最简单的定义就是数据格式里包含Timestamp字段的数据,比如某一时间环境的温度,CPU的使用率等. ...

  4. Python爬虫入门教程 9-100 河北阳光理政投诉板块

    河北阳光理政投诉板块-写在前面 之前几篇文章都是在写图片相关的爬虫,今天写个留言板爬出,为另一套数据分析案例的教程做做准备,作为一个河北人,遵纪守法,有事投诉是必备的技能,那么咱看看我们大河北人都因为 ...

  5. python字符串格式化笔记

    我有个问题:我没有发现%f和%F的区别,希望大神们可以帮我解答下 格式化字符 说明 %c 转换成字符(ASCII 码值,或者长度为一的字符串) %r 用repr()函数进行字符串转化(调试的时候用这个 ...

  6. Java基础12：深入理解Class类和Object类

    更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...

  7. 如何把你的.net程序打包上传到nuget

    写在前面 每个.net开发者都经常用nuget管理自己的程序包,install一个json组件啊,一个工具类什么的,这些都是别人写好的.如果我也写好了一个自己感觉很拿的出手的组件,想轻松的使用nuge ...

  8. Jvm垃圾回收器（基础篇）

    一:概述 在这篇文章中<Jvm运行时数据区>介绍了Java内存运行时区域的各个部分,其中程序计数器.虚拟机栈.本地方法栈,3个区域随着线程的生存而生存的.内存分配和回收都是确定的.随着线程 ...

  9. Linux基础知识第八讲,系统相关操作命令

    目录 Linux基础知识第八讲,系统相关操作命令 一丶简介命令 2.磁盘信息查看. 3.系统进程 Linux基础知识第八讲,系统相关操作命令 一丶简介命令 时间和日期 date cal 磁盘和目录空间 ...

  10. PC逆向之代码还原技术,第三讲汇编中加法的代码还原

    目录 PC逆向之代码还原技术,第三讲汇编中加法的代码还原 一丶汇编简介 二丶高级代码对应汇编观看. 1.代码还原解析: 总结 PC逆向之代码还原技术,第三讲汇编中加法的代码还原 一丶汇编简介 在讲解加 ...