9、布局
9.1 版心
网页内容的主要显示区域,即用户浏览信息的核心部分。这个区域通常是网页设计师精心规划的地方,用来展示最重要的内容,比如文章、图片、视频等。在网页设计中,我们通常会用到一些术语来描述这种核心显示区域,比如"主要内容区"、"body内容"或者"main元素"。
9.2 常用类名
- 容器类 :
.container
:用于包含整个页面的主要内容。.wrapper
:类似于.container
,用于包裹一组相关的元素。.row
:通常用于栅格系统中的水平排列的一组元素。
- 布局类 :
.grid
:用于创建网格布局。.flex-container
:用于Flexbox布局的容器。.grid-item
:网格布局中的单个项。.flex-item
:Flexbox布局中的单个项。
- 内容类 :
.content
:用于包含页面的主要内容。.text-center
:用于居中文本。.text-left
,.text-right
:用于左对齐或右对齐文本。.clearfix
:清除浮动。
- 按钮类 :
.btn
:基本按钮样式。.btn-primary
,.btn-secondary
:不同类型的按钮样式。.btn-large
,.btn-small
:不同尺寸的按钮。
- 表单类 :
.form-group
:用于包含表单控件及其标签。.input-group
:用于复杂的输入框组合。.form-control
:基本的输入框样式。
- 导航类 :
.navbar
:用于网站顶部的导航条。.nav
:用于创建导航列表。.nav-item
:导航列表中的单个项目。
- 卡片类 :
.card
:用于创建卡片式布局。.card-body
:卡片主体内容。.card-header
,.card-footer
:卡片的头部和尾部。
- 媒体对象类 :
.media
:用于创建媒体对象布局,如博客评论等。.media-object
:媒体对象中的图片或视频。.media-body
:媒体对象的文本部分。
- 表格类 :
.table
:用于创建表格的基本样式。.table-striped
:带有斑马纹的表格。.table-bordered
:带边框的表格。
- 辅助类 :
.hidden
:隐藏元素。.visible
:显示元素。.sr-only
:仅对屏幕阅读器可见的文本。
- 动画类 :
.fade-in
:淡入效果。.slide-down
:下滑效果。.zoom
:缩放效果。
9.3 默认样式重置
9.3.1 通配选择器
使用通配选择器给所有的元素加上默认样式重置。
9.3.2 reset.css
根据不同的元素特点有针对的进行去除样式,使得页面变成一张所有样式都要自己加的白纸。
9.3.3 normal.css
在去除默认样式的同时保留了一些有价值的默认样式,有一个固定的标准。