31.2 Bootstrap样式：标签使用（a标签、button按钮、img标签、 表格、表单）

最新推荐文章于 2023-04-11 09:00:00 发布
最新推荐文章于 2023-04-11 09:00:00 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： 02 javaee
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Birdmotianlun/article/details/109407253
版权
HTML的常用标签HTML元素：HTML元素是指从开始标签到结束标签的所有的代码，而其中开始标签到结束标签之间的内容称为元素内容HTML标签属性
摘要由CSDN通过智能技术生成

目录

1 Bootstrap样式

1.1 列：a标签、button按钮、img标签的样式使用

1.2 列： 表格、表单的全局样式

1 Bootstrap样式

查看Bootstrap文档 全局样式

常用样式 ： 

 * 图片：
        *  class="img-responsive"：图片在任意尺寸都占100%
        *  图片形状
            *  <img src="..." alt="..." class="img-rounded">：方形
            *  <img src="..." alt="..." class="img-circle"> ： 圆形
            *  <img src="..." alt="..." class="img-thumbnail"> ：相框

1.1 列：a标签、button按钮、img标签的样式使用

<!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">
    <title>03_Bootstrap全局样式</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    1 a标签&nbsp; input标签&nbsp; button标签<br>
    <a class="btn btn-default" href="#">Link</a>
    <input class="btn btn-default" type="button" value="btn">
    <input class="btn btn-default" type="submit" value="submit">
    <button class="btn btn-default" type="submit">Button</button><hr>
    2 各种but样式<br>
    <button type="button" class="btn btn-default">
