BootStrap-CSS样式_排版_代码

最新推荐文章于 2022-04-29 18:55:16 发布
最新推荐文章于 2022-04-29 18:55:16 发布
阅读量247 收藏
点赞数
分类专栏： BootStrap 文章标签： BootStrap BootStrap-CSS样式_排版_代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LoveyourselfJiuhao/article/details/84669752
版权

code标签：标注代码块，标签内包裹内联样式的代码片段，呈现背景粉红色块

pre标签：基本代码块，多行代码可以使用pre标签

pre-scrollable样式：增加一个高度max-height:350px滚动条，当高度超过350px就可以上下滚动了

&lt;&gt;：为"<"">"转义字符

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- code标签：标注代码块，标签内包裹内联样式的代码片段，呈现背景粉红色块
    pre标签：基本代码块，多行代码可以使用pre标签
    pre-scrollable样式：增加一个高度max-height:350px滚动条，当高度超过350px就可以上下滚动了
    &lt;&gt;：为"<"">"转义字符 -->
        <div class="container">
            For example, <code>&lt;section&gt;</code> should be <code>wrapped</code> as inline.
            <pre>
            &lt;html&gt;
            &lt;head&gt;
            &lt;/head&gt;
            &lt;body&gt;
            &lt;/body&gt;
            &lt;/html&gt;
        </pre>
        <div>
            <pre>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt asperiores provident, quos incidunt repellendus earum iusto eum expedita placeat consectetur ipsum veritatis? Deserunt omnis illo porro commodi perferendis odio dicta.
            </pre>
        <div>
            <pre class="pre-scrollable">
                Lorem ipsum dolor sit amet,&lt;p&gt;Sample text here...&lt;/p&gt;, consectetur adipisicing elit. Hic ratione quos ullam voluptas id non atque, dignissimos aut in eligendi officiis, eius laborum deserunt optio veritatis dolorum eveniet ipsam inventore!
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repellat nesciunt beatae id, consequuntur, nostrum delectus deleniti velit voluptate voluptatibus sit quasi architecto dignissimos repudiandae quaerat, fugit ullam facere dolorum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus quia laboriosam, praesentium modi hic est. Tenetur modi doloribus deleniti, quia voluptatem rerum, provident eligendi, cum totam necessitatibus aliquid placeat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repellat nesciunt beatae id, consequuntur, nostrum delectus deleniti velit voluptate voluptatibus sit quasi architecto dignissimos repudiandae quaerat, fugit ullam facere dolorum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus quia laboriosam, praesentium modi hic est. Tenetur modi doloribus deleniti, quia voluptatem rerum, provident eligendi, cum totam necessitatibus aliquid placeat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repellat nesciunt beatae id, consequuntur, nostrum delectus deleniti velit voluptate voluptatibus sit quasi architecto dignissimos repudiandae quaerat, fugit ullam facere dolorum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus quia laboriosam, praesentium modi hic est. Tenetur modi doloribus deleniti, quia voluptatem rerum, provident eligendi, cum totam necessitatibus aliquid placeat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repellat nesciunt beatae id, consequuntur, nostrum delectus deleniti velit voluptate voluptatibus sit quasi architecto dignissimos repudiandae quaerat, fugit ullam facere dolorum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus quia laboriosam, praesentium modi hic est. Tenetur modi doloribus deleniti, quia voluptatem rerum, provident eligendi, cum totam necessitatibus aliquid placeat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repellat nesciunt beatae id, consequuntur, nostrum delectus deleniti velit voluptate voluptatibus sit quasi architecto dignissimos repudiandae quaerat, fugit ullam facere dolorum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus quia laboriosam, praesentium modi hic est. Tenetur modi doloribus deleniti, quia voluptatem rerum, provident eligendi, cum totam necessitatibus aliquid placeat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repellat nesciunt beatae id, consequuntur, nostrum delectus deleniti velit voluptate voluptatibus sit quasi architecto dignissimos repudiandae quaerat, fugit ullam facere dolorum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus quia laboriosam, praesentium modi hic est. Tenetur modi doloribus deleniti, quia voluptatem rerum, provident eligendi, cum totam necessitatibus aliquid placeat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repellat nesciunt beatae id, consequuntur, nostrum delectus deleniti velit voluptate voluptatibus sit quasi architecto dignissimos repudiandae quaerat, fugit ullam facere dolorum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus quia laboriosam, praesentium modi hic est. Tenetur modi doloribus deleniti, quia voluptatem rerum, provident eligendi, cum totam necessitatibus aliquid placeat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repellat nesciunt beatae id, consequuntur, nostrum delectus deleniti velit voluptate voluptatibus sit quasi architecto dignissimos repudiandae quaerat, fugit ullam facere dolorum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus quia laboriosam, praesentium modi hic est. Tenetur modi doloribus deleniti, quia voluptatem rerum, provident eligendi, cum totam necessitatibus aliquid placeat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repellat nesciunt beatae id, consequuntur, nostrum delectus deleniti velit voluptate voluptatibus sit quasi architecto dignissimos repudiandae quaerat, fugit ullam facere dolorum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus quia laboriosam, praesentium modi hic est. Tenetur modi doloribus deleniti, quia voluptatem rerum, provident eligendi, cum totam necessitatibus aliquid placeat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repellat nesciunt beatae id, consequuntur, nostrum delectus deleniti velit voluptate voluptatibus sit quasi architecto dignissimos repudiandae quaerat, fugit ullam facere dolorum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus quia laboriosam, praesentium modi hic est. Tenetur modi doloribus deleniti, quia voluptatem rerum, provident eligendi, cum totam necessitatibus aliquid placeat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus quia laboriosam, praesentium modi hic est. Tenetur modi doloribus deleniti, quia voluptatem rerum, provident eligendi, cum totam necessitatibus aliquid placeat.
           </pre>
        </div>
        

    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../js/jquery-1.11.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../js/bootstrap.min.js"></script>
