位置: 编程技术 - 正文

Bootstrap入门书籍之(一)排版(bootstrap基础教程书籍)

编辑:rootadmin

推荐整理分享Bootstrap入门书籍之(一)排版(bootstrap基础教程书籍),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap教程 pdf,bootstrap教程 pdf,bootstrap教材,bootstrap学习,bootstrap学习,bootstrap教程 pdf,bootstrap入门经典 pdf,bootstrap书籍推荐,内容如对您有帮助,希望把文章链接给更多的朋友!

推荐阅读:Bootstrap入门书籍之(零)Bootstrap简介

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。

使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。

1. 标题

在Bootstrap中使用标题的方式和常规html一样:从 <h1> 到 <h6> 分别从大到小安排标题元素,只不过在Bootstrap中重新设置了其默认样式,从源码中可以看到有如下共性:

字体颜色与字体样式继承自父元素,字体粗细为,且行高全部设为1.1(也就是font-size的1.1倍)

在不同大小的标题中有着如下区别:

在Bootstrap中对于不同级别标题字体大小设置为: h1=px,h2=px,h3=px,h4=px,h5=px和h6=px。

重新设置了 margin-top 和 margin-bottom 的值, h1~h3 重置后的值都是 px ; h4~h6 重置后的值都是 px 。

除此之外在Bootstrap中为了 让非标题元素和标题使用相同的样式 ,还特意定义了 .h1~.h6 六个类名。如下所示:

在Bootstrap中,下面的代码,显示效果相同。

因为在实际应用中,我们可能经常会遇到除了主标题外,之后紧跟着一个副标题的情况。Bootstrap人性化的为我们设置了这样一个效果。使用方式也特别简单,如下:

当然毋庸置疑的是,从 <h1> 到 <h6> 都可以使用该设置。副标题 <small> 有着自己一些独特的样式:

