bootstrap专栏 03.图文处理 02.图文排版

# 02.图文排版[toc]{type: "ol", level: [3,4]}### 代码排版
- pre-scrollable
> 添加滚动条
- code
> 代码区域
- var
> 字体倾斜
- kbd
> 键盘标识
```html
<pre class="pre-scrollable" style="width: 600px; height: 200px"><code>def func1(x,y){return x+y}<var>def func2(x,y){return x-y}</var><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>S</kbd></code>
</pre>
```
![图文排版-代码排版](02.图文排版-代码排版.png)### 图片排版
#### 响应式图片
- img-fluid
> 将图片设置为响应式图片
> 内部实现：style="max-width:100%; height:auto"
```html
<img src="../img/panda.jpeg" class="img-fluid" alt="panda">
<img src="../img/tree.jpg" class="img-fluid" alt="tree">
```
![图文排版-图片排版-响应式图片-大](02.图文排版-图片排版-响应式图片-大.png)
![图文排版-图片排版-响应式图片-小](02.图文排版-图片排版-响应式图片-小.png)#### 图片居中
- 方式1
> 将图片设置为块元素
> mx-auto
>> x: 同时设定左右外边距[x轴]
>> y: 同时设定上下外边距[y轴]
```html
<img src="../img/panda.jpeg" class="mx-auto d-block" alt="panda">
```
- 方式2
> 将图片放入块元素中
```html
<div class="text-center"><img src="../img/panda.jpeg" alt="panda">
</div>
```
![图文排版-图片排版-图片居中](02.图文排版-图片排版-图片居中.png)#### 添加边框
- img-thumbnail
> 为图片添加边框
```html
<img src="../img/panda.jpeg" class="img-thumbnail float-right" alt="panda">
<div class="clearfix"></div>
```
![图文排版-图片排版-添加边框](02.图文排版-图片排版-添加边框.png)
![图文排版-图片排版](02.图文排版-图片排版.png)### 响应式组件
- 16:9
> 宽度100% 高度为宽度的56.25%
```html
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="../img/tree.jpg"></iframe>
</div>
```
![图文排版-响应式组件-大](02.图文排版-响应式组件-大.png)
![图文排版-响应式组件-小](02.图文排版-响应式组件-小.png)

bootstrap专栏 03.图文处理 02.图文排版相关推荐

微信公众号开发 [03] 结合UEditor实现图文消息群发功能
0.写在前面的话如何实现微信平台后台管理中的,图文消息发送功能? 大概的过程如下: 通过类似表单的形式,将文章各部分内容提交到后台,封装成一个实体类,并持久化到数据库中需要推送的时候,将不同的文章 ...
（转载）【笨木头Lua专栏】基础补充02：函数的几个特别之处
[笨木头Lua专栏]基础补充02:函数的几个特别之处笨木头 2014-08-14 21:45 Cocos2d-x Lua 阅读(4,507) 6条评论没想到距离上一篇基础补充已经过了 ...
只能在公司代码XXX的期间 2022/03 和2022/02 中记账，MMPV打开物料账记账期间
在收货的时候报错:只能在公司代码XXX的期间 2022/03 和2022/02 中记账说明:当前的时间与目前已开的记账期间不符. MMRV查看当前记账期间以下截图只是示例,没有当时的截图用MMP ...
php 微信图文推送,微信单图文、多图文推送、列表中排序
/** * @author yinhuiying(改于) * @since version - 2014-10-31 * @deprecated version - 2014-10-31 * 腾讯客服 ...
技术图文：02 创建型设计模式（下）
创建型设计模式(下) 知识结构: 图1 知识结构单例模式 – 确保对象的唯一性 Sunny 软件公司承接了一个服务器负载均衡软件的开发工作,该软件运行在一台负载均衡服务器上,可以将并发访问和数据流量 ...
技术图文：02 创建型设计模式（上）
创建型设计模式(上) 知识结构: 图1 知识结构简单工厂模式 Sunny 软件公司欲基于 C# 语言开发一套图表库,该图表库可以为应用系统提供各种不同外观的图表,如: 柱状图(histogram) ...
图文翻译-免费图文翻译-批量图文翻译软件
图文翻译,今天给大家分享一款免费的图文翻译,我们为什么要选择这款好用的翻译器,因为汇集了世界最好的几个翻译平台(百度/谷歌/有道),第一点翻译质量高,选择性多.第二点支持各种语言互译,第三点可以各种批 ...
图文下单系统,图文下单软件,印刷系统,印刷软件
思康图文下单系统V2009是深圳市思康技术有限公司专为输出.设计.喷画.文印.广告等公司方便他们拓展互联网广阔的市场机会进行开拓业务的一种在线下单平台,从而达到客户在网站注册.下单.传送文件.预存款项 ...
Mix-Editor图文编辑器----Android图文编辑器
Android图文编辑 s github地址 https://github.com/javalong/mix-editor 前言该项目主要是为了方便客户端进行图文编辑.当前版本1.0 如果大家需要的 ...

bootstrap专栏 03.图文处理 02.图文排版

bootstrap专栏 03.图文处理 02.图文排版相关推荐

最新文章

热门文章