Bootstrap框架学习（三）——Bootstrap样式设计之排版

最新推荐文章于 2023-04-15 22:18:30 发布
最新推荐文章于 2023-04-15 22:18:30 发布
阅读量547 收藏
点赞数
分类专栏： Web

三、Bootstrap样式设计

1、Bootstrap排版

    Bootstrap排版主要包括标题、强调、缩略语、地址、引用和列表等元素。

    标题

        在HTML 中所有的标题标签（从<h1>到<h6>）都可以使用标题样式。另外，从Bootstrap 3 还提供了.h1到.h6类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含<small>标签或赋予.small类的元素，可以用来标记副标题。 

<div class="container">
    <section id="global">
        <div class="page-header">
            <h3>基本CSS样式 - 标题_副标题</h3>
        </div>
    </section>
    <div class="bs-example bs-example-type">
        <table class="table">
            <tbody>
            <tr>
                <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td>
            </tr>
            <tr>
                <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td>
            </tr>
            <tr>
                <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td>
            </tr>
            <tr>
                <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td>
            </tr>
            <tr>
                <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td>
            </tr>
            <tr>
                <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>


    页面主体

        Bootstrap框架默认将全局的字体大小设置为14px，行高度设置为20px，并将这些属性直接赋予<body>中的元素和所有段落元素。此外，段落<p>元素被设置为0.5倍的行高（即10px）的底部外边距（margin）；同时，通过添加.lead类可以让段落突出显示。 

<div class="container">
    <section id="global">
        <div class="page-header">
            <h3>基本CSS样式 - 页面主体</h3>
        </div>
    </section>
    <div class="bs-docs-example">
        <p>Bootstrap框架默认将全局的字体大小设置为14px，行高度设置为20px，并且这些属性会直接赋予<body>中的元素和所有段落元素。</p>
        <p>此外，段落元素还被设置了等于0.5倍行高（即10px）的底部外边距（margin）；同时，通过添加.lead类可以让段落突出显示。</p>
    </div>
    <div class="bs-docs-example">
        <p class="lead">通过添加 <code>.lead</code> 让段落突出显示</p>
    </div>
</div>


    强调

        Bootstrap框架针对页面需要强调的元素，优化设计了加粗、斜体、对齐和颜色强调等样式，直接使用HTML元素标签并辅助一些样式即可。 

<div class="container">
    <section id="global">
        <div class="page-header">
            <h3>基本CSS样式 - 强调样式</h3>
        </div>
    </section>
    <div class="bs-docs-example">
        <p><strong>用增加font-weight值的方式加粗强调一段文本</strong>.</p>
    </div>
    <div class="bs-docs-example">
        <p><em>还可以用斜体字强调一段文本</em>.</p>
    </div>
    <div class="bs-docs-example">
        <p><small>对于不需要强调的inline或block类型的文本使用small标签</small>.</p>
    </div>
    <div class="bs-docs-example">
        <p><strong>通过对齐方式也可以强调一段文本</strong>.</p>
        <p class="text-left">左对齐文字</p>
        <p class="text-center">中间对齐文字</p>
        <p class="text-right">右侧对齐文字</p>
    </div>
    <div class="bs-docs-example">
        <p><strong>通过工具类使用颜色来强调不同类别文本</strong>.</p>
        <p class="muted">This is muted text by '.muted' class.</p>
        <p class="text-warning">This is warning text by '.text-warning' class.</p>
        <p class="text-error">This is error text by '.text-error' class.</p>
        <p class="text-info">This is info text by '.text-info' class.</p>
        <p class="text-success">This is success text by '.text-success' class.</p>
    </div>
</div>


    缩略语     

        Bootstrap框架实现了对缩略语<abbr>元素的增强样式，当鼠标悬停在缩写词上会显示出完整的文本内容。缩略语元素带有title属性，外观展现为带有浅色的虚线框，当鼠标移至上面是会变成带有“问号”的指针。 


