<Bootstrap> 学习笔记五. 按钮组的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
    <script src="bootstrap/js/jquery-3.2.1.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container-fluid">
    <!--按钮的颜色大小-->
    <button class="btn btn-primary btn-xs">增加</button>
    <button class="btn btn-warning btn-sm">增加</button>
    <button class="btn btn-success btn-md">增加</button>
    <input class="btn btn-danger btn-lg" type="button" value="删除">
    <a class="btn btn-default" href="#">查找</a><br>

    <!--按钮组-->
    <div class="btn-group">
        <button class="btn btn-success">增加</button>
        <button class="btn btn-success">增加</button>
        <button class="btn btn-success">增加</button>
    </div>
</div>
</body>
</html>

原文地址:https://www.cnblogs.com/ZeroHour/p/8288784.html

时间: 2024-10-12 14:46:20

<Bootstrap> 学习笔记五. 按钮组的使用的相关文章

bootstrap学习笔记&lt;五&gt;

表单 bootstrap为表单提供三种样式:默认表单,水平表单,内联表单. <form class="form-horizontal" role="form"> <!--默认表单--> </form> <!--分割线--> <form class="form-horizontal" role="form"> <!--水平表单--> </form>

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

bootstrap学习笔记一: bootstrap初认识,hello bootstrap(下)

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

Bootstrap&lt;基础十五&gt; 输入框组

Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. 向 .form-control 添加前缀或后缀元素的步骤如下: 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中. 接着,在相同的 &

java之jvm学习笔记五(实践写自己的类装载器)

java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类装载器和安全管理器是可以被动态扩展的,或者说,他们是可以由用户自己定制的,今天我们就是动手试试,怎么做这部分的实践,当然,在阅读本篇之前,至少要阅读过笔记三. 下面我们先来动态扩展一个类装载器,当然这只是一个比较小的demo,旨在让大家有个比较形象的概念. 第一步,首先定义自己的类装载器,从Clas

bootstrap学习笔记一 登录水平表单

先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="UserName">用户名</label> <div class="controls"> <input type="tex

jQuery源码学习笔记五 六 七 八 转

jQuery源码学习笔记五 六 七 八 转 Js代码   <p>在正式深入jQuery的核心功能选择器之前,还有一些方法,基本都是数组方法,用于遴选更具体的需求,如获得某个元素的所有祖选元素啦,等等.接着是其缓存机制data.</p> <pre class="brush:javascript;gutter:false;toolbar:false"> //@author  司徒正美|なさみ|cheng http://www.cnblogs.com/ru

laravel3学习笔记(五)

原作者博客:ieqi.net ==================================================================================================== 模型 在MVC模式的Web框架中,模型Model作为数据的抽象而存在,在Model层中,我们放置直接对数据的各种处理和操作,然后将抽象过的数据操作暴露为Model类给控制器,这样,在控制器中我们就不必拘泥于处理具体数据现实的各种细节中了,比如数据库如何连接,数据的类型

Caliburn.Micro学习笔记(五)----协同IResult

Caliburn.Micro学习笔记(五)----协同IResult 今天说一下协同IResult 看一下IResult接口 /// <summary> /// Allows custom code to execute after the return of a action. /// </summary> public interface IResult { /// <summary> /// Executes the result using the specif