bootstrap教程(一)———bootstrap标题(一)

本文为H5EDU机构官方的HTML5培训教程 bootstrap教程(一)
 我们首先要下载bootstrap的框架文件,放到我们的项目目录当中。
然后将bootstrap框架当中的bootstrap.css文件引入到项目当中。
之后我们可以看,在bootstrap当中的标题与我们没用使用框架的文件是有不同之处的。
最明显的是文字变细。

<link rel="stylesheet" href="boostrap.css">
<!--bootstrap中的标题-->
        <h1>bootstrap标题一</h1>
        <h2>bootstrap标题二</h2>
        <h3>bootstrap标题三</h3>
        <h4>bootstrap标题四</h4>
        <h5>bootstrap标题五</h5>
        <h6>bootstrap标题六</h6>

而且在bootstrap当中我们可以使用非标题元素来实现标题样式.

        <!--在bootstrap中使非标题元素使用标题样式-->
        <div class="h1">bootstrap标题一</div>
        <div class="h2">bootstrap标题二</div>
        <div class="h3">bootstrap标题三</div>
        <div class="h4">bootstrap标题四</div>
        <div class="h5">bootstrap标题五</div>
        <div class="h6">bootstrap标题六</div>

点击进入bootstrap强化教程

时间: 2024-11-05 12:27:29

bootstrap教程(一)———bootstrap标题(一)的相关文章

Bootstrap 3 How-To #2 标题,链接与按钮

这个系列的要点来自一本名为 Twitter Bootstrap Web Development How-to 的书,但是,这本书的内容是基于以前版本的,与最新的 3.0 并不一致. 为了方便学习和使用 BootStrap 3, 这里将内容替换为了当前的 3.0 版.原书可以在 Amazon 买到,$17.99. 原书的内容比较简单,我会尽量补充一些内容. 如果你很熟悉 HTML,你就可以很快地填充网页的内容,但是,bootstrap 拥有一些需要你注意的特性. 开始 如果你是一个 HTML 的新

bootstrap 教程分享

Bootstrap 教程 Bootstrap 简介 Bootstrap 环境安装 Bootstrap CSS 概览 Bootstrap 网格系统 Bootstrap 排版 Bootstrap 代码 Bootstrap 表格 Bootstrap 表单 Bootstrap 按钮 Bootstrap 图片 Bootstrap 辅助类 Bootstrap 响应式实用工具 Bootstrap 字体图标 Bootstrap 下拉菜单 Bootstrap 按钮组 Bootstrap 按钮下拉菜单 Bootst

bootstrap教程(一)--bootstrap简介

本文为H5EDU机构官方的HTML5培训教程 bootstrap教程(一). 1.Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 2.bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮.功能完备的网站.其中包括以下组件: 下拉菜单.按钮组.按钮下拉菜单.导航.导航条.路径导航.分页.排版.缩略图.警告对话框.进度条.媒体对象等 3.可以对Bootstrap中所有的CSS变量进行修改,依据自己的需

Bootstrap(一)标题

Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都是10px.2.所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体.3.固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px. 标题的具体运用非常简单,和我们平时运用是一样的,使用<h1>~&

bootstrap教程(二) —— 列表组listgroup

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍: bootstrap教程(二) —— 列表组listgroup 列表组 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.由于其在Bootstrap是一个独立的组件,所以也对应有自己独立源码: LESS版本:对应的源码文件 list-group.less Sass版本:对应的源码文件是 _list-group.scss 编译出的Bootstrap版本:对应的

Bootstrap教程

1.Bootstrap教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 本教程将向您讲解 Bootstrap 框架的基础,通过学习这些内容,您将可以轻松地创建 Web 项目.教程被分为 Bootstrap 基本结构.Bootstrap CSS.Bootstrap 布局组件和 Bootstrap 插件几个部分.每个部分都包含了与该主题相关的简单有用的实例. 只要

Bootstrap:解决Bootstrap下拉框需要双击才能打开的问题

当使用AngularJS和Bootstrap时,会发生菜单栏navbar控件 需要点击两下才能打开的问题.解决的方法就是在页面加载后,执行如下语句: // 防止下拉菜单需要双击的bug $('.dropdown-toggle').click(function(e) { e.preventDefault(); e.stopPropagation(); return false; }); Bootstrap:解决Bootstrap下拉框需要双击才能打开的问题

Bootstrap 教程

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式.所有的主流浏览器都支持 Bootstrap.只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap.Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机.更多有关响应式设计的内容详见 Bootst

Bootstrap教程:[4]栅格系统详解

http://jingyan.baidu.com/article/6f2f55a1852aa1b5b83e6c5a.html 们都知道bootstrap3.0使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备.我们看class前缀这一项,我们姑且以前缀命名这四种栅格选项,他们分别是col-xs ,col-sm,col-md,col-lg,我们懂英文的就知道,lg是large的缩写,m