<div class="container">
    <section id="global">
        <div class="page-header">
            <h3>基本CSS样式 - 缩略语</h3>
        </div>
    </section>
    <div class="bs-docs-example">
        <p>当把鼠标悬停在缩略语<abbr title="abbreviation">abbr</abbr>标签上需要看到完整文本内容就要使用title属性.</p>
    </div>
</div>

  


    地址

        Bootstrap框架为地址<address>标签设置了增强样式，相关地址信息会以常规的形式呈现在页面上。 

<div class="container">
    <section id="global">
        <div class="page-header">
            <h3>基本CSS样式 - 地址</h3>
        </div>
    </section>
    <div class="bs-docs-example">
    <address>
        <strong>Bootstrap, Inc.</strong><br>
        ABC Street 688号, 北京, 中国<br>
        <abbr title="Telphone Number">tel:</abbr> (12)3456-7890
    </address>
    <address>
        <strong>姓名</strong><br>
        <a href="mailto:#">email@bootstrap.com</a>
    </address>
</div>


    引用

        Bootstrap框架为地址<blockquotes>标签设置了增强样式，引用学术网站中的文献、论文或文档资源。 

<div class="container">
    <section id="global">
        <div class="page-header">
            <h3>基本CSS样式 - 引用</h3>
        </div>
    </section>
    <div class="bs-docs-example">
        <blockquote>
            <p>在标准的引用里,可以很简单的改变风格和内容.</p>
            <p>添加small标签来注明引用来源,来源名称可以放在cite标签里面.</p>
            <small>Cite in <cite title="Bootstrap Inc.">bootstrap.com</cite></small>
        </blockquote>
    </div>
    <div>
        <blockquote class="pull-right">     <!--  .pull-right类实现了另一种风格的引用-->
            <p>在标准的引用里,可以很简单的改变风格和内容.</p>
            <p>添加small标签来注明引用来源,来源名称可以放在cite标签里面.</p>
            <small>Cite in <cite title="Bootstrap Inc.">bootstrap.com</cite></small>
        </blockquote>
    </div>
</div>


    列表

        Bootstrap框架针对列<li>表实现增强样式，包括无序列表<ul>、有序列表<ol>、无样式列表(.unstyled)和内联式列表(.inline)等。


<div class="container">
    <section id="global">
        <div class="page-header">
            <h3>基本CSS样式 - 列表(无序列表)</h3>
        </div>
    </section>
    <div class="bs-docs-example">
        <ul>
            <li>Tom</li>
            <li>Jack</li>
            <li>Sub List
                <ul>
                    <li>Football</li>
                    <li>NBA</li>
                    <li>Baseball</li>
                </ul>
            </li>
            <li>123.com</li>
            <li>abc.com</li>
        </ul>
    </div>
</div>

    描述

        描述是HTML5新增的功能标签，是对列表标签<dl>-<dt>-<dd>功能延伸，主要包括默认描述样式和水平描述样式两类。


<div class="container">
    <section id="global">
        <div class="page-header">
            <h3>基本CSS样式 - 默认描述样式</h3>
        </div>
    </section>
    <div class="bs-docs-example">
        <dl>
            <dt>Bootstrap</dt>
<div class="container">
    <section id="global">
        <div class="page-header">
            <h3>基本CSS样式 - 列表(内联式列表)</h3>
        </div>
    </section>
    <div class="bs-docs-example">
        <ul class="inline">
            <li>Tom</li>
            <li>Jack</li>
            <li>Football</li>
            <li>NBA</li>
            <li>Baseball</li>
            <li>123.com</li>
            <li>abc.com</li>
        </ul>
    </div>
</div>  

<div class="container">
    <section id="global">
        <div class="page-header">
            <h3>基本CSS样式 - 水平描述样式</h3>
        </div>
    </section>
    <div class="bs-docs-example">
        <dl class="dl-horizontal">
            <dt>Bootstrap</dt>
            <dd>Bootstrap is a CSS framework.</dd>
            <dt>CSS</dt>
            <dd>CSS is Cascading Style Sheet.</dd>
            <dd>CSS 3 is the updated version.</dd>
            <dt>HTML 5</dt>
            <dd>HTML 5, CSS & Bootstrap....</dd>
        </dl>
    </div>
