Bootstrap 内联标签和徽章

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap badges Example</title>
<meta name="description" content="Bootstrap badges Example. All types of badges available are shown.">
<link href="../bootstrap/bootstrap-2.0.3.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<p><span class="badge">1</span></p>
<p><span class="badge badge-success">2</span></p>
<p><span class="badge badge-warning">4</span></p>
<p><span class="badge badge-important">6</span></p>
<p><span class="badge badge-info">8</span></p>
<p><span class="badge badge-inverse">10</span></p>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap inline label Example</title>
<meta name="description" content="Bootstrap inline label Example. All of the styles available(e.g. label-success, label-warning etc.) are shown.">
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<p><span class="label">Default</span></p>
<p><span class="label label-success">Success</span></p>
<p><span class="label label-warning">Warning</span></p>
<p><span class="label label-important">Important</span></p>
<p><span class="label label-info">Info</span></p>
<p><span class="label label-inverse">Inverse</span></p>
</div>
</div>
</div>
</body>
</html

时间： 2024-12-14 16:34:29

Bootstrap 内联标签和徽章的相关文章

HTML5进阶段内联标签汇总（小篇）

HTML5进阶段内联标签汇总(小篇) 内联元素,与别人公用一行,但是设置宽高无效.其特点: ①和其他元素都在一行上: ②高,行高及外边距和内边距不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>

内联标签------------大多数XHTML可以表示为两种类型的标签：块标签（block tag）和内联标签（inline tag）

1 内联标签 2 <em> 强调,大部分浏览器渲染为斜体. 3 <strong> 强调,大部分浏览器渲染为黑体. 4 <sub> 下标 5 <sup> 上标 6 7 内联标签通常用于样式化一行中的文本,并且不会导致换行.常见的内联标签包括<i>斜体.<em>.<strong>和<b>. 8 9 <code> 标示一段代码 <span> 一般内联标签 10 <br> 换行 &l

内联标签的特殊之处

一,padding-top与margin-top的默认占位为0: ex: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-box</title> <style> body{margin:0;padding:0;} .box { /*border: 30px solid #000;

块级标签与预格式化文本标签----------大多数XHTML可以表示为两种类型的标签：块标签（block tag）和内联标签（inline tag）

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>块级标签</title> 5 </head> 6 7 <body> 8 9 块级标签 10 就像标题.段落一样,需要在页面上占据一块的位置的标签. 11 <h1> 最大的标题 <h2> - <h6> 大小依次减小的标题 <p> 段落 12 13 <

第二百三十九节，Bootstrap路径分页标签和徽章组件

Bootstrap路径分页标签和徽章组件学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件和徽章组件. 一．路径组件路径组件也叫做面包屑导航. 面包屑导航 breadcrumb样式class类,写在<ul>或<ol>里,设置面包屑导航(Bootstrap) <ol class="breadcrumb"> <li><a hr

属性优先级、图片属性设置、内联标签设置大小

块级标签(行元素)和内联标签(行内元素)

块级标签如果两个同样的标签写在一起,出现在不同的行上面,这种就是块级标签. 块级标签的特点: 占据整行,自带换行效果.除了div以外,一般块级标签都会有内外边距,宽度和高度. 常见的块级标签: <h1-h6></h1-h6>,<p></p>,<div></div> 块元素标签示例: <!DOCTYPE html> <html lang="en"> <head> <meta

块级标签&内联标签

标签分为两类: 块级标签: 特点:独占一行如下图,没有加标签的显示在同一行,没有换行,加了<h1>标签的换行了,显示的内容独占了一行内联标签: 特点:按内容占位置原文地址:https://www.cnblogs.com/Mr-chenshuai/p/9961300.html

Bootstrap内联表单

有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可. <form class="form-inline" role="form"> <div class="form-group"> <label class=&q