bootstrap-3-基本标签使用类

最新推荐文章于 2024-06-09 18:06:43 发布
最新推荐文章于 2024-06-09 18:06:43 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itzhengmaolin/article/details/75370806
版权

具体可以将代码复制后，用chrome查看每个效果，到底是加了什么类

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  </head>
  <body>
<h1>标题<small>副标题</small></h1>
    <h1>h1<small>副标题</small></h1>
    <h2>h2<small>副标题</small></h2>
    <h3>h3<small>副标题</small></h3>
    <h4>h4<small>副标题</small></h4>
    <h5>h5<small>副标题</small></h5>
    <h6>h6<small>副标题</small></h6>
    <hr>
    <h2>p标签</h2>
    <p>boostrap无任何样式段落标签</p>
    <p class="lead">突出显示的段落标签</p>
    <div><strong style="color: red;">温馨提示:</strong>可以修改variables.less文件中的@font-size-base (定义了全局font-size基准)和 @line-height-base(定义了全局line-height基准)就可以<em>自定义</em>修改bootstrap的<span style="font-weight: bold;color: blue;font-size: 24px;">默认样式</span>了</div>
    <hr>
    <h2>强调标签</h2>
    <em>斜体em</em>
    <strong>着重strong</strong>
    <small>小号small</small>
    <b>粗体文本b</b>
    <i>斜体文本i，用于发言、技术短语等</i>
    <hr>
    <h3>对齐</h3>
    <p class="text-left">文本左对齐</p>
    <p class="text-center">文本居中对齐</p>
    <p class="text-right">文本右对齐</p>
    <hr>
    <h3>强调</h3>
    <p class="text-muted">温和的文本</p>
    <p class="text-primary">主要的文本</p>
    <p class="text-success">成功的文本</p>
    <p class="text-info">信息的文本</p>
    <p class="text-warning">警告的文本</p>
    <p class="text-danger">危险的文本</p>
    <hr>
    <dt>缩略语</dt>
    <dd style="text-indent:40px;">简而言之就是对某部分进行缩写,当鼠标移过去可以显示完整的信息</dd>
    <p>在某些浏览器中，当您把鼠标移至缩略词语上时，<abbr title="是我是我">title</abbr>属性值就可显示出来。</p>
    <p>为缩略语设置更小如:<abbr class="initialism">bootstrap</abbr></p>
    <hr>
    <h3>地址</h3>
    <address>
      <strong>Twitter, Inc.</strong><br>
      795 Folsom Ave, Suite 600<br>
      San Francisco, CA 94107<br>
      <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>

    <address>
      <strong>Full Name</strong><br>
      <a href="mailto:#">first.last@example.com</a>
    </address>
    <hr>
    <h3>引用</h3>
    <blockquote class="pull-right">
      <p>今天浪费的时间，会在以后让你加倍补回来的</p>
      <small>记  至2017-7-19还没找到工作的自己</small>
    </blockquote>
    <br>
    <h3>列表</h3>
    <ul class="list-unstyled">
      <li>无样式列表-列表项1</li>
      <li>无样式列表-列表项2</li>
      <li>无样式列表-列表项3</li>
    </ul>
    <ol class="list-inline">
      <li>内联样式表-列表项1</li>
      <li>内联样式表-列表项2</li>
      <li>内联样式表-列表项3</li>
    </ol>
    <hr>
    <h3>描述</h3>
    <dl>
    <dt>要描述的短语</dt>
    <dd>描述短语的内容</dd>
    </dl>
    <dl class="dl-horizontal">
      <dt>水平排列--短语</dt>
      <dd>描述的内容</dd>
    </dl>
    <hr>
    <h3>代码</h3>
    <p>包含的代码片段。如:
        <code>function hello(){代码块}</code>
        或<pre> function hi(){代码块}</pre>
    </p>
    <hr>
    <h3>表格</h3>
    <table class="table">
      <tr>
        <th colspan="2" style="text-align: center;">基本表格</th>
      </tr>
      <tr>
          <td>表格第一行第一列</td>
          <td>表格第一行第二列</td>
      </tr>
      <tr>
          <td>表格第二行第一列</td>
          <td>表格第二行第二列</td>
      </tr>
      <tr>
          <td>表格第三行第一列</td>
          <td>表格第三行第二列</td>
      </tr>
    </table>
    <table class="table table-striped">
      <tr>
        <th colspan="2" style="text-align: center;">条纹状表格</th>
      </tr>
      <tr>
          <td>表格第一行第一列</td>
          <td>表格第一行第二列</td>
      </tr>
      <tr>
          <td>表格第二行第一列</td>
          <td>表格第二行第二列</td>
      </tr>
      <tr>
          <td>表格第三行第一列</td>
          <td>表格第三行第二列</td>
      </tr>
    </table>
    <p class="text-info">条纹状表格是通过:nth-child CSS选择器实现的，而这一功能不被Internet Explorer 8支持。</p>

    <table class="table table-bordered">
      <tr>
        <th colspan="2" style="text-align: center;">带边框的表格</th>
      </tr>
      <tr>
          <td>表格第一行第一列</td>
          <td>表格第一行第二列</td>
      </tr>
      <tr>
          <td>表格第二行第一列</td>
          <td>表格第二行第二列</td>
      </tr>
      <tr>
          <td>表格第三行第一列</td>
          <td>表格第三行第二列</td>
      </tr>
    </table>
    <table class="table table-hover">
      <tr>
        <th colspan="2" style="text-align: center;">悬停效果表格</th>
      </tr>
      <tr>
          <td>表格第一行第一列</td>
          <td>表格第一行第二列</td>
      </tr>
      <tr>
          <td>表格第二行第一列</td>
          <td>表格第二行第二列</td>
      </tr>
      <tr>
          <td>表格第三行第一列</td>
          <td>表格第三行第二列</td>
      </tr>
    </table>
    <table class="table table-condensed">
      <tr>
        <th colspan="2" style="text-align: center;">紧缩表格</th>
      </tr>
      <tr>
          <td>表格第一行第一列</td>
          <td>表格第一行第二列</td>
      </tr>
      <tr>
          <td>表格第二行第一列</td>
          <td>表格第二行第二列</td>
      </tr>
      <tr>
          <td>表格第三行第一列</td>
          <td>表格第三行第二列</td>
      </tr>
    </table>
    <table class="table">
      <tr>
        <th colspan="2" style="text-align: center;">单元格状态</th>
      </tr>
      <tr>
          <td class="active">鼠标悬停在行或单元格上时所设置的颜色</td>
          <td class="success">标识成功或积极的动作</td>
      </tr>
      <tr>
          <td class="warning">标识警告或需要用户注意</td>
          <td class="danger">标识危险或潜在的带来负面影响的动作</td>
      </tr>
    </table>

    <div class="table-responsive">
      <table class="table">
        <tr>
          <th colspan="2" style="text-align: center;">响应式表格</th>
        </tr>
        <tr>
            <td>表格第一行第一列</td>
            <td>表格第一行第二列</td>
        </tr>
        <tr>
            <td>表格第二行第一列</td>
            <td>表格第二行第二列</td>
        </tr>
        <tr>
            <td>表格第三行第一列</td>
            <td>表格第三行第二列</td>
        </tr>
      </table>
    </div>
    <script src="bootstrap/jq/jq.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
