按钮

最新推荐文章于 2022-11-07 22:58:00 发布
最新推荐文章于 2022-11-07 22:58:00 发布
阅读量275 收藏
点赞数
分类专栏： bootstrap学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yszbrzdd/article/details/82714840
版权

代码段：

<!DOCTYPE html> 
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
         <!-- 引入 Bootstrap --> 
    <script src="js/jquery/3.3.1/jquery.min.js"></script> 
    <link href="css/bootstrap/3.3.7/bootstrap.min.css" rel="stylesheet"> 
    <script src="js/bootstrap/3.3.7/bootstrap.min.js"></script>  
    <script src="js/holder.min.js"></script> 
    <style>
        .container{
            background:#f0f0f0;
        }
        .row{
            margin-bottom:15px;
            
        }
        
    </style>
        <script>
      
            $('.close').click(function(){
                $(this).parent().hide();
            });
        </script>
        
   
    </head>
    <body>
        <div class="container">
            <h1 class="page-header">全局css样式</h1>
            <div class="row">
                <!--<div class="col-md-4">
                    <img src="holder.js/100x100" width="100%" class="img-thunbnail">
                </div> -->
                <div class="col-xs-4">
                    <img src="holder.js/100x100" width="100%" class="img-rounded">
                </div>
                 <div class="col-xs-4">
                    <img src="holder.js/100x100" width="100%" class="img-circle">
                </div>
                <div class="col-xs-4">
                    <img src="holder.js/100x100" width="100%" class="img-thunbnail">
                </div>
            </div>
            <div class="row">
                <!--<div class="col-md-4">
                    <img src="holder.js/100x100" width="100%" class="img-circle">
                </div> -->
                <div class="col-xs-4">
                    <img src="holder.js/100x100" width="100%" class="mg-thunbnail">
                </div>
                 <div class="col-xs-4">
                    <img src="holder.js/100x100" width="100%" class="img-circle">
                </div>
                <div class="col-xs-4">
                    <img src="holder.js/100x100" width="100%" class="">
                </div>
            </div>
            <div class="row">
                <!--<div class="col-md-4">
                    <img src="holder.js/100x100" width="100%" class="img-circle">
                </div> -->
                <div class="col-xs-4">
                    <img src="holder.js/100x100" width="100%" class="img-circle">
                </div>
                 <div class="col-xs-4">
                    <img src="holder.js/100x100" width="100%" class="img-circle">
                </div>
                <div class="col-xs-4">
                    <img src="holder.js/100x100" width="100%" class="img-circle">
                </div>
            </div>
            <p class="text-muted">balabalabala</p>
            <h1 class="bg-primary">balabalabala
                <span class="close">&times;</span>
            </h1>
            <h6 class="text-success">balabalabala</h6>
            <p class="bg-info">balabalabala
                <button class="btn btn-primary pull-right btn-xs">更多<span class="caret"></span></button><!--    
                .btn-xs:超小尺寸；
                .btn-sm:小按钮;
                .btn-lg:大按钮;
                .pull-right:向右浮动;
                .clearfix:清除浮动;
                -->
                
            </p>
            <p class="text-warning show">balabalabala</p>
            <!--
                .hidden:隐藏内容;
                .show:显示内容;
            -->
            <p class="text-danger">balabalabala</p>
  

      </div>
        <div class="container">
            <h1 class="page-header">组件</h1>
            <span class="glyphicon glyphicon-cloud" style="font-size:15px"></span>
            <!--字体组件，改变大小，改变颜色 -->      
            <button class="btn btn-primary btn-xs">更多<span class="
glyphicon glyphicon-triangle-right"></span></button>  
            <button class="btn btn-primary btn-xs">更多<span class="
glyphicon glyphicon-triangle-left"></span></button>  
            <button class="btn btn-primary btn-xs">更多<span class="
glyphicon glyphicon-triangle-top"></span></button>  
            <button class="btn btn-primary btn-xs">更多<span class="
