当前位置:  首页  >  前端开发  >  HTML

总结bootstrap前端框架的使用实例-html教程

1、bootstrap排版全局样式style.css:1、移除body的margin声明2、设置body的背景色为白色3、为排版设置了基本的字体、字号和行高4、设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式标题h1-h6HTML中的所有标题标签,到均可使用。另外,还提供了.h1到.h6类选择器,为的是给内联(inline)属性的文本赋予标

1、bootstrap 排版

全局样式style.css:

1、移除body的margin声明

2、设置body的背景色为白色

3、为排版设置了基本的字体、字号和行高

4、设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式

标题 h1-h6

HTML 中的所有标题标签,

均可使用。另外,还提供了 .h1 到 .h6 类选择器,为的是给内联(inline)属性的文本赋予标题的样式。

1、重新设置了margin-top和margin-bottom的值

2、h1~h3重置后的值都是20px;h4~h6重置后的值都是10px

3、所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体

4、固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px

在标题内还可以包含 标签或赋予 .small 类的元素,可以用来标记副标题。

Bootstrap heading Secondary Text

Bootstrap heading Secondary text

p 标签

(段落)元素还被设置底部外边距(margin)10px。

    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.


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


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.

强调内容的标签

一般配合段落标签使用

强调相关的类

text-muted:  提示,使用浅灰色(#999)text-primary:主要,使用蓝色(#428bca)text-success:成功,使用浅绿色(#3c763d)text-info:   通知信息,使用浅蓝色(#31708f)text-warning:警告,使用黄色(#8a6d3b)text-danger: 危险,使用褐色(#a94442)

文本对齐风格

text-left:   左对齐
text-center: 居中对齐
text-right:  右对齐
text-justify:两端对齐

列表

1、ul 、 ol 去序列

class=“list-unstyled“

2、ul 、 ol 水平排列(把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示)

class=“list-inline”

3、dl水平列表(屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果)

class=“dl-horizontal”

图片

使用方法非常简单,只需要在

标签上添加对应的类名
img-responsive:响应式图片,主要针对于响应式设计

img-rounded:   圆角图片
img-circle:    圆形图片
img-thumbnail: 缩略图片

自己动手添加并查看相应的效果吧~ ~ ~

bootstrap图标

Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

任何行级元素都可以,通常使用span标签做图标容器

可登陆bootstrap网站查看;span>

用法很简单,只需将图标下的英文复制粘贴到class里即可:

状态类

通过这些状态类可以为行或单元格设置颜色。

Class 描述

.active        鼠标悬停在行或单元格上时所设置的颜色.success    标识成功或积极的动作.info        标识普通的提示信息或动作.warning    标识警告或需要用户注意.danger        标识危险或潜在的带来负面影响的动作

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

...

3、bootstrap表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的

扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有