行高全部都设置为了1,而且字体粗细变成了常规效果(不加粗),同时颜色被设置为灰色( # )。在h1~h3内的 <small> 标签文本,其大小都设置为当前字号的%;而在h4~h6内的字号都设置为当前字号的%;

2. 正文文本

Bootstrap中的文本全局样式如下:

字体大小为px行高为1.(约等于px)字体颜色为 #p标签外部有着个像素的下外边距 margin-bottom:px;当然,你是可以自行设置重置样式的。^_^

3. 强调

字体风格相关

强调相关的类

在Bootstrap中定义了一系列的这样的类,用于不同的情景,出去text外,还有bg(背景颜色)等等。使用方法类似,只是前面的文本进行了一些改变!所以。 记住这6个单词吧

4. 文本对齐风格

在Bootstrap中,为了简化操作,方便使用,使用了上面这四个类分别对应我们在CSS中常常使用 text-align 来实现文本的对齐风格的设置。

5. 列表

在Bootstrap中对于列表的设置与原生的html基本一致,需要注意的有:

在列表之间有px的下外边距

在嵌套列表中,不含有下边距

Bootstrap当然不会就这么简单做一点点修改,它定义了一些关于列表的类给我们使用。

去点列表 .list-unstyled

从源码中,我们可以看到这样的信息,它除了将项目编号去除之外,还将默认的左边距也清除掉了。

在这样一段代码中,三个列表项会整齐的 排列在一起 ,且都没有 项目符号

内联列表 .list-inline

除了去点列表之外,Bootstrap还可以通过添加类名“.list-inline”来实现内联列表,简单点说就是 把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。 也可以说内联列表就是为制作水平导航而生。

水平定义列表 .dl-horizontal

现有代码如下:

Bootstrap入门书籍之(一)排版(bootstrap基础教程书籍)

在浏览器全屏显示中可以看到效果如下:

我们来把屏幕大小进行改变,在遇到一个临界值时(小屏),水平定义列表将回复到原始的状态,如下改变:

这是为什么呢?我们去看看源码吧!

原来在这里添加了一个媒体查询,只有 屏幕大于px 的时候,添加类名 .dl-horizontal 才具有水平定义列表效果。其实现主要方式:

将dt设置了一个左浮动,并且设置了一个宽度为px将dd设置一个margin-left的值为px,达到水平的效果当标题宽度超过px时,将会显示三个省略号现在再看看上面的效果是不是和这里的描述都是一样的呢?答案当然是肯定的 ^ ^

6. 代码

在Bootstrap主要提供了三种代码风格:

使用 <code></code> 来显示单行内联代码——针对于 单个单词或单个句子 的代码使用 <pre></pre> 来显示多行块代码——针对于 多行代码 (也就是成块的代码)使用 <kbd></kbd> 来显示用户输入代码——表示 用户要通过键盘输入的内容

直接来看效果吧!

代码如下:(需要注意的是,**不管使用哪种代码风格,在代码中碰到小于号( < )和大于号( > )都需要使用转义字符来替代)

code风格:

pre风格:

kbd风格:

<pre> 元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在 pre标签 上添加类名 .pre-scrollable ,就可以控制代码块区域 最大高度为px ,一旦超出这个高度,就会在 Y轴(纵向)出现滚动条。

当然,你也可以进行自定义配置,例如:只需要在自定义的css中,对于该类添加一个 word-wrap: normal; ,这样的话,在代码块边框横向宽度小于内部代码横向长度时,就会出现横向滚动条。

7. 表格

表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了 1种基础样式 和 4种附加样式 以及 1个支持响应式的表格 。

对应上面所说的,Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:

.table 基础表格.table-striped 斑马线表格.table-bordered 带边框的表格.table-hover 鼠标悬停高亮的表格.table-condensed 紧凑型表格.table-responsive 响应式表格

.table 主要有三个作用:

给表格设置了margin-bottom:px以及设置单元内距在thead底部设置了一个2px的浅灰实线每个单元格顶部设置了一个1px的浅灰实线具体大家可以在源码中查看,后几种附加的样式在这里也不多说,但是下面说一些 注意事项:

后几种表格附加样式,必须在基础样式 .table 之后,例如 <table class="table table-bordered table-hover">响应式表格:其原理是在表格 外部添加容器 把普通表格 包裹 起来,下面进行详细说明:

下面是宽屏的效果(和普通的表格无区别):

此处是窄屏的效果(可以看到滚动条的出现):

表格行的类,表格情景

在上面已经说到了在Bootstrap中,为不同的情景做了不一样的颜色,用于不同的信息展示。只是在类名上做了一些小小的改变。下面就可以看到:

只需要在 <tr> 标签添加上这些类就可以使用了。

除此之外,通过源码可以看到,在这些颜色设置之外,Bootstrap还单独设置了 hover效果(悬浮状态) 的 颜色加深 效果(它对于不同的情况单独进行了颜色设置)。

实现也特别简单,只需要像 <table class="table-hover"> 这样,在 <table> 标签加上一个 table-hover 的类。(在未对 <tr> 进行情景颜色设置时,该类依然有效果,只是效果不一样,上面已经说到了,因为它的单独设置,具体请到源码中查看)

也正因为这样,如果你想自定义颜色的话, 除了修改 tr 元素的颜色样式外,在 .table-hover 表格中也要做相应的调整!

排版的内容到这里就结束了,希望对大家学习Bootstrap排版相关知识有所帮助!

Bootstrap入门书籍之(三)栅格系统 实现原理栅格系统是Bootstrap中的核心,正是因为栅格系统的存在,Bootstrap才能有着如此强大的响应式布局方案。下面是官方文档中的解说:Bootstrap内置

Bootstrap入门书籍之(四)菜单、按钮及导航 我们接下来要学习的东西呢,是Bootstrap为我们提供的一些组件,这些组件的使用非常简单,可以方便快捷帮助我们搭建网站,并且能达到一个不错的显

Bootstrap入门书籍之(五)导航条、分页导航 导航条导航条(navbar)和上一节介绍的Bootstrap入门书籍之(四)菜单、按钮及导航。导航(nav),就相差一个字,多了一个条字。其实在Bootstrap框架中

标签: bootstrap基础教程书籍

本文链接地址:https://www.jiuchutong.com/biancheng/380368.html 转载请保留说明!

上一篇:Bootstrap入门书籍之(零)Bootstrap简介(bootstrap入门教程)

下一篇:Bootstrap入门书籍之(三)栅格系统(bootstrap入门教程)

  • 物业公司停车位出租发票税率是多少钱
  • 税收筹划分为哪几类
  • 非税缴税是什么意思
  • 银行存款属于其他货币资金核算内容吗
  • 货款不入公司账户属什么行为
  • 不抵扣勾选怎么撤销
  • 股东个人将钱打入公司对公账户,能否算作投资款
  • 房地产开发企业预缴增值税
  • 企业所得税纳税人包括哪些类型
  • 房地产企业可以抵扣进项税额的范围
  • 银行汇票多余金额会计分录
  • 劳动竞赛费用在什么科目列支做会计分录?
  • 专票红冲后还需重新开票吗
  • 商用住房出租需要交什么税?
  • 税控技术服务费怎么做账
  • 税控盘第一次使用
  • 上月暂估本月怎么冲销
  • 出纳收到汇票如何登记
  • 存货变卖残值取得的收益计入哪个科目
  • 外购已税化妆品生产的护肤护发品
  • 收取赔偿金开具什么发票
  • 客户汇公司账户怎么汇
  • 收到税务局信息
  • 完工百分比法确认收入应注意的问题
  • 9个点的税率有哪些
  • 微软雅黑字体一般用在哪里
  • php怎么学
  • 电商新公司值得去吗
  • 哪些行业可以简易征收增值税
  • 如何找装修公司
  • 土地出让金的收费标准 60%
  • 国有土地出让收入分析报告
  • agmservice.exe是什么
  • 工业企业在进行材料采购
  • 售后租回融资租赁帐务处理怎么做?
  • 债权人将长期债务转为投资
  • 单位春节发的过生日红包
  • php写一个函数,算出两个文件的相对路径
  • 出差有补贴
  • node实战
  • mysql+php
  • vi操作命令进入编辑命令
  • java泛型方法的使用
  • 增值税一般纳税人
  • 织梦如何使用
  • 汇票收入会计分录
  • 服装类发票可以抵扣哪些
  • 应付现金股利属于什么账户
  • 综合所得年度自行申报怎么操作
  • 文化事业建设费减免政策
  • 中标服务费如何赋码
  • 预提房租会计分录怎么填
  • 委外研发费用如何界定
  • 投资购入房产会亏钱吗
  • 基金可以一次性全部卖出吗
  • 土地需要摊销嘛?
  • 筹建期的开办费开业后如何处理
  • 退回增值税发票怎么做处理
  • 存货出售,资产减值损失如何处理
  • 会计科目的设置原则包括( )
  • 负数发票跨月怎么作废
  • 加盟费交税
  • 无生产经营收入可以评为a吗
  • 哪些会计凭证可以抵扣进项税
  • mysql5.7.23
  • mysql缩印
  • mysql批量添加字段
  • Windows Server 2008虚拟技术说明
  • linux中chkconfig命令的作用
  • explorer.exe中文叫什么
  • ubuntu14.04启动不了
  • icore是什么意思
  • jquery validation
  • js移动到指定位置
  • javascript语言介绍
  • unity获取鼠标点击的位置
  • jquery设置cookie值
  • android 界面切换
  • python语言解析
  • 电子税务完税证明怎么打印
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设