glyphicon glyphicon-triangle-bottom"></span></button>  
            <!--下拉菜单-->
            <div class="drop-down">
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">更多课程<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">周一事项</li>
                    <li>aaa</li>
                    <li class="disabled">aaa</li>
                    <li class="divider"></li>
                    <li class="dropdown-header">周二事项</li>
                    <li>aaa</li>
                
                </ul>
            
            </div>
            <h4 class="page-geader">按钮组,按钮工具箱</h4>
            <!--按钮工具箱-->
            <div class="btn-toolbar">
            <div class="btn-group btn-group-sm">
                <button class="btn btn-danger"></button>
                <button class="btn btn-danger"></button>
                <button class="btn btn-danger"></button>
                <button class="btn btn-danger"></button>
            
            </div>
            
            <div class="btn-group">
                <button class="btn btn-danger"></button>
                <button class="btn btn-danger"></button>
                <button class="btn btn-danger"></button>
                <button class="btn btn-danger"></button>
            
            </div>
            
            <div class="btn-group">
                <button class="btn btn-danger"></button>
                <button class="btn btn-danger"></button>
                <button class="btn btn-danger"></button>
                <button class="btn btn-danger"></button>
            
            </div>
            </div>
            <!--垂直排列-->
            <div class="btn-group btn-group-vertical">
                <button class="btn btn-danger"></button>
                <button class="btn btn-danger"></button>
                <button class="btn btn-danger"></button>
                <button class="btn btn-danger"></button>
            
            </div>
            <!--两端对齐-->
            <div class="btn-group btn-group-justified">
 


               <div class="btn-group">
                <button class="btn btn-danger"></button>
                </div>
                <div class="btn-group">
                <button class="btn btn-primary"></button>
                </div>
                <div class="btn-group">
                <button class="btn btn-success"></button>
                </div>
                <div class="btn-group">
                <button class="btn btn-info"></button>
                </div>
            
            </div>
            
            
            <!--分裂式按钮下拉菜单-->
            <div class="btn-group">
                <button class="btn btn-default">default</button>
                <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">周一事项</li>
                    <li>aaa</li>
                    <li class="disabled">aaa</li>
                    <li class="divider"></li>
                    <li class="dropdown-header">周二事项</li>
                    <li>aaa</li>
                
                </ul>
            </div>
            
            <h3 class="page-header">表单</h3>
            <!--表单-->
            <!--
                将整个表单禁用掉，只需要在表单外面加上
                <fieldset disabled>
                    <legend>balabala</legend>
                </fieldset>
            -->
            <div class="">
            <form class="form-horizontal"><!-- class="form-inline" 表单处于一行-->
                <div class="form-group">
                    <label class="col-xs-2 control-label">用户名:</label>
                    <div class="col-xs-10">
                        <input type="text" class="form-control" placeholder="usename">
                        <!--
                        
                        <input class="text" disabled>禁用
                        <p class="form-control-static">text框变成字后会飘上去，所以字体加样式</p>
                        
                        -->
                    </div>
                </div>
                <div class="form-group has-success has-feedback"><!--三种颜色.has-success
                                                                                    .has-warning
                                                                                    .has-error
                                                                                    右侧小图标:.has-feedback
                                                                                    可通过添加<span>添加文本图标
                                                                                -->
                    <label class="col-xs-2 control-label">密码:</label>
                    <div class="col-xs-10">
                        <input type="password" class="form-control input-sm"><!--
                                表单框大小：.input-lg
                                                      .input-sm
                        -->
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                        <p class="help-block">这是一段描述</p>



                    </div>
                    
                    
                </div>
                
                <div class="form-group">
                    <div class="col-xs-10 col-xs-offset-2">
                        <input type="submit" value="ok" class="btn btn-primary">
                        <input type="reset" value="cancle" class="btn btn-danger">
                    </div>
                </div>
                
                <div class="form-group">
                    <label>留言:</label>
                    <textarea class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <label>城市:</label>
                    <select class="form-control">
                        <option>北京</option>
                        <option>北京</option>
                        <option>北京</option>
                    </select>
                
                </div>
                <!--多选单选-->
                <div class="form-group">
                    <label>爱好:</label>
                    <div><!--选项放在一行.checkbox-inline-->
                        <label class="checkbox-inline"><input type="checkbox"></label>
                        <label class="checkbox-inline"><input type="checkbox"></label>
                        <label class="checkbox-inline"><input type="checkbox"></label>
                    </div>
                    <!--name相同：单选 -->
                    <label>单选:</label>
                    <div class="radio"><!--    .radio-inline    -->
                        <label><input type="radio" name="1"></label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="1"></label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="1"></label>
                    </div>
                </div>
                
                <!--文件上传-->
                <div class="form-group">
                    <label>文件上传：</label>
                    <input type="file">
                </div>
                
                
            </form>
            
            </div>
        </div>
    </body>