</div>

代码

       代码是HTML5新增的功能标签，可以在文本中显示代码样式的内容，主要包括内联式代码<code>和基本代码块<pre>两类。


<div class="container">
    <section id="global">
        <div class="page-header">
            <h3>基本CSS样式 - 代码(内联式)</h3>
        </div>
    </section>
    <div class="bs-docs-example">
        inline code: <code>alert('this is inline code.')</code>.
    </div>
</div>

<div class="container">
    <section id="global">
        <div class="page-header">
            <h3>基本CSS样式 - 基本代码块</h3>
        </div>
    </section>
    <!--<div class="bs-docs-example">
        pre code: <pre>var i=1;<br>var j=2;<br>alert(i+j);</pre>
    </div>-->
    <div class="bs-docs-example">
        <pre class="prettyprint linenums" style="margin-bottom: 4px;">var i=1;<br>var j=2;<br>alert(i+j);</pre>
    </div>
    <!--<div class="bs-docs-example">
        <pre class="pre-scrollable">var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br></pre>
    </div>-->
</div>


BlackCarbo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJs bootstrap搭载前台框架——准备工作
10-21
本文主要介绍AngularJs bootstrap搭载前台框架，这里对Bootstrap 搭载环境，及注意事项做了讲解，有需要的小伙伴可以参考下
Bootstrap（一）脚手架
踟蹰千年的博客
10-19 915
bootstrap脚手架 必须使用HTML5文档类型 Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。 使用前需要引入相关css js 以及jquery &lt;link href="../css/bootstrap.css" rel="stylesheet"/&gt; &lt;script...
Bootstrap认识
qq_41956016的博客
09-12 753
一、Bootstrap入门 **介绍：**Tiwtter公司研发的机遇css js 的前段框架，适用于 移动端，pc 的样式自适应。 **特点：**移动设备优先的样式 Bootstrap的版本：2.x 3.x 4.x 文件目录： 1.bootstrap.min.css和bootstrap.min.js是压缩后的文件，适用于生产环境 2.bootstrap.css和bootstrap.js是普通，适...
Bootstrap学习笔记（2）Bootstrap样式
Andanc的博客
09-05 676
一.Bootstrap整体架构 Bootstrap来自Twitter，是目前最流行的前端框架。它是基于HTML、CSS、JavaScript的一个简洁、灵活地开源框架。从官网 http://getbootstrap.com下载最新版 解压缩后可以看到三大核心目录：css(样式)、js(脚本)、fonts(字体)，就是我们所需要的 Bootstrap 运行环境。其中需要进入到页面的是 bootst...
Vue脚手架中使用bootstrap框架和 jquery
wangxinwang996的博客
04-15 268
结算
1-19. Bootstrap 分页、翻页样式总结
热门推荐
淡泊以明志，宁静以致远
02-12 1万+
分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页 默认的分页 <ul class="pagination"> <li><a href="#">&laquo;</a></li> <li><a href="#">1</a>&...
IE6下hover伪类显示隐藏子元素bug及解决方案
yan_zhizi3的专栏
05-22 1617
周所周知，ie6只有a元素支持hover伪类，在实际应用中，为了兼容ie6，有时候会使用a元素来做子元素的显示及隐藏，比如下图： 黄色小tips默认隐藏，鼠标hover到“促”字图标后，黄色tips显示。这种简单的交互可以直接使用a标签的hover伪类实现，但在ie6下，这种伪类方法会有一些奇怪的问题，下面用一个简单的demo来演示这种情况下所遇到的问题。 HTML代码：
BootStrap框架样式大全
weixin_45773020的博客
07-14 210
引入链接：BootStrap样式示例
Bootstrap——排版（标题、段落、强调、缩略语、引用）
m0_69034993的博客
10-09 1619
HTML5定义了若干个标签强调的标签，有、、、、、、等，在Bootstrap4中同样也可以使用，用来为元素添加强调样式。（3）固定不同级别标题字体大小，一级为2.5rem，二级为2rem，三级为1.75rem，四级为1.5rem，五级为1.25rem，六级为1rem。和都可以实现下画线效果，但是前者通常与一起使用。和都可以实现删除效果，但是更具有语义化，能更形象的描述删除意思。
Bootstrap分页样式
weixin_30301449的博客
10-10 619
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 分页的大小</title>//需引用bootstrap 3.3.7的bootstrap.min.css <link rel="style...
AngularJs bootstrap搭载前台框架——基础页面
10-21
本文主要介绍AngularJs bootstrap搭载前台框架基础页面的建设，这里整理饿了相关资料及实现实例代码，有兴趣的小伙伴可以参考下
AngularJs bootstrap搭载前台框架——js控制部分
11-26
这个简单的框架最后只剩下了js的控制部分了，angular框架有自己的逻辑部分，有自己的controller和service层，由于我们可能要用到angular的一些内置的resource和cookie，所以我们需要再加入angular的一些lib：  ——...
Bootstrap样式
qq_43713967的博客
11-02 394
1.Bootstrap样式 Bootstrap简介 来自Twitter，是目前最流行的前端框架 是基于HTML、CSS、Javascript的一个简洁、灵活的开源框架，便于开发人员随时上手Bootstrap从V 3版本开始全面支持移动平台，并贯彻移动先行的宗旨 Bootstrap受欢迎的原因 快速制作响应式的网页来适配各种终端 开发简单、方便 移动先行 代码开源 代码有良好的规范 Bootstrap的使用场景 响应式页面 移动端页面 后台页面 带有交互效果的页面 浏览器对Bootstrap的支持 使用Bo
Bootstrap 全局样式的简单介绍
前端小白
06-23 7893
Bootstrap这个框架相信对于前端来说都不陌生，之前刚接触时就只是“拿来主义”：需要用到时就查看下Bootstrap的官网文档直接将需要的插件或者样式拷贝下来用，最近终于有机会好好静下心来了解这个框架。对Bootstrap的认知也有了一定的改变，下面是本人在学习这个框架的全局样式时的一些个人见解也是我个人觉得在绘制页面时比较实用的几个知识点。内容比较直白通俗，希望路过的各位大牛不要见怪，如若有
bootstrap-paginator 个性化分页插件使用
汪小哥
10-29 6888
$.fn.bootstrapPaginator.Constructor = BootstrapPaginator 我们在看JS插件的时候经常看到这样的，这个其实就是将这个类的放值在我们的JQuery的全局空间里面去。 var BootstrapPaginator = function (element, options) { this.init(element, options)
bootstrap之pager&listGroup&badge样式
xixi
11-11 442
一、前言现在开始介绍bootstrap的翻页(pager)、列表组(list-group)和徽章(badge) 样式。二、源码1、pager.less1.1、pager.less源码 // // Pager pagination(翻页分页导航) // -------------------------------------------------- .pager { padding-l
【Bootstrap】＜前端框架＞Bootstrap常用样式 - 排版
范同学的学习历程
01-06 1921
目录 一、标题： 二、段落： 三、强调： 四、对其效果： 五、列表： 1.去点列表： 2.内联列表： 3.定义列表： 六、代码： 七、表格： 一、标题： Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>，只是Bootstrap覆盖了默认的样式，使用其所在浏览器下显示的效果一样。为了让非标题标签元素和标题使用相同的样式，还特意定义了.h1- .h6六个类名。同时，后面还可以跟着一个小的副标题<smal...
在vue-cli脚手架项目中使用bootstrap框架和jquery
m0_71814235的博客
09-28 370
在vue-cli脚手架项目中使用bootstrap框架和jquery
2024-2030全球与中国低脂凝乳奶酪市场现状及未来发展趋势.docx
最新发布
04-30
2024-2030全球与中国低脂凝乳奶酪市场现状及未来发展趋势
怎么利用bootstrap第三方框架写样式
06-06
Bootstrap是一个流行的前端框架，它提供了大量的CSS样式和JavaScript插件，可以帮助我们快速搭建网站和应用程序。下面是使用Bootstrap编写样式的一些基本步骤： 1. 引入Bootstrap的CSS和JavaScript文件。可以在网上...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值