Bootstrap每天必学之基础排版

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

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

一、标题

Html中的所有标题标签,从

均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

直接看效果吧

在标题内还可以包含

标签或.small元素

,可以用来标记副标题。

h1. Bootstrap heading

Secondary text

h2. Bootstrap heading

Secondary text

h3. Bootstrap heading

Secondary text

h4. Bootstrap heading

Secondary text
h5. Bootstrap heading
Secondary text
h6. Bootstrap heading
Secondary text

二、页面主体

Bootstrap将全局font-size设置为14px,line-height为1.428 。这些属性直接赋给和所有段落元素。另外,

(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px)。

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,eget lacinia odio sem nec elit.

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

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

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

三、强调

直接使用HTML中用于标注强调的标签,并给他们赋予少许的样式。 1.小号文本   对于不需要强调的inline或block类型的文本,使用标签包裹,其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的元素被设置不同的font-size。 你还可以为行内元素赋予.small以代替任何标签。

This line of text is meant to be treated as fine print.

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

rendered as bold text

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

rendered as italicized text  

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

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

强调Class

四、缩略图

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

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

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

五、地址

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

Twitter,Inc.


795 Folsom Ave,Suite 600
San Francisco,CA 94107
(123) 456-7890

Full Name


六、引用

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

标签。

Lorem ipsum dolor sit amet,consectetur adipiscing elit. Integer posuere erat a ante.

会多一个Source Title

另一种展示风格

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

Lorem ipsum dolor sit amet,consectetur adipiscing elit. Integer posuere erat a ante.

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

七、

列表

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

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

相关推荐


前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自己重新定义class类即可,主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
起步导入:<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
(1)modal声明一个模态框(2)modal-dialog定义模态框尺寸(3)modal-lg定义大尺寸模态框(4)modal-sm定义小尺寸模态框(5)modal-header(6)modal-body(7)modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
图片在Bootstrap版本3中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性,从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
  一、应用http://www.bootcss.com/进入bootstrap4或bootstrap3中文网,想要快速地将Bootstrap应用到你的项目中,有以下两种办法: 1、bootstrap可以在线引用,方法如下:A、CSS将引入Bootstrap样式表的 <link> 标签复制并粘贴到 <head> 中,并放在所有其他样式表之前。<!
第87节:Java中的Bootstrap基础与SQL入门前言复习什么是JQ?:writelessdomore写更少的代码,做更多的事找出所有兄弟:$("div").siblings()基本过滤器:选择器:过滤器$("div:first"):first:找到第一个元素:last:找到最后一个元素:even:找出偶数索引:odd:找出奇叔索引
1.bootstrap表单(1)form声明一个表单域(2)form-inline内联表单域(3)form-horizontal水平排列表单域(4)form-group表单组、包括表单文字和表单控件(5)form-control文本输入框、下拉列表控件样式(6)checkboxcheck-inline多选框样式(7)radioradio-inline单选框样式(8)input-group表单控件组
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>首页<itle><
嗯。。。以前做ssh。应该是stratusspringhibernate。 然后现在来了一个新的需求。 要用java,bootstrap,oracle,springboot,jquery,mybatis。 开始,我也挺心虚的,但是后来一看,,,其实本没有必要这么虚。。。毕竟。。。这些东西,写的有问题。。。问题在于没有逻辑。 bootstrap,j
表格基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。
1、问题背景   一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态 2、实现源码 <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮<
Bootstrap简介什么是Bootstrap?Bootstrap官网框架:库liblibraryjQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单,更快捷;注意是Bootstrap不是BootStrap!这是一个词,不是
1.bootstrap图片img-responsive声明响应式图片2.bootstrap字体图标通过字体代替图标,font文件夹需要和css文件夹在同一目录3.bootst导航条(1)navbar声明导航条(2)navbar-default声明默认的导航条样式(3)navbar-inverse声明反白的导航条样式(4)navbar-static-top去掉导航条的圆角(5)n
1.路径导航<!doctypehtml><html><head><metacharset="utf-8"><title>路径导航<itle><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><scripttype="text/ja
问题描述:最近在学习BootStrap,过程中遇到引用glyphicon图标无法显示的问题,经过在百度后该问题已解决。1、首先看一下图标显示失败的页面:2、经过参考大佬们的经验,我找到了解决办法。首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的,没有把所有
BootStrap布局一、BootStrap布局CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等二、网格系统Bootstrap内置了一套响应式、移动优先的流式栅格系统,随着屏幕设备或可视窗口(viewport)尺寸的
1引入所需要的文件2用法
想让bootstrap的table列内容超出部分省略号,要在table上加table-layout:fixed和word-break:break-all,然后在头部thead的th加上宽度百分比,最后在列里加个标签如span,在这个span加上单行超出部分省略号的css:display:inline-block,overflow:hidden,white-space:nowrap,text-overflow:e