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. BBS论坛（三十一）

    31.帖子加精和取消加精功能完成 (1)apps/models.py class HighLight(db.Model): __tablename__='highlight_post' id = db ...

  2. SpringCloud(7)---网关概念、Zuul项目搭建

    SpringCloud(7)---网关概念.Zuul项目搭建 一.网关概念 1.什么是路由网关 网关是系统的唯一对外的入口,介于客户端和服务器端之间的中间层,处理非业务功能 提供路由请求.鉴权.监控. ...

  3. JDK1.8源码(三)——java.util.HashMap

      什么是哈希表? 在讨论哈希表之前,我们先大概了解下其他数据结构在新增,查找等基础操作执行性能 数组:采用一段连续的存储单元来存储数据.对于指定下标的查找,时间复杂度为O(1):通过给定值进行查找, ...

  4. 纽约工作日志流水账 Day 2

    今天本来想一觉睡到早上7点,结果凌晨2点30就行了,然后就各种睡不着了. 挣扎到5点,饿的不行,就起来找东西吃,发现冰箱里东西真不少. 8点半,开始和亢爷做早饭,自制俩汉堡,样子略丑, 味道还不错.这 ...

  5. 道路运输车辆卫星定位系统JT/T808服务实现和压测

    在工作上的需要接触道路运输车辆卫星定位系统相关应用,由于自己对网络服务的编写比较感兴趣,所以利用空闲时间实现了JT/T808的一些协议和相关服务(不得不说这种协议的设计在解释的确导致性能上的损耗,特别 ...

  6. centos7下vim8.1的编译安装教程

    之前安装YouCompleteMe的时候遇到vim版本不兼容的问题,看网上说是需要将vim版本提升到8.0及以上,然后就开始安装最新版本的vim,安装过程中的遇到了不少问题主要集中在配置方面和缺少插件 ...

  7. leetcode — binary-tree-maximum-path-sum

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

  8. golang - gob与rpc

    今天和大家聊聊golang中怎么使用rpc,rpc数据传输会涉及到gob编码,所以先讲讲gob,别担心,就算你完全没有接触过gob与rpc,只要知道rpc的中文是远程过程调用,剩下的我都能给你讲明白( ...

  9. 我们知道CDN护航了双11十年，却不知道背后有那么多故事……

    情不知如何而起,竟一往情深.恰如我们.十年前,因为相信,所以看见.十年后,就在眼前,看见一切. 当2018天猫双11成交额2135亿元的大屏上,打出这么一段字的时候,参与双11护航的阿里云CDN技术掌 ...

  10. Django 系列博客（九）

    Django 系列博客(九) 前言 本篇博客介绍 Django 模板的导入与继承以及导入导入静态文件的几种方式. 模板导入 模板导入 语法:``{% include '模板名称' %} 如下: < ...