Bootstrap页面排版样式 - vip共享吧
  • 网站首页
  • IT技术笔记
    • PHP开发
    • JavaScript
    • SEO优化
    • 常用工具
  • 好资源福利
    • 会员账号共享
  • 网站模板源码
    • 小程序源码
    • 网站源码
  • 共享网络资源
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 视频解析
    • 高清壁纸
    • 公告动态
    • 广告合作
    • 关于我们


  • 个人中心
  •  我的主页
  •  我要投稿
  •  会员服务
  •  修改资料
  •  退出登录
导航菜单
  • 网站首页
  • IT技术笔记
    • PHP开发
    • JavaScript
    • SEO优化
    • 常用工具
  • 好资源福利
    • 会员账号共享
  • 网站模板源码
    • 小程序源码
    • 网站源码
  • 共享网络资源
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 视频解析
    • 高清壁纸
    • 公告动态
    • 广告合作
    • 关于我们
javascript教程JavaScript

Bootstrap页面排版样式

2023/4/21 韩俊  JavaScript 87 0

Bootstrap,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

学习要点:

1.页面排版

本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题、页面主体、对齐、列表等常规内容。

一.页面排版

Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

1.页面主体

Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px);<p>段落元素被设置等于 1/2 行高(即 10px);颜色被设置为#333。

//创建包含段落突出的文本
<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p> 

2.标题

//从 h1 到 h6
<h1>Bootstrap 框架</h1>//36px
<h2>Bootstrap 框架</h2>//30px
<h3>Bootstrap 框架</h3>//24px
<h4>Bootstrap 框架</h4>//18px
<h5>Bootstrap 框架</h5>//14px
<h6>Bootstrap 框架</h6>//12px 

我们从 Firebug 查看元素了解到, Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构,并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。

//内联元素使用标题字体
<span class="h1">Bootstrap</span> 

注:通过 Firebug 查看元素还看到,字体颜色、字体样式、行高均被固定了,从而保证了统一性,而原生的会根据系统内置的首选字体决定,颜色是最黑色。

在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题,

//在标题元素内插入 small 元素
<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架 <small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架 <small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架 <small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架 <small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架 <small>Bootstrap 小标题</small></h6> 

通过 Firebug 查看,我们发现 h1 ~ h3 下 small 元素的大小只占父元素的 65%,那么通过计算(查看 Firebug 计算后的样式), h1 ~ h3 下的 small 为 23.4px、 19.5px、 15.6px;h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为:13.5px、10.5px、9px。在 h1 ~ h6 下的 small 样式也进行了改变,颜色变成淡灰色:#777,行高为 1,粗度为 400。

3.内联文本元素

//添加标记,<mark>元素或.mark 类
<p>Bootstrap<mark>框架</mark></p> 
//各种加线条的文本
<del>Bootstrap 框架</del>//删除的文本
<s>Bootstrap 框架</s>//无用的文本
<ins>Bootstrap 框架</ins>//插入的文本
<u>Bootstrap 框架</u>//效果同上,下划线文本 
//各种强调的文本
<small>Bootstrap 框架</small>//标准字号的 85%
<strong>Bootstrap 框架</strong>//加粗 700
<em>Bootstrap 框架</em>//倾斜 

4.对齐

//设置文本对齐
<p class="text-left">Bootstrap 框架</p>//居左
<p class="text-center">Bootstrap 框架</p>//居中
<p class="text-right">Bootstrap 框架</p>//居右
<p class="text-justify">Bootstrap 框架</p>//两端对齐,支持度不佳<p class="text-nowrap">Bootstrap 框架</p>//不换行 

5.大小写

//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

6.缩略语

//缩略语
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

7.地址文本

//设置地址,去掉了倾斜,设置了行高,底部 20px
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

8.引用文本

//默认样式引用,增加了做边线,设定了字体大小和内外边距
<blockquote>
  Bootstrap 框架
</blockquote> 
//反向
<blockquote class="blockquote-reverse ">
  Bootstrap 框架
</blockquote>

9.列表排版

//移出默认样式
<ul class="list-unstyled">
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
</ul> 
//设置成内联
<ul class="list-inline">
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
  <li>Bootstrap 框架</li>
</ul> 
//水平排列描述列表
<dl class="dl-horizontal">
  <dt>Bootstrap</dt>
  <dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl> 

10.代码

//内联代码
<code><section></code> 
//用户输入
press <kbd>ctrl + ,</kbd> 
//代码块
<pre><p>Please input...</p></pre> 

Bootstrap 还列举了<var>表示标记变量,<samp>表示程序输出,只不过没有重新复写 CSS。

