Bootstrap CSS(图片，表格，文字排版，颜色)

文章目录

• 前言
• 一、偏移列（补充）
• • 1.概念：
  • 2.代码示例：
• 二、图片
• • 1.``类：
  • 2.代码如下（示例）：
• 三、文字排版
• • 1.代码如下（示例）：
• 四、表格
• • 1.表格类，`和类`
  • 2.代码如下（示例）：
• 五、颜色
• • 1.代码如下（示例）：

前言

本篇文章主要是对Bootstrap CSS进行相应的总结，其中常用的就是图片、表格、文字排版、颜色等一些内容。同时对上篇文章缺失的的内容（偏移列）进行补充。

一、偏移列（补充）

1.概念：

偏移是一个用于更专业的布局的有用功能。它们可以用来给列腾出更多的空间。为了在大屏幕显示器上使用偏移，请使用.col-md-offset-*类。这些类会把一个列的左边距（margin）增加*列，其中 * 范围是从1到11。注意：.col-xs-*类不支持偏移，解决的方法是通过使用一个空的单元格来实现该效果。

2.代码示例：

      <div class = "container" style = "height: 200px; background-color: pink;"><div class = "row"><div class = "col-2" style = "height: 100px; background-color: red;">第一列</div><div class = "col-2 offset-1" style = "height: 100px; background-color: green;">第二列</div><div class = "col-2" style = "height: 100px; background-color: blue;">第三列</div></div></div>

二、图片

1.类：

2.代码如下（示例）：

		<div class="container" ><div class = "row"><img src = "./img/1.jpg" width = "200" height="200" class = "rounded"/><img src = "./img/1.jpg" width = "200" height="200" class = "rounded-circle"/><img src = "./img/1.jpg" width = "200" height="200" class = "img-thumbnail"/></div><div class = "row"><div class = "col-12" style = "border:1px solid red "><img src = "img/1.jpg" width = "200" height="200" class = "float-right">对方是否对</div></div><div class = "row"><div class = "col-6" style = "border:1px solid green"><img src = "./img/3.jpg" class = "img-fluid" /></div></div></div>

三、文字排版

1.代码如下（示例）：

<div class = "container" style = "height: 200px; background-color: pink;"><!-- 标题 --><h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1><h2>h2 Bootstrap 标题 (2rem = 32px)</h2><h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3><h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4><h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5><h6 class = "text-center">h6 Bootstrap 标题 (1rem = 16px)</h6><abbr>标题</abbr></div><!-- 内联子标题 --><h1 class = "display-1">标题</h1><h1 class = "display-1"><small>标题</small></h1><h1 class = "display-2"><mark>标题</mark></h1><h1 class = "display-3"><abbr>标题</abbr></h1><h1 class = "display-4">标题</h1><!-- HTML 元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。 --><div class="container"><h1>Abbreviations</h1><p>The abbr element is used to mark up an abbreviation or acronym:</p><p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p></div>

补充：想要知道更多的文字排版，在bootstrap菜鸟教程中很是全面。这里就不会一一列举出来。

四、表格

1.表格类，和类

1. 表格类：

表格类	描述
.table	为任意添加基本样式（只有横向分割线）内添加斑马线形式的条纹（IE8不支持）内的任一行启用鼠标悬停状态 .table-striped 在 .table-bordered 为所有表格的单元格添加边框 .table-hover 在 .table-condensed 让表格更加紧凑
和	类: 类 描述 .active 将悬停的颜色应用在行或者单元格上 .success 表示成功的操作 .info 表示信息变化的操作 .warning 表示一个警告的操作 .danger 表示一个危险的操作 2.代码如下（示例）： <div class="container" ><div class="table-responsive"> <table class="table table-bordered table-striped table-hover "><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr class = "table-primary"><td>John</td><td>Doe</td><td>john@example.com</td></tr><tr class = "table-danger"><td>Mary</td><td>Moe</td><td>mary@example.com</td></tr><tr class = "table-muted"><td>July</td><td>Dooley</td><td>july@example.com</td></tr></tbody></table></div></div> 五、颜色 1.代码如下（示例）： <div class="container" ><h2>代表指定意义的文本颜色</h2><p class="text-muted">柔和的文本。</p><p class="text-primary bg-danger">重要的文本。</p><p class="text-success">执行成功的文本。</p><p class="text-info">代表一些提示信息的文本。</p><p class="text-warning">警告文本。</p><p class="text-danger">危险操作文本。</p><p class="text-secondary bg-primary">副标题。</p><p class="bg-danger text-dark ">深灰色文字。</p><p class="text-light">浅灰色文本（白色背景上看不清楚）。</p><p class="text-white">白色文本（白色背景上看不清楚）。</p><a href = "#" class = "text-success" >超链接</a></div> 本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！ 收藏 标签：技术 上一篇 > 五虎上将图之iptables详解 下一篇 > python图像二值化 腐蚀 膨胀_【数字图像处理】二值化图像腐蚀运算与膨胀运算... 相关文章 Duilib中list控件支持ctrl和shif多行选中的实现 [ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif win10系统 微软输入法 于eclipse ctrl+shif+f冲突间接处理办法 Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif 读LDD3，内存映射与DMA--PAGE_SHIF… VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】 更换iBus五笔的左与右Shif sublime ctrl+shif+f 没用解决办法 idea 对 ctrl + z 的撤销 是 ctrl + shif + z 计算机最早的设计师应用于,计算机应用基础选择题doc.doc win10自带截图神器：Win+Shift+S Python基础之文件目录操作 python简述目录_Python基础之文件目录操作(示例代码) tp5 如何做数据采集 任务2-7(服务器字体+阿里巴巴矢量库) html标签（1)：h1~h6,p,br,pre,hr TI 电量计介绍与芯片选型指南 几款TI电源芯片简介 TI DSP芯片C2000系列读取FLASH数据 德州仪器(Ti)平台嵌入式开发基础 TI三相电机智能栅极驱动芯片特点分类 省选模拟（12.08） T3 圈圈圈圈圈圈圈圈 Hadoop生态圈技术栈（上） 大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询 小猿圈之Linux下Mysql 操作命令 大数据Hadoop生态圈常用面试题 大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作 备战Noip2018模拟赛11（B组）T3 Monogatari 物语 【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码 NYOJ 78 圈水池 递归问题 跑道 汽车 绕圈问题 Python实现 Hadoop生态圈（三）：MapReduce 立即 投稿 微信公众账号 微信扫一扫加关注 返回 顶部