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. Oracle绝对秒数转换为时间戳

    一般Oracle得到的时间格式为: 1970-01-05 01:23:56.297 为了计算两个时间的差值: 1970-01-05 01:23:56.297 与 1970-01-05 01:24:57 ...

  2. 初探React与D3的结合-或许是visualization的新突破？

    自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了. d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具,是近几年 ...

  3. redis 系列9 对象类型(字符串，哈希，列表，集合，有序集合)与数据结构关系

    一.概述 在前面章节中,主要了解了 Redis用到的主要数据结构,包括:简单动态字符串.链表(双端链表).字典.跳跃表. 整数集合.压缩列表(后面再了解).Redis没有直接使用这些数据结构来实现键值 ...

  4. Unity实现c#热更新方案探究（二）

    转载请标明出处:http://www.cnblogs.com/zblade/ 一.IOS对DLL热更新的禁止 紧接上文,继续对C#热更新的研究.上文中,已经说了如何基于appDomain来实现对DLL ...

  5. 在AspNetCore中使用极验做行为认证

    先上效果图 极验的流程 极验官方文档地址 https://docs.geetest.com/install/deploy/server/csharp 简单说明一下极验的验证流程 引用官方的图片 向服务 ...

  6. List-ArrayList集合基础增强底层源码分析

    List集合基础增强底层源码分析 作者:Stanley 罗昊 [转载请注明出处和署名,谢谢!] 集合分为三个系列,分别为:List.set.map List系列 特点:元素有序可重复 有序指的是元素的 ...

  7. consistent hash(一致性哈希算法)

    一.产生背景 今天咱不去长篇大论特别详细地讲解consistent hash,我争取用最轻松的方式告诉你consistent hash算法是什么,如果需要深入,Google一下~. 举个栗子吧: 比如 ...

  8. C++STL模板库关联容器之set/multiset

    目录 一丶关联容器简介.set/multiset 二丶演示代码. 一丶关联容器简介.set/multiset 我们的序列容器,底层都是线性表构成的. 比如 vector list deque. 关联容 ...

  9. 查看服务器运行多少个ASP.NET Core程序

    有时候,我们会想知道某台机器上面跑了什么程序. 当程序部署到IIS上面的时候,我们只需要打开IIS一看,就知道有多少个站点在运行了. 当我们在CentOS上面部署的时候,就没那么的直观了. 当然对于熟 ...

  10. [Redux] redux之combineReducers

    combineReducers combineReducer 是将众多的 reducer 合成通过键值映射的对象,并且返回一个 combination 函数传入到 createStore 中 合并后的 ...