以上所述是小编给大家介绍的Bootstrap 页面排版样式的相关知识,希望对对大家有所帮助!

点赞:0 分享 海报 收藏

上一篇
Bootstrap表格与按钮功能
下一篇
Bootstrap每天必学之弹出框(Popover)插件
作者头像 作者名称 作者性别
韩俊
联系作者 作者主页

热门推荐

1 JavaScript是如何实现继承的(六种方式)
2 原生js实现addClass,removeClass,hasClass方法
3 基于javascript实现全屏漂浮广告
4 javascript HTML5文件上传FileReader API
5 javaScript数组迭代方法详解
6 js老生常谈之this,constructor ,prototype全面解析

评论列表

取消回复

    •  
      Login

      韩俊

      趁你现在还有时间,尽你自己最大的努力,努力做成你最想做的那件事,成为你最想成为的那种人,过着你最想过的那种生活。这个世界永远比你想的要更精彩,不要败给生活。

      站长 主页
      用户中心
      评论管理
      退出登陆
      • 845文章
      • 449评论
      • 76微语
  • 广告赞助

  • 二零二三年06月
    一二三四五六日
       1234
    567891011
    12131415161718
    19202122232425
    2627282930  
  • 分类

    • 网站模板源码
    • IT技术笔记
    • 好资源分享
    • 共享网络资源
  • 最新文章

      • 什么是传输和传播延迟?
        • 什么是网络服务术语?
          • 什么是负载敏感路由算法?
            • 什么是流控制传输协议 (SCTP) 服务?
              • 什么是计算机网络中的 IPV6 单播地址?
                • 什么是计算机网络中的 UDP 数据报格式?
                  • 什么是蜂窝网络带宽能力和基站?
                    • 什么是协议图?比较网络接口和协议
  • 热门文章

    • 酷狗音乐VIP账号 酷狗音乐会员账号共享2017.01.29更新
    • 芒果tv vip会员账号 芒果tv会员账号共享2017.01.29更新
    • 爱奇艺vip账号 爱奇艺/PPS会员账号共享2016.12.12更新
    • 优酷/土豆vip会员账号 优酷会员账号共享2017.01.29更新
    • 活动:免费获得爱奇艺VIP/PPS会员账号50天以上的使用权!
    • 酷我音乐VIP账号 酷我音乐会员账号共享2016.12.31更新
    • 暴风影音会员账号 暴风影音会员账号共享2016.12.31更新
    • m1905会员账号 m1905会员账号共享2016.10.21更新
  • 最新评论

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=1766679359

      2345和360修改太厉害,现在都不想给...

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=3293901900

      感谢大大的分享

    • https://www.vipshare8.com/content/uploadfile/202103/thum-490d1614564497.png

      回复了好奥v:如果没有解析成功,可以切换接口...

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=131241242441

      现在视频解析网站怎么用不了啦?

    • https://www.vipshare8.com/content/uploadfile/202103/thum-490d1614564497.png

      回复了全力以赴:已发送

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=471420954

      感谢大佬!麻烦您啦! 模板地址:htt...

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=qleez

      感谢大佬!麻烦您啦! 模板地址:htt...

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=1184503826

      回复了韩俊:万分感谢!!!

    • https://www.vipshare8.com/content/uploadfile/202103/thum-490d1614564497.png

      回复了Moen:已发送

    • https://www.vipshare8.com/content/uploadfile/202103/thum-490d1614564497.png

      回复了慕子訓Chester:已发送

  • 网站统计 I 当前在线:126人

    • 本站管理:1位
    • 用户总数:590位
    • 置顶文章:0篇
    • 日志总数:845篇
    • 微语总数:76条
    • 评论总数:449条
    • 标签总数:79条
    • 页面总数:8页
    • 分类总数:11个
    • 链接总数:47条
    • 运行天数:2960天
    • 最后更新:6月8日
    • 登录
    • 注册
    • 找回
    Copyright © 2023vip共享吧网站地图 网站备案豫ICP备19004194号-1

    免责声明:本站资源仅供用于学习和交流,本站部分素材内容来源于网络,如有侵权/投稿等,请及时联系站长.

    • 首页
    • SEO优化 SEO优化
    • 搜索
    • 视频解析
    • 用户

    大家都在搜

    • qq音乐会员共享
    • 爱奇艺VIP账号共享
    • PHP教程
    • pptv
    • 开发工具
    • 网盘赚钱
    • 网赚
    • sem优化
    • 华数tv会员账号分享
    • 经验分享
    • 酷我音乐会员账号
    • m1905会员账号
    • 网赚网盘
    • MySql
    • 全民娱乐
    • 酷狗会员账号共享
    • 
    • 