段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本):
1、全局文本字号为14px(font-size)。
2、行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能)。
3、颜色为深灰色(#333);
4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;(font-family),或许这样的字体对我们中文并不太合适,但在实际项目中,大家可以根据自己的需求进行重置
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>段落(正文文本)</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<p>超酷的互联网、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!</p>
<p>超酷的互联网、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!</p>
<p>我是一个段落,你猜我在Bootstrap是以什么样的风格显示。</p>
</body>
</html>
实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。
如果想让一个段落p突出显示,可以通过添加类名“.lead”实现
除此之外,Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>强调内容</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<p>我是普通文本,我的样子长成这样我是普通文本,我的样子长成这样我是普通文本,</p>
<p class="lead">我是特意要突出的文本,我的样子成这样。我是特意要突出的文本,我的样子长成这样。</p>
<p>我是一个普通的段落,我不需要强调显示。</p>
<p class="lead">这部分内容需要特别的强调,我和别人长得不一样。</p>
</body>
</html>
- 浏览: 109468 次
- 性别:
- 来自: 天津
相关推荐
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面....教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。
前端框架bootstrap的js和css文件:bootstrap.min.js和bootstrap.min.css
bootstrap、bootstrapValidator和jquery相关的部分js和css,用于bootstrap前端开发和表单验证。
bootstrap样式和时间bootstrap样式和时间bootstrap样式和时间bootstrap样式和时间bootstrap样式和时间
包括bootstrap官方文档和bootstrap-table,其中bootstrap-table是在git下载下来的
Bootstrap入门实例,还有PPt示范。
Bootstrap5 图标库 bootstrap-icons
bootstrap,一个响应式web前端框架,包里面有bootstrap的引用文件和一些demo
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态...
Bootstrap Icons:Bootstrap 有史以来第一次拥有自己的图标库,并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用,从表单到导航组件等。Bootstrap Icons ...
知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 3.局部变量缓存全局变量 /** * @param col bootstrapTable列表生成配置对象 */ var searchValue ={};//查询...
1.bootstrap使用4.0 2.customValidator.css Bootstrap v4.0.0-beta (https://getbootstrap.com) jQuery v3.2.1
StartBootstrap 是 Bootstrap 3 主题和模板,完全免费开源。 标签:Start
bootstrap的js和css文件
bootstrap图片上传和预览
bootstrap的css和js文件、bootstrap的css和js文件、bootstrap的css和js文件
资源名称:Bootstrap期末课程设计 内容使用语言:HTML5+css3+js+bootstrap框架 使用/学习场景:完成整个学期成果,了解框架的好处 应用场景:对于使用框架对于完成一个网页的实现更加容易 特点:加深对前端语言的...
这里面是bootstrap表格和时间插件还有普通使用的js,css文件
可编辑bootstrap-table及相关组件:bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css; 配合起来,可以实现可编辑bootstrap-table列表。代码实现: ...