bootstrap学习笔记细化(按钮)

最新推荐文章于 2024-06-14 15:02:13 发布

donggu5275

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量134

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/linjiaxiaomeiainia/p/7018846.html

版权

button:btn 圆角灰色按钮

button:btn btn-default 圆角灰色边框按钮

button:btn btn-success 绿色

button:btn btn-primary 蓝色

button:btn btn-info 浅蓝

button:btn btn-warning 黄色

button:btn btn-danger 红色

button:btn btn-link 链接按钮改

btn-lg,btn-sm 按钮变大，变小

active 按下状态

btn-block 撑满父级，全屏

属性：disabled="disabled"

禁用按钮把链接变成按钮 <a class="btn btn-danger" href="">这是</a>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单2</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
            <button class="btn btn-default btn-lg" >按钮</button>
            <button class="btn btn-success btn-sm" >按钮</button>
            <button class="btn btn-info active" >按钮</button>
            <button class="btn btn-danger btn-block">按钮</button>
            <button class="btn btn-link disabled ="disabled">按钮</button>
            <a class="btn btn-danger" href="">hhh</a>
            <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
            <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    </body>
</html>

源码

效果图片：

转载于:https://www.cnblogs.com/linjiaxiaomeiainia/p/7018846.html

donggu5275

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap学习笔记细化(按钮)

button:btn 圆角灰色按钮 button:btn btn-default 圆角灰色边框按钮 button:btn btn-success 绿色 button:btn btn-primary 蓝色 button:btn btn-info 浅蓝 button:btn btn-warning 黄色 button:btn btn-danger 红色 butto...
复制链接

扫一扫