Bootstrap

最新推荐文章于 2023-09-18 12:26:57 发布
最新推荐文章于 2023-09-18 12:26:57 发布
阅读量239 收藏 2
点赞数
文章标签： bootstrap css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sh2001824/article/details/126410634
版权

一、布局和栅格系统

1.布局

  • container：居中显示

  • container-fluid可以使div宽度扩展到整个宽度（100%显示）

2.栅格系统

 栅格系统一行是12列

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap-grid.min.css">
    <script src="js/bootstrap.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .row {
            height: 50px;
            background-color: #d3d3dd;
            box-sizing: border-box;
        }
        
        .col-md-2 {
            text-align: center;
            line-height: 50px;
        }
        
        .row>li:hover {
            background-color: red;
            text-align: center;
            line-height: 50px;
        }
        
        .row>li:hover .nav {
            display: flex;
        }
        
        .nav {
            width: 400px;
            display: none;
            position: absolute;
        }
        
        .nav .col-md-4:hover {
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul class="row">
            <li class="col-md-2">首页</li>
            <li class="col-md-2">公开课</li>
            <li class="col-md-2">直播课</li>
            <li class="col-md-2">金课</li>
            <li class="col-md-2">免费课程
                <ul class="row nav">
                    <li class="col-md-4">HTML</li>
                    <li class="col-md-4">JQUERY</li>
                    <li class="col-md-4">javascript</li>
                </ul>
            </li>
            <li class="col-md-2">关于我们</li>
        </ul>
    </div>
</body>

</html>

效果：

 二、按钮和按钮组

1.按钮（所以按钮都基于btn）

  • btn-primary：主要按钮
  • btn-secondary：次要按钮
  • btn-success：成功
  • btn-info：信息
  • btn-warning：警告
  • btn-danger：危险
  • btn-dark：黑色
  • btn-light：浅色
  • btn-link：链接
  • btn-block：块级按钮

  • disabled：禁用

  • 注：超链接按钮设置禁用状态，直接设置其disabled属性是不起作用的，需要添加类disabled

以上的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <button type="button" class="btn btn-success btn-lg" disabled>success</button>
    <button type="button" class="btn btn-primary btn-sm">primary</button>
    <button type="button" class="btn btn-secondary">secondary</button>
    <button type="button" class="btn btn-danger">danger</button>
    <button type="button" class="btn btn-warning">warning</button>
    <button type="button" class="btn btn-info">info</button>
    <button type="button" class="btn btn-light">light</button>
    <button type="button" class="btn btn-dark" disabled>dark</button>

    <button type="button" class="btn btn-link">link</button>
    <div class="container">
        <!-- btn-block：设置块级按钮 -->
        <button class="btn btn-success btn-block">块级按钮</button>
    </div>
    <hr>
    <!-- 超链接按钮设置禁用状态，直接设置其disabled属性是不起作用的，需要添加类disabled -->
    <a href="#" class="btn btn-success disabled" aria-disabled="true">a标签</a>
</body>

</html>

以上的效果：

2.按钮组 

  • btn-group：创建按钮组
  • btn-group-lg/sm：设置按钮组的大小
  • btn-group-vertical：创建垂直的按钮组

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <!-- 普通 -->
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary">Left</button>
        <button type="button" class="btn btn-secondary">Middle</button>
        <button type="button" class="btn btn-secondary">Right</button>
    </div>
    <hr>
    <!-- 分隔 -->
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group mr-2" role="group" aria-label="First group">
            <button type="button" class="btn btn-secondary">1</button>
            <button type="button" class="btn btn-secondary">2</button>
            <button type="button" class="btn btn-secondary">3</button>
            <button type="button" class="btn btn-secondary">4</button>
        </div>
        <div class="btn-group mr-2" role="group" aria-label="Second group">
            <button type="button" class="btn btn-secondary">5</button>
            <button type="button" class="btn btn-secondary">6</button>
            <button type="button" class="btn btn-secondary">7</button>
        </div>
        <div class="btn-group" role="group" aria-label="Third group">
            <button type="button" class="btn btn-secondary">8</button>
        </div>
    </div>
    <hr>
    <!-- 下拉列表 横向的 -->
    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>

        <div class="btn-group" role="group">
            <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Dropdown
          </button>
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <a class="dropdown-item" href="#">Dropdown link</a>
                <a class="dropdown-item" href="#">Dropdown link</a>
            </div>
        </div>
    </div>
    <hr>
    <!-- 竖向 -->
    <div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>

        <div class="btn-group" role="group">
            <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Dropdown
          </button>
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <a class="dropdown-item" href="#">Dropdown link</a>
                <a class="dropdown-item" href="#">Dropdown link</a>
            </div>
        </div>
    </div>
</body>

</html>

效果：

 三、导航

  • justify-content-center：创建居中对齐的导航栏
  • justify-content-center：创建居右对齐的导航栏

  • flex-column：创建垂直导航栏

  • nav-tabs：设置tab样式导航栏

  • nav-pills：设置药丸式导航栏

  •  nav-fill：设置两端对齐

以上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <!-- 横向 -->
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
        </li>
    </ul>
    <ul class="nav justify-content-center">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
        </li>
    </ul>
    <ul class="nav justify-content-end">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
        </li>
    </ul>
    <hr>
    <!-- 竖向 -->
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
        </li>
    </ul>
    <hr>
    <!-- tab -->
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
        </li>
    </ul>
    <hr>
    <!-- 药丸 -->
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
        </li>
    </ul>
    <hr>
    <!-- 两端对齐 -->
    <ul class="nav nav-pills nav-fill">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Much longer nav link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
        </li>
    </ul>
</body>

</html>

效果：

四、表单与表单组 

1.表单

  • form-group：独占一行

  • 使用row可以让文字和input在一行

  • form-inline：内联表达

以上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <!-- 独占一行 -->
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <hr>

    <!-- 文字和input在一行 -->
    <form>
        <div class="form-group row">
            <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
            </div>
        </div>
        <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword">
            </div>
        </div>
    </form>
    <hr>

    <!-- 内联 -->
    <form class="form-inline">
        <label class="sr-only" for="inlineFormInputName2">Name</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

        <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
        <div class="input-group mb-2 mr-sm-2">
            <div class="input-group-prepend">
                <div class="input-group-text">@</div>
            </div>
            <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
        </div>

        <div class="form-check mb-2 mr-sm-2">
            <input class="form-check-input" type="checkbox" id="inlineFormCheck">
            <label class="form-check-label" for="inlineFormCheck">
            Remember me
          </label>
        </div>

        <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </form>
</body>

</html>

效果：

 2.表单组

input-group向表单输入框中添加更多的样式，如图标、文本或者按钮

  • input-group-prepend：输入框的的前面添加文本信息
  • input-group-append：输入框的的后面添加文本信息
  • input-group-sm/lg：设置输入框的大小

以上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <!-- 普通 -->
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">@</span>
        </div>
        <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>

    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2">@example.com</span>
        </div>
    </div>

    <label for="basic-url">Your vanity URL</label>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
        </div>
        <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
    </div>

    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text">$</span>
        </div>
        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        <div class="input-group-append">
            <span class="input-group-text">.00</span>
        </div>
    </div>

    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">With textarea</span>
        </div>
        <textarea class="form-control" aria-label="With textarea"></textarea>
    </div>
    <hr>
    <!-- 前面是复选框和单选框 -->
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" aria-label="Checkbox for following text input">
            </div>
        </div>
        <input type="text" class="form-control" aria-label="Text input with checkbox">
    </div>

    <div class="input-group">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="radio" aria-label="Radio button for following text input">
            </div>
        </div>
        <input type="text" class="form-control" aria-label="Text input with radio button">
    </div>
    <hr>
    <!-- 按钮 -->
    <h3>前面</h3>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
        </div>
        <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
    </div>
    <h3>后面</h3>
    <div class="input-group mb-3">

        <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
        </div>
    </div>
</body>

</html>

效果：

五、轮播图 

  • carousel：创建一个轮播
  • carousel-indicators：为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图
  • carousel-inner：添加要切换的图片
  • carousel-item：指定每个图片的内容
  • carousel-control-prev：添加左侧的按钮，点击会返回上一张
  • carousel-control-next：添加右侧按钮，点击会切换到下一张
  • carousel-control-prev-icon：与 .carousel-control-prev 一起使用，设置左侧的按钮
  • carousel-control-next-icon：与 .carousel-control-next 一起使用，设置右侧的按钮
  • slide：切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <style>
        img {
            width: auto !important;
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/bg1.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item">
                <img src="img/bg2.jpg " class="d-block w-100">
            </div>
            <div class="carousel-item ">
                <img src="img/bg3.jpg " class="d-block w-100 ">
            </div>
            <div class="carousel-item ">
                <img src="img/bg4.jpg " class="d-block w-100 ">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </button>
    </div>
</body>

</html>

效果：

 

sh2001824
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap-4.6.2
06-13
bootstrap4下载
datatables——改变buttons按钮组件背景色
weixin_43235307的博客
12-08 650
原先按钮底色为btn-secondary： 现在想将底色改为紫色： 1、找到datatables的js文件（jquery.dataTables.min.js） 查找文件中“btn btn-secondary”的位置： 2、然后将btn-secondary 改为你需要的颜色 比如：改为绿色背景色（btn-success） 3、保存后运行，结果为： ...
BootStrap4：组件
分享日常工作技术
03-29 1670
Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。
Bootstrap 5-按钮
m0_73839298的博客
09-18 847
• btn-outline-light text-dark（浅色，浅白色）• btn-outline-secondary（次要，灰色）• btn-outline-primary（主要，蓝色）• btn-out1ine-success（成功，绿色）• btn-outline-warning（警告，黄色）• btn-outline-danger（危险，红色）• btn-out1ine-info（信息，天蓝色）• btn-out1ine-dark（深色，深绿）• btn-info（信息，天蓝色）
AmazeUI 按钮
一直专注于互联网
02-16 1679
&lt;!doctype html&gt; &lt;html class="no-js"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name=&
Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态 、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
m0_69034993的博客
11-07 4410
使用.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
11-20
bootstrap
Bootstrap视频网站模板
05-28
Bootstrap视频网站模板
bootstrap.css
最新发布
01-27
bootstrap的css文件
Bootstrap期末作品
12-18
整体运用了栅格系统布局，局部应用了固定到顶部的导航栏组件，下拉菜单组件，轮播图插件，以及Bootstrap自带的按钮样式。希望通过学习Bootstrap从这种布局的思想，实现的方式中加深对CSS html 的理解
Bootstrap3.3.7
11-17
Bootstrap是最受欢迎的HTML、CSS和JS的前端开发框架，用于开发响应式布局、移动设备优先的WEB项目。它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式...此zip文件是Bootstrap3.3.7资源文件，内含css/fonts/js
Bootstrap table
12-06
Bootstrap Table是基于Bootstrap的轻量级表格插件，只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.jsbootstrap-4.6.2下载
Bootstrap 3 综合实战项目教程，Web前端响应式开发项目实战视频教程带源码资源
02-08
Bootstrap 3 综合实战项目教程，Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程，Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程，Web前端响应式开发项目...
Bootstrap3通用商城模板
05-28
Bootstrap3通用商城模板是一款响应式的电商网站模板
Bootstrap系列之按钮（Buttons）
热门推荐
老__L的博客
05-28 1万+
按钮（Buttons）
浅看Bootstrap组件之按钮
weixin_45846241的博客
05-10 551
普通的按钮 <button>普通的按钮</button> <input type="button" value="input按钮"> <!-- 提交按钮必须要放在form表单中才有提交功能，否则就是普通按钮 --> <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮"> 效果： Bootstrap按钮 <!-- 蓝底白字 --> <b
html按钮的ui,button按钮 - 基础 - H-ui前端框架官方网站
weixin_36473464的博客
06-19 805
按钮我是一个按钮我诞生到世界上是这样的每个人都在使用他但每个人都不喜欢他默认的样子很多人都在赋予他新的外观和意义直到今天，从没停止……任何赋予.btn类的页面元素都会显示方角按钮样式。通常用在 和 页面元素上。追加.radius就会显示css3圆角效果。按钮class=""描述btn btn-default默认按钮btn btn-default radius圆角默认按钮btn btn-defau...
BootStrap笔记-按钮相关
IT1995的博客
01-17 1394
程序运行截图如下： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值