RecordInLife
关注
专栏目录
Bootstrap 3 学习
weixin_45346719的博客
03-09 1286
http://getbootstrap.com/ 1.meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0"> width属性控制设备宽度，将它设置为device-width确保正确呈现在不同设备上 initial-scale确保网页加载时1:1呈现，不会缩放 在移动设备浏览器上 ，user-scalable=no 可以禁用其缩放（zooming）功能，通常maximum-scale=1.0 与
Bootstrap
zZ_pineapple的博客
08-10 195
安装 1. 网页直接安装 bootstrap官网 2. 通过Bower安装 bower install bootstrap 3. 通过npm安装 npm install bootstrap@3 包含的内容 bootstrap文件中，包含js、css、fonts三部分内容 下面是目录结构： 基本模板 <!DOCTYPE html> <html lang="zh-CN">...
Bootstrap3 标签和徽章之个人学习笔记
逆水行舟，不进则退
07-10 637
Bootstrap3 标签、徽章、面板、well和超大屏幕标签（空格分隔）： Bootstrap 个人学习Bootstrap的学习笔记小结，详细信息参考官方文档。
bootstrap布局和标签
xiaoxiaoyu85的专栏
07-03 1235
1.元素换行对齐 row换行：row的margin-left和margin-right 会缩进-15px,所以使用row标签，会比不使用row标签的靠左边15px 000       123                   456               效果如下：
BootStrap入门到实战：BootStrap组件（三）- 分页、标签、徽章、巨幕、页头与缩略图
最新发布
林林一928的博客
06-09 1195
一、 分页1. 默认分页、2. 尺寸、3. 翻页、4. 对齐链接、5. 可选的禁用状态。二、 标签。 三、 徽章。* 扩- 标签与徽章的使用区别 。四、巨幕。 五、页头与缩略图。 1. 页头。 2. 缩略图。2.1 默认样式的缩略图。 2.2 自定义内容。 2.3 缩略图的用途。 2.4 缩略图在日常开发中的作用
将bootstrap-table表格翻译为中文
03-04
1. **添加脚本引用**：在HTML文档的`<head>`或`<body>`标签中，引入`bootstrap-table`的基本库和中文语言包。基本的引入方式如下： ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
表头部分使用标签，表数据部分使用标签。 6. 在文档加载完成后，通过JavaScript调用bootstrap-table提供的API来初始化表格。设置fixedColumns选项为true表示启用列固定功能，fixedNumber设置固定列的数量。 7. ...
bootstrap-editable.js
01-03
使用Bootstrap Editable的基本步骤包括： 1. 引入必要的库，如Bootstrap的CSS和JavaScript，以及Bootstrap Editable的JS文件。 2. 在HTML中定义可编辑的元素，添加特定的类名，如`editable`. 3. 配置可编辑元素，...
bootstrap-datetimepicker.js
01-08
使用Bootstrap-Datetimepicker.js的基本步骤包括： 1. **引入依赖**：首先，确保引入了Bootstrap的CSS和JS文件，以及jQuery库，因为这个日期插件依赖于它们。 2. **导入插件**：在页面中引入`bootstrap-...
基于Bootstrap下拉框插件bootstrap-select使用方法详解
10-18
使用该插件可以丰富下拉框的功能，如搜索选项、多选、动态加载数据等，同时保持与Bootstrap的样式统一。 ### Bootstrap-select使用方法详解 首先，要使用bootstrap-select，需要在项目中引入Bootstrap以及...
页面渲染，页面温馨提示
10-20
比较不错的页面渲染
bootstrap定义的标签
Mccree1997的博客
08-21 1197
定义标记内容<mark></mark>定义删除的文本和无用文本/*被删除*/ <del></del>/*无用*/ <s></s> 插入文本和带下划线的文本/插入/ <ins></ins>/下划线/ <u></u>小号文本，文字为父容器文字大小的85%<small></small> 或者 <div class=".small"></div>对齐<p class="text-left">Left ali
Bootstrap 标签
snowstorm的博客
03-17 495
需要高亮一些标题里额特使字符或者整个字符，可以使用.label样式，注意实际发现单独使用label样式时，没有效果，需要配合其他labe-*样式才可以！示例代码： JavaScript权威指南New JavaScript权威指南New JavaScript权威指南New JavaScript权威指南New JavaScript权威指南New JavaScript权威指南New效果：
【学习笔记】Bootstrap3 - 基于HTML、CSS、JavaScript的前端开发框架
shawxlee的CSDN博客
09-13 413
Bootstrap CSS 一、移动设备优先 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签。 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Bootstrap网页标题&l
Bootstrap v3 学习笔记 —— 全局 CSS 样式
cccloveforever的博客
04-05 1580
Bootstrap v3 设置全局的 CSS 样式。
bootstrap中常用标签类名整理
Lioo121的博客
11-11 2616
lqUI 全局样式说明文档 下面是一些bootstrap中常用的标签类名 清空默认样式 布局 .container 设置为容器：水平方向居中，宽度部位100% 左右内边距为15px 高度没有 .container-fluid 宽度为100%的容器 没有外边距 内边距为左右15px 上下0px 没有高度 按钮 -btn 成功 btn-success 失败 btn-fail 警告...
HTML--bootstrap的小图标
huyishero的博客
01-16 6059
刚开始看ace_admin框架的后台代码时，找了半天也没发现图标的代码位置，没找到image这样的元素。 百度了下，了解到ace_admin是bootstrap框架的，bootstrap使用&lt;i&gt;标签来代表小图标，预先定制了一批图标，使用的时候，只需要在&lt;i&gt;标签的class中增加小图标的名称就可以。  ...
BootStrap基础知识点总结
永远热泪盈眶 坚持输出
07-05 461
1、通过Bootstrap，我们只要给图片添加 img-responsive 的class属性,图片的宽度就能自动适配你手机屏幕的宽度啦。 2、Bootstrap除了可以使图片自适应以外,还可以很简单的让头部标题的文字居中,使标题看起来更美观。我们只需要给h2标签添加text-center的class属性,标题文字就可以居中了。 友情提醒：你可以使用空格给标签定义多个class,就像下面这样： <h2 class="red-text text-center">your text</h2&g
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值