Bootstrap<基础二十> 标签

最新推荐文章于 2020-11-27 09:53:59 发布
最新推荐文章于 2020-11-27 09:53:59 发布
阅读量98 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lansy/p/4446365.html
版权

Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签，如下面的实例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>


</body>
</html>

结果如下所示：

标签

您可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观，如下面的实例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签的变体</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>


</body>
</html>

结果如下所示：

标签的变体
 
Bootstrap<基础二十> 标签
Bootstrap <基础二十一>徽章（Badges）
Bootstrap <基础二十二>超大屏幕（Jumbotron）
Bootstrap <基础二十三>页面标题（Page Header）
Bootstrap<基础二十四> 缩略图
Bootstrap <基础二十五>警告（Alerts）
Bootstrap <基础二十六>进度条
Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap <基础二十八>列表组
Bootstrap <基础二十九>面板（Panels）
Bootstrap <基础三十>Well
Bootstrap <基础三十一>插件概览
Bootstrap <基础三十二>模态框（Modal）插件

转载于:https://www.cnblogs.com/lansy/p/4446365.html

anpochi7793
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap提示信息（标签、徽章、巨幕和页头）
weixin_34362790的博客
07-04 333
前面的话 　　在Bootstrap中，有一些组件用于提示信息，如 标签、徽章、巨幕和页头。本文将详细介绍Bootstrap提示信息   标签 　　在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户 　　在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现...
Bootstrap一些基础知识
qq_37634294的博客
03-27 335
Bootstrap 网格系统实例：堆叠的水平 ... 元素被添加，确保居中和最大宽度。 一旦添加了容器，接下来您需要考虑以行为单位。添加 ...，并在行内添加列 。 网格中的每一行是由 12 个单元组成的，您可以使用这些单元定义列的尺寸。确保总和总是 12 内联子标题 如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 ，或者添加 .small clas
使用Bootstrap-Table实现分页
w1824575989的博客
11-27 3292
使用Bootstrap-Table分页 <link href="~/Content/bootstrap-table.min.css" rel="stylesheet" /> <script src="~/Scripts/bootstrap-table.min.js"></script> <script src="~/Scripts/bootstrap-table-zh-CN.min.js"></script> ...
Bootstrap完成分页效果的实现（标签页）
虾米博客
10-20 4021
div class="container"> h3> bootstrap给予JQ提供了十几个插件，每个插件对于一个*.js文件，可以单独引用，也可以整体引用(bootstrap.js),和JQ.UI是同一级的库！ 比JQ.UI多css样式。但是这个JS比JQ.UI复杂，因为中间加了样式 h3> h3>调用上述插件，可以用两种方式：第一种是传统
Bootstrap 学习之 (十二) ------ 标签与徽章
俊刚的博客
11-02 626
Bootstrap 标签 标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签 Example heading class="label label-default">New 可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、la
Bootstrap基础学习
09-03
【Bootstrap基础学习】 Bootstrap是前端开发领域广泛应用的开源框架，由Twitter的设计师Mark Otto和Jacob Thornton共同创建。这个框架主要基于CSS和HTML，同时也包含了JavaScript（JQuery）组件，为Web开发者提供了...
Bootstrap php制作动态分页标签
08-31
Bootstrap的分页样式通常使用`<ul>`和`<li>`元素构建，每个分页链接包裹在`<a>`标签内，并通过`.pagination`类进行样式化。以下是一个基础的Bootstrap分页HTML结构： ```html <ul class="pagination"> <li><a href...
Bootstrap基本插件学习笔记之标签切换(17)
09-01
在Bootstrap中，标签切换功能主要通过使用`<ul>`列表和`<a>`链接元素来实现。首先，我们需要在HTML结构中设置基础样式。在样式1中，我们看到以下代码： ```html <div class="nav nav-tabs"> <li class="active"><a...
Bootstrap零基础学习第一课之模板
09-02
接着，我们看到`<head>`标签内的元数据，如： ```html <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> ``...
Bootstrap标签页（Tab）插件使用方法
08-31
Bootstrap标签页（Tab）插件使用方法 Bootstrap标签页（Tab）插件是Bootstrap框架中的一种常用插件，用于实现标签页切换效果。在本文中，我们将详细介绍Bootstrap标签页（Tab）插件的使用方法。 使用方法 要使用...
Bootstrap学习笔记--常用标签和类模板
qq_38409944的博客
05-25 357
h标签：bootstrap中的h标签被改写了 比原标签字体要细 &amp;amp;lt;h1&amp;amp;gt;我是标题1 h1&amp;amp;lt;/h1&amp;amp;gt; &amp;amp;lt;h2&amp;amp;gt;我是标题2 h2&amp;amp;lt;/h2&amp;amp;gt; &amp;amp;lt;h3&amp;amp;gt;我是标题3 h3&amp;amp;lt;/h3&amp
最好懂的 Bootstrap 实战案例教程
热门推荐
LakeYC的博客
03-07 6万+
我们每期会根据不用的项目案例安排不同的技术栈免费课程！免费！免费！免费！来帮助大家提高，有兴趣的同学可以私信我哦~ 所有项目都是以真实项目为实战例。 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是
Bootstrap 控制移动端和网页端的元素隐藏和显示
qq_36935391的博客
09-14 4999
  2017年10月11日 21:05:49 J_小浩子 阅读数：5736 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/change_on/article/details/78208380 先看效果 PC，显示3张图片   移动端，只显示一张   解决思路，用Bootstrap的网格系统。 visible-md-blo...
1+x 证书 Web 前端开发中级理论考试（试卷 8 ）含答案
Zeus
03-23 1万+
1+x 证书 Web 前端开发中级理论考试（试卷 8 ） 官方QQ群 转载请注明来源：妙笔生花个人博客http://blog.zh66.club/index.php/archives/438/ 一、单选题 1、在PHP的str_replace(1,2,3)函数中，1，2，3所代表的含义是（D） A:“取代字符串”，“被取代字符串”，“来源字符串” B:“来源字符串”，“被取代字符串”，...
Bootstrap3学习（一）
qq30211478的博客
05-21 2210
一、Bootstrap简介 Bootstrap来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 （1）基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 （2）CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可...
web网页练习
weixin_30840573的博客
05-22 1819
一. HTML部分 1. XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 2. 前端页面有哪几层构成，分别是什么?作用是什么? 1, 结构层 Html...
bootstrap丰富的html标签和css类(一)网格系统、文本排版、代码块显示、表格显示
chinaltx的博客
01-26 1960
一、概览 1.1 bootstrap css概览 需要使用html5文档类型，也就是在html文件头部使用&lt;!DOCTYPE html&gt; bootstarp3默认的css本身对移动设备友好支持。为了确保适当的绘制和触屏缩放，需要在头部加上viewport meta标签： &lt;meta name="viewport" content="width=device-width,ini...
bootstrap学习笔记--bootstrap排版类的使用
abn1122的博客
01-06 151
标题 Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式，这个和一般的html没啥区别。请看下面的实例： <h1>测试1 h1</h1> <h2>测试2 h2</h2> <h3>测试3 h3</h3> <h4>测试4 h4</h4> <h5>...
Bootstrap面试题
清欢
05-27 9144
1、Bootstrap是哪家公司研发的？ Twitter 2、什么是Bootstrap？以及为什么要使用Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap具有移动设备优先、浏览器支持良好、容易上手、响应式设计等优点，所以Bootstrap被广泛应用。 3、使用B...
Bootstrap基础教程：布局与按钮设计
Bootstrap是前端开发...这个Bootstrap基础教程向读者展示了如何在实际项目中使用Bootstrap的基本组件，包括引入CSS、创建响应式布局和使用内置的按钮样式。掌握这些基础知识，将极大地提升网页开发的效率和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值