</html>

实现效果：

按钮

次次皮
关注
专栏目录
Bootstrap 按钮的尺寸
歪脖先生的博客
05-08 2388
按钮的尺寸 需要让按钮具有不同尺寸吗？Bootstrap为按钮提供了 3 个尺寸类，可以获得不同尺寸的按钮。如果希望比默认按钮大一些，使用 .btn-lg 类；如果希望比默认按钮小一些，使用 .btn-sm或.btn-xs 类。如： <p> <buttontype="button"class="btn btn-primary btn-lg">Larg...
BootStrap样式笔记
q_1092535160的博客
05-06 953
bootstrap中的居左和居右 1、pull-left和pull-right 2、text-left、text-center和text-right 一点点更新
Bootstrap常见组件的类名-CSS
qq_59185329的博客
08-24 386
Bootstrap常见组件的类名-CSS
BootStrap-CSS样式_排版_按钮
LoveyourselfJiuhao的博客
12-01 3176
BootStrap按钮样式、类型、代码、显示效果 按钮最好使用button类型的，以免垮浏览器或一些其他操作存在兼容性问题。 1. 选项按钮 btn btn-default样式：渐变标准灰色，默认按钮 btn btn-primary样式：蓝色，提供额外的视觉感，可在一系列按钮中指出主要操作 btn btn-success样式：浅蓝色，可作为默认样式的代替样式 btn btn-info样...
响应式前端框架Bootstrap系列（7）按钮
@黄小泽的个人博客
01-12 3290
按钮是前端最常用到的组件，bs提供有关按钮的样式有分为独立按钮、按钮组和按钮插件三种。 独立按钮，可用于, , 或 元素上。 （1）颜色样式： .btn-default：默认/标准按钮 .btn-primary：主要 .btn-success：成功 .btn-info：信息 .btn-warning：警告 .btn-danger：危险 演示代码： 默认按钮 原始按钮
Bootstrap学习入门（9）--bootstrap中的按钮
f45056231p的博客
07-07 1480
Bootstrap学习入门（9）--bootstrap中的按钮在任何的网页中, 我们都会经常性的使用一些按钮, 不管是那种展现方式的. 一个好的样式按钮, 才能给网站带来不一样的美感. 下面看一下bootstrap中的按钮吧. Let's go!!1、在bootstrap中, 按钮(button)有不同的六种方式. 默认的button的样式是: btn. 这个是必要的样式. 还有其他的六种不同方式...
SwitchButton 开关按钮的多种实现方式源码
04-15
在Android开发中，`SwitchButton`（也称为开关按钮或切换按钮）是一种常见的UI元素，用于用户在两种状态之间进行切换。它通常表现为一个滑动开关，用户可以通过滑动来改变其状态，如开启或关闭某项功能。本文将详细...
非常精美的几千个LabVIEW按钮图标
11-06
这些图标可能包括但不限于：启动按钮、停止按钮、复位按钮、配置按钮、帮助按钮、保存按钮、加载按钮等，覆盖了日常开发中的各种功能需求。蓝色作为图标颜色，通常与科技、现代和专业相关联，因此这些图标特别适合用...
C#圆形按钮，非常漂亮动态~~
03-05
标题“C#圆形按钮，非常漂亮动态~~”暗示我们将讨论如何在C#中创建一个具有独特视觉效果的圆形按钮，这个按钮不仅美观，而且具有动态特性。描述中提到的“有源代码和例子”，意味着我们有机会通过实际的代码来学习和...
MCGS 按钮美图
06-08
在这个名为“MCGS 按钮美图”的压缩包中，我们可以找到一系列设计精美的按钮图片资源，这些资源专为优化MCGS界面的美观度而准备。 在设计MCGS界面时，按钮是不可或缺的元素之一，它们通常用于触发不同的操作或功能...
C#圆形按钮，非常漂亮动态
06-02
在C#编程中，开发人员有时需要为用户界面创建独特且吸引人的元素，例如圆形按钮。"C#圆形按钮，非常漂亮动态"这个标题描述了一个特殊的按钮控件，它不仅具有圆形的外观，而且可能还包含一些动态效果，使得交互体验...
Bootstrap 按钮样式
一直专注于互联网
12-27 411
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：以下样式可用于&lt;a&gt;, &lt;button&gt;, 或 &lt;input&gt; 元素上：   类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary...
Bootstrap系列之按钮（Buttons）
热门推荐
老__L的博客
05-28 1万+
按钮（Buttons）
Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态 、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
m0_69034993的博客
11-07 5426
使用.btn-outline-*类可以没置按钮的边框，*可以从prirnary、secondary、success、danger.warning、info、light和dark中进行选择。Bootstrap提供了btn来定义按钮，btn定义了基本的按钮样式类。Bootstrap提供了.btn-group-lg，.btn-group-sm类作用在.btn-group类的容器，可以控制按钮组下的每个子按钮，实现样式缩放。使用.btn-lg、.btn-sm类样式，可分别实现大规格按钮、小规格按钮的定义。
Bootstrap 按钮详解
读万卷书，行万里路
04-27 6887
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示： 以下样式可用于&lt;a&gt;, &lt;button&gt;, 或 &lt;input&gt; 元素上： class 说明 .btn 添加基本样式 .btn-default 默认/标准按钮 .btn...
零基础Bootstrap入门教程(11)--按钮与按钮组
程序员大阳
02-21 2048
本文目录1. 概述2. 按钮的使用2.1 设置Bootstrap按钮2.2 调整按钮大小2.3 调整按钮颜色样式3. 按钮组的使用3.1 使用按钮组3.2 调整按钮组的大小3.3 调整按钮组方向4. 小结 1. 概述 按钮可以说是使用频率最高的交互组件之一了，Bootstrap框架对按钮也非常重视，提供了多种样式强化类。同时还提供了按钮组，可以组合使用按钮，更加方便。 2. 按钮的使用 2.1 设置Bootstrap按钮 在Bootstrap框架下，只需要为按钮添加.btn类，然后添加.btn-defaul
SpringBoot源码学习之路（九、Web实战详解（RESTful API与Thymeleaf引擎模板实现CRUD） ）
.... 永远年轻，永远热泪盈眶
07-23 7437
RESTful API实现员工列表 一、RESTful API与普通API对比。 我们要实现对于员工对象（emp）进行CRUD操作。RESTful架构需要满足： ①、URI： /资源名称/资源标识。 ②、 HTTP请求方式（Get、Post、Put、Delete）区分对资源CRUD操作。 对比： URL 普通API（uri来区分操作） Restful API（用...
按钮项 —【按钮(文本)的样式】
Zyl_CN的博客
05-24 1602
&lt;button class="btn btn-info"&gt;Like&lt;/button&gt; 给予引用类的元素添加默认的按钮样式注意以下的样式，要在btn类后使用btn-default 平常的样式btn-primary 主要按钮样式btn-success 成功按钮样式btn-info    信息按钮样式btn-warning 警告按钮样式btn-danger  危险按钮样式btn-...
Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式
weixin_34343000的博客
03-17 2503
  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> ...
Bootstrap教程：按钮与按钮组详解
"Bootstrap每天必学之按钮组工具栏，介绍Bootstrap框架的按钮组组件，包括源码位置、使用方法和基本结构。" Bootstrap是一个流行的前端开发框架，它提供了丰富的预定义样式、组件和JavaScript插件，使得创建响应式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值