Bootstrap每天必学之基础排版


Posted in Javascript onNovember 20, 2015

本次主要来了解的是排版,这个大部分在HTML的基本标签中也是存在的,所以相对比较简单,为了保证系列的完整性,也顺带复习下,还是记录一下。主要内容如下:

  • 1.标题
  • 2.页面主体
  • 3.强调
  • 4.缩略语
  • 5.地址
  • 6.引用
  • 7.列表

一、标题
Html中的所有标题标签,从<h1>到<h6>均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。

<div class="container"> 
 <h1 class="page-header">标题</h1>
 <h1>h1. Bootstrap heading</h1>
 <h2>h2. Bootstrap heading</h2>
 <h3>h3. Bootstrap heading</h3>
 <h4>h4. Bootstrap heading</h4>
 <h5>h5. Bootstrap heading</h5>
 <h6>h6. Bootstrap heading</h6>
 </div>

直接看效果吧

Bootstrap每天必学之基础排版

在标题内还可以包含<small>标签或.small元素,可以用来标记副标题。

<div class="container"> 
 <h1 class="page-header">标题</h1>
 <h1>h1. Bootstrap heading</h1><small>Secondary text</small>
 <h2>h2. Bootstrap heading</h2><small>Secondary text</small>
 <h3>h3. Bootstrap heading</h3><small>Secondary text</small>
 <h4>h4. Bootstrap heading</h4><small>Secondary text</small>
 <h5>h5. Bootstrap heading</h5><small>Secondary text</small>
 <h6>h6. Bootstrap heading</h6><small>Secondary text</small>
 </div>

二、页面主体
 Bootstrap将全局font-size设置为14px,line-height为1.428 。这些属性直接赋给<body>和所有段落元素。另外,<p>(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px)。

<h1 class="page-header">页面主体</h1>
 <div style="border:1px solid ">
  <p style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
 
 Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 </div>

通过效果展示就很明显了。

Bootstrap每天必学之基础排版

 Lead body copy
 通过添加.lead可以让段落突出显示。 

<h1 class="page-header">Lead Body Copy</h1>
 <div style="border:1px solid ">
  <p class="lead" style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
 
 Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 </div>
 <h1></h1>

通过和上面页面主体的对比就可以看到明显的效果了。

Bootstrap每天必学之基础排版

三、强调
直接使用HTML中用于标注强调的标签,并给他们赋予少许的样式。
1.小号文本

对于不需要强调的inline或block类型的文本,使用<small>标签包裹,其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。
你还可以为行内元素赋予.small以代替任何<small>标签。

<small>This line of text is meant to be treated as fine print.</small>

2.着重
通过增加font-weight强调一段文本。

<strong>rendered as bold text</strong>

3.斜体
用斜体强调一段文本。

<em>rendered as italicized text</em>

4.对齐class
通过文本对齐class,可以简单方便的将文字重新对齐。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

很明显第一行左对齐,第二行居中,第三行右对齐。
5.强调class
 这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。

<h1>强调Class</h1>
 <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
 <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
 <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <h1></h1>

Bootstrap每天必学之基础排版

四、缩略图

当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
基本缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

<abbr title="attribute">attr</abbr>

看到效果了,就是没办法截到图。
Initialism
为缩略语添加.initialism可以将其font-size设置的更小些。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

还是只上代码自己看效果。

五、地址
 让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。

<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>

<address>
 <strong>Full Name</strong><br>
 <a href="mailto:#">first.last@example.com</a>
</address>

 Bootstrap每天必学之基础排版

六、引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用,我们建议用<p>标签。

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Bootstrap每天必学之基础排版 

引用选项
对于标准样式的<blockquote>,可以通过几个简单的变体就能改变风格和内容。
命名来源:添加<small>标签来注明引用来源。来源名称可以放在<cite>标签里面。

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

Bootstrap每天必学之基础排版

会多一个Source Title
另一种展示风格

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。   

<blockquote class="pull-right">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>

Bootstrap每天必学之基础排版

向右对齐移动了额,当然也有相应的pull-left。

七、列表
 无序列表 
顺序无关紧要的一列元素。

<ul>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Lorem ipsum dolor sit amet</li>
 </ul>

这个也很明显和Html的一样。
有序列表
顺序至关重要的一组元素。

<ol>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Lorem ipsum dolor sit amet</li>
 </ol>

同理有序列表
无样式列表
移除了默认的list-style样式和左侧外边距的一组元素(只针对直接子元素)。这这是针对直接子元素,也就是说,你需要对所有嵌套的列表都添加此class才能具有同样的样式。

<ul class="list-unstyled">
 <li>Lorem ipsum dolor sit amet</li>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Lorem ipsum dolor sit amet</li>
 </ul>

Bootstrap每天必学之基础排版

内联列表
通过设置display: inline-block;并添加少量的内补,将所有元素放置于同一列。

<ul class="list-inline">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
 </ul>

效果当然就是在一行了。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是Bootstrap基础排版的全部内容,希望大家好好阅读,再结合相关文章进行扩展性的学习。

Javascript 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
jQuery 选择器理解
Mar 16 Javascript
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
Javascript的比较汇总
Jul 25 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
详解JavaScript的回调函数
Nov 20 #Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 #Javascript
jquery动态增加删减表格行特效
Nov 20 #Javascript
跟我学习javascript的异步脚本加载
Nov 20 #Javascript
JavaScript获取各大浏览器信息图示
Nov 20 #Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 #Javascript
跟我学习javascript的最新标准ES6
Nov 20 #Javascript
You might like
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
php限制文件下载速度的代码
2015/10/20 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
常用jQuery代码分享
2015/07/14 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
利用Python爬取可用的代理IP
2016/08/18 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
Python使用python-docx读写word文档
2019/08/26 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
python常用运维脚本实例小结
2020/02/14 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
如何用python免费看美剧
2020/08/11 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
大学生自我评价200字(4篇)
2014/09/17 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
初中军训感想
2015/08/07 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书