Bootstrap页面内容——代码、图片、表格_在bootstrap中可以给图片添加两个公用的类______ 和 ______来实现图片的居中-程序员宅基地

技术标签: Bootstrap  bootstrap  

一、代码

1.内联代码

<code>包裹内联代码片断,勿忘转义HTML尖括号

	<code>
		&lt;h1&gt;这是一个标题&lt;/h1&gt;
		&lt;p&gt;这是一段文字&lt;/p&gt;
	</code>

在这里插入图片描述

2.代码块

使用 <pre>标签可以包裹代码块,同样HTML的尖托号需要进行义,你还可以使用 .pre-scrollable CSS样式,实现垂直滚动的效果,它默认提供350px高度限制、Y轴垂直滚动效果

	<pre>
		<code>
			&lt;h1&gt;这是一个标题&lt;/h1&gt;
			&lt;p&gt;这是一段文字&lt;/p&gt;
		</code>
	</pre>

在这里插入图片描述

3.Var变量

推荐使用 <var>标签包裹标示变量

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

y = mx + b

4.用户输入(键盘动作提示)

使用 <kbd> 标签,标明这是一个键盘输入操作

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

在这里插入图片描述

5.示例标注

<samp> 标签代表这是一个示例

<samp>这是一个代码示例.</samp>

在这里插入图片描述

二、图片

BootStrap图片处理的示例和文档,由于我们为图片添加了轻量级的无干扰样式和响应式行为,因此在BootStrap设计中引用图片可以更加方便且不会轻易撑破其它元素。

1.响应式图片

在Bootstrap中,给图片添加.img-fluid样式,或定义max-width: 100%、height:auto;样式,即可赋得响应式特性,图片大小会随着父元素大小同步缩放。

<img src="..." class="img-fluid" alt="Responsive image">

在这里插入图片描述

2.缩略图处理

您可以使用.img-thumbnail属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式(你也可以使用系统提供的边隙间距方法,如.p-1再加上边框颜色定义达成),效果如下

	<div class="col-md-4">
		<img src="images/img_01.jpg" class="img-thumbnail" alt="11111">
	</div>

在这里插入图片描述

3.图像对齐处理

对于.block属性的块状图片,我们也可以使用 浮动定义规范 或 文字对齐规范,来实现对图像的对齐、浮动控制,带.block块属性的图片,可以自动获得 .mx-auto 的位置对齐属性。

1.图片对齐方式,自己对齐的话通过浮动

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

在这里插入图片描述

2.自己居中

先要变成block(d-block),然后再使用margin:0 auto(mx-auto)。

<img src="..." class="rounded mx-auto d-block" alt="...">

在这里插入图片描述

3.父级调整对齐,使用文本的对齐方式

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

在这里插入图片描述

4.圆角图片

<div class="col-md-4">
	<img src="images/img_01.jpg" class="rounded img-fluid" alt="">
</div>

在这里插入图片描述

5.Picture元素

HTML5标准提供了一个全新的<picture> 元素,它可以为 <img>指定多个<source> 定义,请确保在<img> 标签里使用使用.img- CSS样式进行定义绑定,而不是仅仅认为引用了 <img> 就达成了。*

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

通过媒体查询,在不同分辨率的手机显示不同的图片,增加用户体验。

	<picture>
		<source media="(min-width:1200px)" srcset="images/1140.jpg">
		<source media="(min-width:992px)" srcset="images/960.jpg">
		<source media="(min-width:768px)" srcset="images/720.jpg">
		<source media="(min-width:576px)" srcset="images/540.jpg">
		<img src="images/img_01.jpg" alt="">	<!-- 当尺寸小于576的时候会显示这个图片 -->
	</picture>

三、表格

1.自适应表格

  1. 响应式表格
    当表格想要始终呈现水平滚动,可在.table上加入.table-responsive获得响应式表现,从而支持任何viewport窗口。也可以在.table上,加 .table-responsive{-sm|-md|-lg|-xl}属性来定义多屏幕尺寸响应支持。
    当响应式表格超过表格底部或顶部边缘,会通过 overflow-y: hidden属性将内容隐藏,总的说这会隐藏掉下拉列表或第三方的插件展现。
		<div class="row">
			<div class="table-responsive">
				<table class="table table-sm">
					<caption>课程表</caption>//会在底下显示
					<tbody>
						<tr>
							<td>语文</td>
							<td>数学</td>
							<td>英语</td>
							<td>生物</td>
							<td>化学</td>
						</tr>
						<tr>
							<td>语文</td>
							<td>数学</td>
							<td>英语</td>
							<td>生物</td>
							<td>化学</td>
						</tr>
						<tr>
							<td>语文</td>
							<td>数学</td>
							<td>英语</td>
							<td>生物</td>
							<td>化学</td>
						</tr>
						<tr>
							<td>语文</td>
							<td>数学</td>
							<td>英语</td>
							<td>生物</td>
							<td>化学</td>
						</tr>
						<tr>
							<td>语文</td>
							<td>数学</td>
							<td>英语</td>
							<td>生物</td>
							<td>化学</td>
						</tr>
						<tr>
							<td>语文</td>
							<td>数学</td>
							<td>英语</td>
							<td>生物</td>
							<td>化学</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