最低0.47元/天 解锁文章
birdlun
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap-table表格插件——自定义超链接列（＜a＞标签）实现
ycsss的博客
09-20 4249
目录一、问题描述二、解决方案1. 使用bootstrap-table的events注册事件2. 当页码或单页记录数改变时，重新设置每个链接的href三、具体实现1. 下载Bootstrap-table表格及汉化插件并引入2. bootstrap-table基础使用方法HTMLJS四、参考博客 一、问题描述 工作的时候遇到一个需求，将一个原先只返回TOP10数据的表格改为显示全部数据并添加分页功能。因此打算使用bootstrap-table插件实现前端分页。 这个表格有一列是超链接列，其href要根据每一条数
bootstrap学习（四）
dengfengling999的博客
11-26 856
静态控件用在修改页面的id属性，只让用户看到不让他修改：还可以用readOnly。添加一个P标签：添加calss属性，但是p标签不能提交数据，可以设置一个隐藏标签。如果想要再一行展示则需要加： calss：form-inline。默认按钮尺寸可以不加，它是自动显示默认尺寸。bootstrap中图片、按钮、表单。加btn-block：class。水平表单：水平排列分行显示。
BootStrap入门（三）全局CSS样式
qq_41763734的博客
07-22 269
BootStrap入门（三）全局CSS样式 BootStrap中CSS样式有许多，这里挑一些学习 过程中的来展示，更多样式移步link 一、按钮 <body> <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-d...
asp.net div显示带样式的字符串_Bootstrap的按钮样式
weixin_35599815的博客
12-26 218
Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。颜色class.btn-primary.btn-secondary.btn-success.btn-danger.btn-warning.btn-info.btn-light.btn-dark.btn-link按钮标签.btn可以在<button>元素上使用，您也可以在&l...
bootstrap-5.3.0 里面A标签去除下划线有几种办法
爱分享
03-26 2300
2：在HTML中使用Bootstrap提供的类名.text-decoration-none，该类可用于所有元素（不仅限于a标签），以便去除任何文本装饰。3：在HTML中使用Bootstrap提供的类名.link-primary或.link-secondary，这些类提供了带颜色的非下划线链接样式。Bootstrap 5.3.0中去除链接下划线的方法有以下几种。1：使用CSS的text-decoration属性将下划线删除。
bootstrap a标签_最受欢迎的前端框架Bootstrap
weixin_42676824的博客
02-01 1650
Bootstrap的一些基本样式和组件，包括容器、页头、媒体组件、图片、列表组。重新实现了上节课的hello.html。我们并未写CSS文件，仅使用Bootstrap就达到了这样的效果，所以讲Bootstrap是一个强大的前端框架！Bootstrap通过CSS文件来提供样式，同样在中加以引入：<link rel="stylesheet" href="http://cdn.bootc...
BootStrap按钮标签及基本样式
11-29
按钮标签 在<a>,<button>或input元素上使用按钮class。但是为了避免跨浏览器的不一致性，建议使用<button>标签。 <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</...
Bootstrap 3 按钮标签实例代码
01-19
本文给大家介绍按钮标签的实例代码，具体内容如下： 通过将按钮类添加到 <a>, <button>, <input> 来实现按钮样式 <a>Link</a> <button class=btn btn-default type=submit>Button</button&...
Bootstrap标签页（Tab）插件使用方法
12-29
1、通过 data 属性：您需要添加 data-toggle=”tab” 或 data-toggle=”pill” 到锚文本链接中添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 ...
基于Bootstrap的多标签页设计源码
最新发布
04-12
本Bootstrap多标签页设计源码包含102个文件，主要使用CSS、HTML和JavaScript编写。它允许用户增加、关闭和折叠标签页，提供了智能、快速搭建和多种样式选择。适用于各种Web应用程序，易于集成和定制。
使用BootStrap实现标签切换原理解析
08-31
其中，标签切换是 BootStrap 中的一个重要组件，本文将详细介绍使用 BootStrap 实现标签切换的原理和实现方法。 标签切换的原理 ---------------- 标签切换的原理是基于 HTML、CSS 和 JavaScript 的结合使用。...
a标签导致的按钮子元素点击无效
qq_41040989的博客
04-11 811
我还一直以为是冒泡的问题，但是写了阻止冒泡还是不太行，后来以为是。标签，就会跳转到页面的首页，由于我这个页面没有滑动条，其实。，点击方法用antd中的气泡弹出窗口，结果就是点击。除此之外，即使我写了阻止冒泡，也没办法阻止。也会跳转， 按照事件冒泡的原理，点击。点击事件是先触发了，但是紧随其后。这个点很重要，记下来，防止忘记，的点击事件，触发了之后才会触发。标签也跳转了，由于速度过快，就已经刷新了，所以看起来就像。组件的问题，看了好久的。标签，问题就解决啦。标签会进行跳转，点击。，这个表示的是，点击。
a 和 button
Melissa的博客
04-27 1149
像 button 的原始目的就是一个通用的按钮，点击后应该触发  JavaScript， 没有其它附带的隐含的附加效果； 标签的隐含附带效果就是跳转页面到其它地方，而提交表单时应该有一个隐含附带的让浏览器触发提交表单的效果， 它就与 button 默认的行为不一样了。所以我们根据这点来区分我们应该用 button 还是用 input 或 a 标签。 今天遇到一个难题，代码如
button、a标签、input button的区别
qq_31092813的博客
07-24 4587
button a标签 input button的区别 适合使用的场景
bootstrap<a>标签的显示与隐藏
霓虹丶夏天
06-07 1万+
&lt;a id="modal-revoke1" role="button" onclick="openModal(4)" class="btn btn-success btn-xs disabled" data-toggle="modal"&gt;撤销&lt;/a&gt;$("#modal-revoke1").addClass('disab
一篇文章掌握boostrap折叠导航栏
lin1072368472的博客
02-14 2105
导航栏 创建步骤 nav 标签 添加class navbar navbar-default（可选）设置导航栏样式 添加 role=“navigation” 有助于可访问性 （详解：将nav转换成导航功能使用） 添加一个div 加上class navbar-header 导航栏头部 标题中可以添加 a标签 加上class navbar-brand表示logo或者品牌 无序列表添加 nav n...
Bootstrap .btn 各种按钮样式的使用
热门推荐
wuyujin1997的博客
05-18 1万+
Bootstrap CDN <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">...
bootstrap a标签样式
05-30
Bootstrap a标签样式可以通过以下CSS类来实现： - `btn`：将a标签转换为按钮样式。 - `btn-primary`：为a标签添加主要按钮的颜色。 - `btn-secondary`：为a标签添加次要按钮的颜色。 - `btn-success`：为a标签添加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值