文档章节

AdminLTE Button小结

just4you
 just4you
发布于 2017/07/17 14:47
字数 984
阅读 172
收藏 0

普通的按钮

<button class="btn btn-lg btn-default btn-block">
Default
</button>
css类说明
.btn按钮标志类,显示为按钮,按钮边角为“border-radius:3px”的圆角
.btn-lg按钮的大小,可选值有.btn-lg(large),.btn-sm(small), .btn-xs(x-small),<br>若不设置,按钮大小在lg和sm之间。
.btn-default按钮颜色(灰)<br> 其它可选颜色有:.btn-primary,.btn-success,.btn-info, .btn-danger,.btn-warning等。
.btn-block块状显示<br>设置后,显示按钮时,占据全部空间;不设置时,按钮的大小由其内容决定,可与其他类叠加使用。
.btn-flat显示按钮边角为直角,可与其他类叠加使用。
.disabled显示按钮为不可用,颜色更浅一些。

由图标填充的按钮

<button type="button" class="btn btn-default">
    <i class="fa fa-align-left"></i>
</button>

<i>元素为图标,图标样式可参考:https://adminlte.io/themes/AdminLTE/pages/UI/icons.html

按钮组.btn-group

水平按钮组

按钮组中各个按钮默认水平一行显示,圆角,不同颜色,内容为文字。

<div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-danger">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

垂直按钮组

按钮组中各个按钮垂直显示,直角,内容为图标。

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-left"></i></button>
    <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-center"></i></button>
    <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-right"></i></button>
</div>

按钮带下拉选项的按钮组

<!--定义一个按钮组-->
<div class="btn-group">
    <!--提示用按钮,无点击效果-->
    <button type="button" class="btn btn-info">Action</button>
    <!--点击出下拉菜单的按钮,位于提示按钮之后-->
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        <!--span显示为“向下的三角图标-->
        <span class="caret"></span>
        <!--.sr-only是 除了屏幕阅读器外,其他设备上隐藏该元素,这个是用于屏幕阅读器的,帮助残障人士更好的访问网站。-->
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <!--定义下拉菜单-->
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
元素说明
.dropdown-toggle用于下拉按钮,添加后,下拉按钮显示为圆角,与“提示用按钮”配合,样式更加协调
data-toggle="dropdown"必须设置,点击后,出下拉菜单的效果
class="caret"使下拉按钮中的span显示为“向下的三角图标”
class="dropdown-menu"下拉菜单,必须将ul设置为此样式

位于input输入框之后的按钮

<!--必须是按钮组-->
<div class="input-group margin">
    <!--input框必须添加.form-control样式,否则与其后的按钮之间会有空隙-->
    <input type="text" class="form-control">
    <!--由span.input-group-btn包裹按钮,也可使用div,但是必须有.input-group-btn-->
    <span class="input-group-btn">
        <button type="button" class="btn btn-info btn-flat">Go!</button>
    </span>
</div>

调整div.input-group中input元素和span元素的前后排序,可更改input输入框与按钮的排序。

位于input输入框之前的按钮,并有点击下拉效果。

<div class="input-group">
    <!--input输入框按钮-->
    <div class="input-group-btn">
        <!--注意与上例中“下拉按钮组”的区别,这里用一个button显示了文字及下拉图标,而“下拉按钮组”中使用了两个button-->
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action 
            <!--下拉图标-->
            <span class="fa fa-caret-down"></span>
        </button>
        <!--下拉菜单项的定义与“下拉按钮组”相同-->
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <!--分隔线-->
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
    <input type="text" class="form-control">
</div>

APP图标效果的按钮,并带有角标span.badge

<!--App样式按钮.btn-app-->
<a class="btn btn-app">
    <!--按钮中显示的图标-->
    <i class="fa fa-edit"></i>
    <!--图标下显示的文字-->
    Edit
</a>
<a class="btn btn-app">
    <!--角标,黄色,内容:3-->
    <span class="badge bg-yellow">3</span>
    <i class="fa fa-bullhorn"></i> Notifications
</a>

图标样式可参考:https://adminlte.io/themes/AdminLTE/pages/UI/icons.html

按钮带提示信息

<button type="button" data-toggle="tooltip" data-original-title="点击修改" class="btn btn-info btn-xs" onclick="">修改</button>

© 著作权归作者所有

just4you
粉丝 0
博文 14
码字总数 9551
作品 0
石家庄
私信 提问
ASP.Net Core Razor+AdminLTE 小试牛刀

AdminLTE   一个基于 bootstrap 的轻量级后台模板,这个前端界面个人感觉很清爽,对于一个大后端的我来说,可以减少较多的时间去承担前端的工作但又必须去独立去完成一个后台系统开发的任务...

山治先生
2018/11/30
0
0
AdminLTE 中文后台模板

在AdminLTE-2.3.6 原有的基础上,右侧页面改为ajax无刷新加载,增加了后台首页、表单页、列表页等示例页面。 AdminLTE介绍: AdminLTE 是受欢迎的开源的管理仪表盘和控制面板的WebApp模板。它...

lizole
2016/09/23
11
0
免费的Bootstrap Admin Template并具有教学

说明 作为程序员最近一直在写页面,直接用Boostrap一直感觉虽然像搭建积木一样,但是整体风格总是很奇怪,随即随便搜搜发现AdminLTE。之前搜索过这个免费的模板,但当时没有教学,并且个人对...

抢小孩糖吃
2015/11/15
0
0
最值得拥有的免费Bootstrap后台管理模板

在PHP开发项目中,后台管理因为面向群体相对比较固定,大部分以实现业务逻辑和功能。使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台,节约前端开发的时间。下面P...

52117354
2018/09/11
0
0
张雷 2016-03-31 工作日报

1.熟悉AdminLTE 前台框架 2.AdminLTE下i18n demo 3.AdminLTE下datatable demo

A877490
2016/03/31
2
0

没有更多内容

加载失败,请刷新页面

加载更多

基础工具类

package com.atguigu.util;import java.sql.Connection;import java.sql.SQLException;import java.util.Properties;import javax.sql.DataSource;import com.alibaba.druid......

architect刘源源
今天
43
0
P30 Pro劲敌!DxO官宣新机:排行榜又要变

5月26日晚间,DxOMark官方推特预告,将在5月27日公布一款新机型的DxOMark评分,猜猜是哪款? 网友猜想的机型有:红米K20、谷歌Pixel 3a、索尼Xperia 1、诺基亚9 PureView等。 DxOMark即将公布...

linux-tao
昨天
15
0
Ubuntu18.04.2窗口过小不能自适应(二次转载)

解决Ubuntu在虚拟机窗口不能自适应 2018年09月06日 16:20:08 起不了名儿 阅读数 855 此博文转载:https://blog.csdn.net/nuddlle/article/details/77994080(原地址) 试了很多办法这个好用 ...

tahiti_aa
昨天
2
0
死磕 java同步系列之CountDownLatch源码解析

问题 (1)CountDownLatch是什么? (2)CountDownLatch具有哪些特性? (3)CountDownLatch通常运用在什么场景中? (4)CountDownLatch的初始次数是否可以调整? 简介 CountDownLatch,可以...

彤哥读源码
昨天
6
0
Nginx提供下载apk服务

有时候我们可能需要提供文件或者其他apk下载链接,通过 nginx 配置可以很简单地实现。 server {    listen 80;    server_name download.xxx.com;    root app;    locati...

Jack088
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部