</body>

</html>

显示效果：

 

有梦的小草
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中自动换行加个滚动条,pre: 滚动条(overflow)与自动换行(word wrap)
weixin_29182481的博客
05-31 1109
今天lesca介绍下如何实现HTML标签pre的自动换行与自动滚动条。这些特性都可以使用CSS实现。我们先介绍自动滚动条：预览一下：This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers...This is "pre" tag tes...
5.全局css样式之排版.wmv
05-05
bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。
第二章之Bootstrap 页面排版样式
10-22
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本文给大家介绍Bootstrap 页面排版样式的相关知识，希望对大家有所帮助！
Web前端面试题——HTML/CSS部分理解题
u012194956的博客
09-14 2万+
1.盒子模型 （1）是什么：每个元素被表示为一个矩形的盒子，由四部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。 （2）盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。 （3）两种盒模型的区别：标准盒模型内容大小就是conten...
html tab标签_HTML入门笔记1
weixin_39746794的博客
11-29 370
这两天学习了HTML概览以及HTML标签，现在用博客做一下这两天的总结。首先关于HTML,他的发明人是：Tim Berners-Lee。他发明的其实就是www(world wide web)--万维网，其中包含了三个内涵以及技术，分别为：URLHTTPHTML。他发明WWW的理念是让大家输入网址就能够看到网页。万维网其实与互联网是有区别的，互联网一开始是通过IP连接两台电脑，让他们彼此互相访问的，...
Day-4 Bootstrap4 颜色
May21☀️
10-12 176
颜色颜色具有代表意义的颜色类三级目录 颜色 具有代表意义的颜色类 重要     三级目录
pre小技巧：强制换行与横向滚动条[转]
dly120219891208的专栏
12-30 2195
pre小技巧：强制换行与横向滚动条[转] pre 标签中的代码时常会超出模板的边界，这时我们就得想想办法了： 办法一:强制要出界的代码换行 View Code CSS pre {white-space: pre-wrap;       /* css-3 */  white-space: -moz-pre-wrap;
html 让pre标签超出部分出现滚动条_HTML入门笔记1
weixin_39581099的博客
01-19 962
HTML是李爵士在1990年左右发明，他为了上网，自己写了一个第一个浏览器，第一个服务器，然后用自己的浏览器访问了自己的服务器。他发明了www万维网，同时发明了HTML，HTTP和URL。 HTML的起手式是一个感叹号，tab之后会自动出现html的代码结构。如图所示，为起手式的代码含义。常用的章节标签有：h1~h6 ：标题，各个标签里面标题字体大小不一样section:...
学习使用Bootstrap页面排版样式
12-11
Bootstrap之页面排版样式 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备...
Bootstrap（CSS库）
12-29
正如Twitter架构师马克·奥托（Mark Otto）在Twitter开发者博客上所写的那样，“Bootstrap 使用了一些最新的Web 浏览器技术，向开发者提供了时尚的排版、样式、按钮、表格、网格、导航和一切所需的东西，而且它所占...
Bootstrap【第一章】入门、全局CSS样式【栅格系统】
明思齐的博客
04-29 2003
前言：Bootstrap【前端开发框架】 一、WWW 1、What？ ①2011年，来自Twitter，是目前最受欢迎的前端框架 ②是一个用于快速开发Web应用程序和网站的前端框架 ③Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 简单概述：Bootstrap是一个建立一个页面，可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架。 2、Why？ ①响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电...
Bootstrap 排版样式
不要皱眉
03-21 4562
页面排版1.页面主体Bootstrap将全局： font-size 设置为14px; line-height 设置为1.428（20px）; p标签 设置为1/2行高（10px）; 创建包含段落突出的文本： 添加 class=”lead”，得到更大更粗、行高更高的文本。<!DOCTYPE html> <html> <head> <meta charset="utf-8"
Bootstrap 全局CSS 样式：标签及相关类的使用
WangMin@汪末末
08-29 661
作者: WangMin 格言: 努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 标题 HTML标签中的所有标题标签h1-h6都可以使用，同时bootstrap还提供了.h1到.h6，它们的字体大小和标签h1-h6的字体大小一致，为的是给内联（inline）属性的文本应用到标题的样式。 <h1>bootstrap</h1> <div class="h1">bootstrap</div> 在标题内还可以包含 <smal
bootstrap+css进行页面布局
weixin_34381666的博客
12-09 147
效果 用到了bootstrap中的表格css、圆形css、以及上一页下一页css。 布局页面，填充数据，实现js动态效果（比如点击下一页，上一页），逐步完善。   不仅仅要会使用bootstrap中的样式，也要能够灵活的运用css样式，两者结合，才能够融会贯通，活学活用。 1.表格部分 &lt;div id="datalist"&gt; &lt;tab...
HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程
热门推荐
AlbertYang的博客
01-17 4万+
承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一票吧！谢谢！❤️ 每一票都是我坚持的动力和力量！https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743 作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领...
BootStrap-CSS样式_排版_强调(斜体加粗对齐颜色)
LoveyourselfJiuhao的博客
09-19 5082
&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta
bootstrap css是什么，作用是啥
最新发布
05-16
其中，Bootstrap CSS是Bootstrap框架中的一个组成部分，用于提供基本的页面布局和样式设置。 Bootstrap CSS的作用是帮助开发人员快速构建具有一致性和响应性的网站和应用程序。它包含了许多常用的CSS类，例如用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值