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. Synchronized的那些事

    在上一篇博客中,我"蜻蜓点水"般的介绍了下Java内存模型,在这一篇博客,我将带着大家看下Synchronized关键字的那些事,其实把Synchronized关键字放到上一篇博客 ...

  2. 【Kafka专栏】-Kafka从初始到搭建到应用

    一.前述 Kafka是一个分布式的消息队列系统(Message Queue). kafka集群有多个Broker服务器组成,每个类型的消息被定义为topic. 同一topic内部的消息按照一定的key ...

  3. 查询运营商的ip段

    查询运营商的ip段 所有的IP地址都是通过国际组织NIC(Network Information Center)统一分配的,目前世界上有三个这样的网络信息中心: InterNic: 负责美国及其他地区 ...

  4. leetcode — path-sum

    /** * Source : https://oj.leetcode.com/problems/path-sum/ * * * Given a binary tree and a sum, deter ...

  5. 补习系列(7)-springboot 实现拦截的五种姿势

    目录 简介 姿势一.使用 Filter 接口 1. 注册 FilterRegistrationBean 2. @WebFilter 注解 姿势二.HanlderInterceptor 姿势三.@Exc ...

  6. jumpserver篇--安装

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

  7. 痞子衡嵌入式：飞思卡尔i.MX RT系列MCU启动那些事（2）- Boot配置(BOOT Pin/eFUSE)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的Boot配置. 在上一篇文章 Boot简介 里痞子衡为大家介绍了Boot基本原理以及i.MXRT Bo ...

  8. Aooms_微服务基础开发平台实战_002_工程构建

    一.关于框架更名的一点说明 最近在做年终总结.明年规划.还有几个项目需要了结.出解决方案,事情还比较多,死了不少脑细胞,距离上一篇文章发出已经过了3天,是不是有些人会认为我放弃了又不搞了,NONO,一 ...

  9. Orchard学习资料，适合入门上手

    名词解释: http://www.cnblogs.com/esshs/archive/2011/06/01/2067501.html   Orchard如何工作: http://www.cnblogs ...

  10. 你需要一点点CIL

    1.当我们程序集中有大量反射的时候,性能往往会下降很快.我们目的很明确 如何解决反射造成的这些影响,其中之一个正确且高逼格的做法是 使用 CIL指令去实现.如何实现需要我们拥有若干基础知识.知道 CI ...