BootStrap4内容系列之代码

最新推荐文章于 2022-01-14 14:06:28 发布
最新推荐文章于 2022-01-14 14:06:28 发布
阅读量304 收藏
点赞数
分类专栏： BootStrap4 文章标签： bootstrap4 code var pre samp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32617703/article/details/103322351
版权

目录

官方地址

https://getbootstrap.com/docs/4.4/content/code/

其余文档地址

code

<code></code>
在 里编写行内代码，请务必转义HTML的尖括号

<div class="container">
    <h1>代码片段</h1>
    <p>可以将一些代码元素放到 code 元素里面:</p>
    <p>以下 HTML 元素: <code>span</code>, <code>&lt;section&gt;</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
</div>

kbd

<kbd></kbd>
你可以使用 <kbd> 来标记键盘上的按钮，这看起来很生动

<div class="container">
    <h1>Keyboard Inputs</h1>
    <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
    <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

var

<var></var>
使用var标记变量。

<div class="container">
    <h1>变量</h1>
    <p>
        <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
    </p>
</div>

sample

<samp></samp>
使用 samp 标签来展示可能的输出结果

<div class="container">
    <h1>sample用来展示程序的输出</h1>
    <p>
        <samp>This text is meant to be treated as sample output from a computer program.</samp>
    </p>
</div>

pre

<pre></pre>
在pre里编写多行代码。
再次确保在代码中转义任何尖括号以进行正确渲染。
你可以选择添加.pre-scrollable类，它将设置最大高度为340px并提供y轴滚动条。

<div class="container">
    <h1>Multiple Code Lines</h1>
    <p>For multiple lines of code, use the pre element:</p>
    <pre class="pre-scrollable">
        在 <code>&lt;pre&gt;</code> 里编写多行代码。 再次确保在代码中转义任何尖括号以进行正确渲染。
        你可以选择添加 .pre-scrollable 类，它将设置最大高度为340px并提供y轴滚动条。
    </pre>
</div>

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
    <title>05代码</title>
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<pre class="pre-scrollable">
    code
    kbd
    var
    samp
    pre
</pre>

<div class="container">
    <h1>代码片段</h1>
    <p>可以将一些代码元素放到 code 元素里面:</p>
    <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
</div>

<div class="container">
    <h1>Keyboard Inputs</h1>
    <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
    <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

<div class="container">
    <h1>变量</h1>
    <p>
        <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
    </p>
</div>

<div class="container">
    <h1>sample用来展示程序的输出</h1>
    <p>
        <samp>This text is meant to be treated as sample output from a computer program.</samp>
    </p>
</div>
<div class="container">
    <h1>Multiple Code Lines</h1>
    <p>For multiple lines of code, use the pre element:</p>
    <pre class="pre-scrollable">
        在 <code>&lt;pre&gt;</code> 里编写多行代码。 再次确保在代码中转义任何尖括号以进行正确渲染。
        你可以选择添加 .pre-scrollable 类，它将设置最大高度为340px并提供y轴滚动条。
    </pre>