在这里插入图片描述

  1. 多屏幕断点设定
    使用 .table-responsive{-sm|-md|-lg|-xl}可以根据需要对不同屏幕尺寸断点表格进行响应式设计,在中断点之上该表格会正常显示,而不是水平滚动(没有水平条);在响应样式应用于特定视口宽度之前,这些表可能会断开。
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

在这里插入图片描述

2.表格颜色

你可使用.table-darkclass选择器来产生颜色反转对比效果,即深色背景和浅色文本。

<table class="table table-sm table-dark">

在这里插入图片描述

3.Head表头处理

与预设的反转样式相似,使用.thead-light 或.thead-dark 中的一个样式,就能使 <thead>区显示出浅黑或深灰。

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td></td>
    </tr>
  </tbody>
</table>

在这里插入图片描述

4.条纹状表格

使用 .table-striped 样式定义 <tbody>,可以产生逐行颜色强烈对比的表格样式(以及增加反转)。

<table class="table table-striped">
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
  </tbody>
</table>

在这里插入图片描述

5.表格边框处理

添加 .table-bordered 类可以产生表格边框与间隙系统

<table class="table table-bordered">
  <thead>
  	<tr></tr>
  </thead>
  <tbody>
	<tr></tr>
  </tbody>
</table>

在这里插入图片描述

<table class="table table-bordered table-dark">

在这里插入图片描述

6.无边框

<table class="table table-borderless">

在这里插入图片描述
.table-borderless 也可以用在黑色表格上

7.行悬停效果

将 .table-hover 定义到 <tbody>上,可以产生行悬停效果(鼠标移到行上会出现状态提示)。

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
    </tr>
  </tbody>
</table>

在这里插入图片描述

8.紧缩表格

添加 .table-sm 可以将表格的padding值缩减一半,使表格更加紧凑。

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>

在这里插入图片描述

9.语义状态化

  1. 使用语义状态样式对表格逐行或单个单元格进行着色表达
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

在这里插入图片描述

  1. 深色表格上没有固定的背景,你可以使用 文字或背景通用样式 获得类似的样式
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>

  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xun__xing/article/details/107628089

智能推荐

论文小结——GDRnet-程序员宅基地

文章浏览阅读1.5k次。单帧RGB估计6d姿态流程:1.检测图像中的ROI (yolov3)2.将ROI动态放大后(即Zoomed-in ROI)作为输入,并预测得到几何特征:MSRA,、M2D-3D 、Mvis(没用)3.MSRA(表面几何特征区域,个人理解二就是分成了若干个fragments)、M2D-3D(3d对应关系,稠密)结合起来输入到patch-pnp里,直接回归出6d pose创新点:1)提出一个观点:如果选择一个合适的参数模型表示 pose params,直接回归的方式要比间接的方...

Kinect学习笔记一ColorFrame-程序员宅基地