</div>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
爱喝水的qdy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap基础——排版（二）
雪喵儿的博客
09-28 2767
代码本节内容相对来说比较简单，一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格： 1、使用<code></code>来显示单行内联代码 2、使用<pre></pre>来显示多行块代码 3、使用<kbd></kbd>来显示用户输入代码在使用代码时，用户可以根据具体的需求来使用不同的类型： 1、<code>：一般是针对于单个单词或单个句子的代码 2
bootstrap 第四章 代码
涛涛的博客
09-29 212
第四章 代码 名字 作用 <code> 标记标签 – – <kbd> 键盘按键样式标签 – – <pre> 按照输入的写法，输出文本 – – .pre-scrollable 加上这个类,pre就会出现滚动条 – – <var> 斜体 – – <samp> 编辑器里面是什么样式，samp标签输出就是什么样式 <!DOCTYPE html> <html> <h
BootStrap框架模块：BootStrap4基础
LiLi的博客
01-14 4860
BootStrap简介 Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。 利用 BootstrapCDN 和一个最简模板快速上手 Bootstrap。Bootstrap 是全球最流行的前端框架，用于构建响应式、移动设备优先的 WEB 站点。 BootStrap中文官网 第一章 BootStrap4基础 下载 Bootstr
追加元素后，滚动条位置控制
chyin1024的博客
03-21 2027
&lt;ul class="list-group pre-scrollable" id="images_msg_ul"&gt; &lt;li class="list-group-item"&gt;&lt;/li&gt; &lt;li class="list-group-item"&gt;&lt;/li&gt; &lt;li class=&qu
Bootstrap排版
u011435776的博客
03-27 468
【标题与副标题】Bootstrap标题样式进行了以下显著的优化重置：1、重新设置了margin-top和margin-bottom的值，  h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h...
Bootstrap 滚动条
热门推荐
zsg88的专栏
04-15 4万+
一：增加滚动条 其实只要在 相关模块的  class属性中，再加上  pre-scrollable 即可。 例如是在中添加pre-scrollable： 二：设置overflow (1)div style=" overflow:scroll; width:400px; height:400px;”> 记住宽和高一定要设置噢，否则不成的，不过在不超出时，
Bootstrap4学习
Suxiaomowang的博客
08-25 852
btn 按钮 btn 按钮没有边框和背景 btn-xxxx 设置按钮背景 btn-outline-primary 设置按钮边框颜色鼠标进入后修改背景颜色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt.
bootstrap4:bootstrap4的练习代码
05-10
2. **响应式工具**：Bootstrap 4 提供了一系列响应式工具类，如`.hidden-*`和`.visible-*`，用于控制元素在不同设备上的可见性。随着断点（如`.sm`, `.md`, `.lg`, 和 `.xl`）的使用，你可以决定内容在手机、平板、...
Bootstrap4 表单控件
12-14
Bootstrap 4 是一款流行的前端开发框架，用于快速构建响应式和移动优先的网站。在Bootstrap 4中，表单控件是构建用户交互界面的重要组成部分，它们提供了多种类型的输入元素，帮助用户输入、选择和提交数据。以下是...
Bootstrap超大屏幕的实现代码
08-31
4.最后，引入Bootstrap框架的JavaScript文件，用于实现超大屏幕的交互功能。 五、结论 Bootstrap超大屏幕的实现代码是一种基于Bootstrap框架的实现方法，能够帮助开发者快速创建超大屏幕页面。本文详细介绍了...
4个bootstrap免费的框架源代码
04-10
包含4个bootstrap免费的框架源代码，亲测都可以使用。
jQuery滚动插件scrollable
12-03
Scrollable是一个灵活、轻量级用于创建滚动内容的jQuery插件。任何内容（HTML、视频、文件、图片等...）都可以作为一个滚动项。支持水平与垂直两种滚动方向。用途：滚动效果，可制作分步验证页面
Gleek 非常漂亮优秀的前端模板 bootstrap4
03-05
Gleek 非常漂亮优秀的前端模板， 拿来学习一下 bootstrap4 css3
CSS大师：CSS大师，响应式，SASS，Flexbos，Grid y和Bootstrap4。VíctorRobles
02-17
“＃CSS-Master” CSS，响应式，SASS，Flexbos，Grid和Bootstrap 4的Master。VíctorRobles 乌迪米·维克多·罗伯斯·库迪戈·德尔·库索 < 强调重要
Bootstrap4 创建一个网页
12-13
Bootstrap4 创建一个网页 接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。 在学习之前我们可以先看下效果：
bootstrap4随书笔记
11-10
Bootstrap4是中国最流行的前端开发框架之一，用于快速构建响应式、移动优先的Web应用程序。它由Twitter开发并开源，提供了一系列预设的CSS样式、组件和JavaScript插件，极大地简化了网页设计工作。本笔记是作者经过...
Bootstrap淘宝购物车结算特效代码
03-20
Bootstrap是世界上最流行的前端开发框架之一，由Twitter推出，主要用于简化网页设计和开发过程。这个“Bootstrap淘宝购物车结算特效代码”显然与电商网站的购物车功能相关，利用Bootstrap的组件和样式来创建一个美观...
BootStrap-CSS样式_排版_代码
LoveyourselfJiuhao的博客
12-01 273
code标签：标注代码块，标签内包裹内联样式的代码片段，呈现背景粉红色块 pre标签：基本代码块，多行代码可以使用pre标签 pre-scrollable样式：增加一个高度max-height:350px滚动条，当高度超过350px就可以上下滚动了 &amp;lt;&amp;gt;：为"&lt;""&gt;"转义字符 &lt;!DOCTYPE html&gt; &lt;html lang...
Bootstrap4代码模板
没得简介
09-06 524
直接上代码: <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <!--为了保证在移动端能够正常显示--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fi
掌握Bootstrap 4：2016年全面教程
7. **实战项目演练**：通过一系列实战项目，读者将在实际操作中巩固所学知识，并学会如何将Bootstrap 4应用到实际项目中。 8. **版权和使用限制**：最后，本书强调版权保护，指出所有内容未经Packt Publishing事先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值