文章浏览阅读3.1k次,点赞4次,收藏8次。开发学习笔记(C#)第一篇ColorFream的获取与显示(找到的二代笔记居然是C++,可恶! 自己来写C#。Code摘自SDK。来熟悉程序工作调用流程。 )(XXX?)皆为待议 若看代码底色不爽,剪切粘贴在txt,再粘回来,格式就取消了,是不是很神奇? 然而二代我找了半天楞没找到那个一代多个kinect遍历的东西的存在,战五渣不解释,以后发现了再补。色彩图有RGB

linux分析apache日志,如访问次数最多的前10个IP、访问超过100次的页面-程序员宅基地

文章浏览阅读2.7k次,点赞3次,收藏6次。apache日志分析可以获得很多有用的信息,现在来试试最基本的,获取最多访问的前10个IP地址及访问次数。既然是统计,那么awk是必不可少的,好用而高效。命令如下:awk '{a[$1] += 1;} END {for (i in a) printf("%d %s\n", a[i], i);}' 日志文件 | sort -n | tail首先用awk统计出来一个列表

如何高效敲代码?_敲代码效率高的方法我只会照着书敲怎么办-程序员宅基地

文章浏览阅读5.2k次,点赞13次,收藏33次。经常有读者对学习编程有一种困惑:书/视频都看懂了,就是不会自己写。这也是当初行哥学编程时非常困扰的一个问题,之后不会写就对着敲代码 如果照着敲代码,感觉自己就像一个无情的打字机 如果不照着敲代码,感觉学完之后索然无味,看完视频教程不断质疑自己刚才都学了啥? 在这种纠结过程中耗费了大量时间,学习效果却不是很显著经过几年的洗礼,稍微分享一下行哥的回答:首先给个结论:敲代码肯定有效果,但是要区分一下怎么敲代码 如果只是照着别人的代码逐字敲进去,也只能练习手速,在大脑中暂时留下_敲代码效率高的方法我只会照着书敲怎么办

线性规划的K-T条件-程序员宅基地

文章浏览阅读2.5w次,点赞5次,收藏11次。百度文库好文相关概念数学规划——无约束非线性规划/约束非线性规划; 下降方向、可行方向、下降可行方向; 可行解、可行域边界、有效约束、无效约束;局部极小值的性质: 若x*是极小值点,则不存在向量D,使得: Δf(X∗)TD<0\Delta f(X*)^T D <0 −Δgj(X∗)TD<0-\Delta g_j(X*)^T D <0 同时成立。K-T条件X*是非线性规划{minf(X),_k-t条件

项目报错-springboot-thymeleaf_2023-11-28 09:04:12.148 error 3452 --- [nio-8885-e-程序员宅基地

文章浏览阅读659次。org.thymeleaf.exceptions.TemplateInputException: Error resolving template , template might not exist or might not be accessible by any of the configured Template Resolvers_2023-11-28 09:04:12.148 error 3452 --- [nio-8885-exec-2] org.thymeleaf.templ

随便推点

Django Linux环境安装_could not find a version that satisfies the requir-程序员宅基地

文章浏览阅读1.5k次。文章目录一、概念1.1 WSGI1.2 uWSGI二、使用步骤1.引入库2.读入数据总结提示:以下是本篇文章正文内容,下面案例可供参考一、概念1.1 WSGIWeb服务器网关接口(Python Web Server Gateway Interface,缩写为WSGI)是为Python语言定义的Web服务器和Web应用程序或框架之间的一种简单而通用的接口.使用python manage.py runserver 通常只在开发和测试环境中使用。开发结束后,需要在高效稳定的环境中运行,这时可以使用WS_could not find a version that satisfies the requirement django

LINUX入门笔记--文件处理命令--目录处理命令_返回上级目录 英文-程序员宅基地

文章浏览阅读297次。目录处理命令1.mkdir命令名称:mkdir命令英文原意:make directories命令所在路径:/bin/mkdir执行权限:所有用户语法:mkdir -p[目录名]功能描述:创建新项目 -p是递归创建范例:如下图 1.$mkdir /tmp/fz:由ls查看后可见到在最后一行,在临时目录下成功创建了fz这个目录 ..._返回上级目录 英文

判断一个对象是不是数组,有几种办法?_判断是对象但是不是函数或者数组-程序员宅基地

文章浏览阅读2.8k次。这是一个出现过无数次的话题,这里再次重写仅作为个人的学习笔记,谢谢观看。0、typeoftypeof 运算符的主要作用就是用来检测数据的类型,一般情况下我们都是使用它来判断数据类型,但是这里,我把typeof 放在0的位置,因为 typeof 不能检测到数组类型!typeof 所能识别的类型只有原始类型(Undefined,Null,Boolean,Number,String,Symb..._判断是对象但是不是函数或者数组

华为交换机关机方法_华为路由器交换机基本操作-程序员宅基地

文章浏览阅读4.1k次。华为设备基本操作一、实验拓扑实验拓扑​​​二、基本功能配置1.查看系统displayversion显示版本号,型号,启动时间2.配置设备console密码,主机名,时间,时区,bannersystem-viewà进入系统视图模式,相当于思科的全局配置模式Enter system view, return user view withCtrl+Z.在系统视图模式,可以用ctrl+Z,quit,re..._华为交换机关机命令

Apache POI 设置宽度和行高_set the width (in units of 1/256th of a character -程序员宅基地

文章浏览阅读10w+次,点赞5次,收藏20次。FileOutputStream fos = new FileOutputStream("D:\\15.xls"); HSSFWorkbook wb = new HSSFWorkbook(); /** * ======================================================== * 设置cell宽度 * 通过sh_set the width (in units of 1/256th of a character width)

oracle 动态调用存储过程,返回游标类型_oracle 动态调用存储过程,并返回游标-程序员宅基地

文章浏览阅读6k次。 定义了一个存储过程procedure GetDate(aParam in varchar2,aExesql in out varchar2,aReturnSet out sys_refcursor ) isbeginselect sysdate into aExesql from dual;open aReturnSet for select sysdate today from dual;_oracle 动态调用存储过程,并返回游标

推荐文章

热门文章

相关标签