Bootstrap基础：12列网格、布局与组件详解

版权申诉

84 浏览量更新于2024-08-11 收藏 99KB DOCX 举报

Bootstrap基础文档详细介绍了如何利用Bootstrap这一前端开发框架进行网页设计和布局。Bootstrap以其响应式设计为核心，提供了灵活的12列栅格系统，使开发者能够轻松创建适应不同屏幕尺寸的网站。以下是文档中的关键知识点： 1. **Scaffolding (基础结构)**: Bootstrap基于HTML5文档类型构建，使用`<html>`元素和CSS属性，强调文档类型声明为HTML5。它对全局样式进行了设置，如移除`<body>`的默认margin，设定背景色为白色，以及定义基本的字体样式（如`@baseFontFamily`，`@baseFontSize`和`@baseLineHeight`）。 2. **Reset Styles (重置样式)**: 为了统一浏览器间的默认样式差异，Bootstrap提供了一套基础的重置样式，包括去除默认的行间距、内边距等。 3. **Grid System (网格系统)**: Bootstrap的网格系统采用12列布局，适应不同屏幕大小。默认宽度为940px，响应式设计时宽度会调整为724px和1170px。文档提供了如何定义行和列、使用偏离样式、嵌套列以及流式网格的示例代码。 4. **Layout (布局)**: 包括固定布局和流式布局两种模式。固定布局使用`container`类，而流式布局则利用百分比宽度实现响应式。响应式设计是Bootstrap的一大特色，允许网站在不同设备上自适应。 5. **CSS基础样式**: - 标题头（`<h1>`到`<h6>`）：Bootstrap提供了预定义的样式，包括字体大小和样式。 - Body样式：设置了全局字体大小（14px）和行高（20px），并定义了段落间的基本行高（10px）。 - Lead和Body Copy（强调文本）：提供了多种强调样式，如警告、错误、成功等。 - 缩略语和地址：有相应的CSS样式处理。 - 块引用：Bootstrap处理了块级引用的显示。 - 列表类型：包括无序列表、有序列表和描述列表，以及代码块和表格的样式。 6. **Tables (表格)**: 提供了默认的表格样式，包括奇偶行的区别、边框的控制，以及如何创建美观的表格布局。这些知识点概述了Bootstrap的基础使用方法，涵盖了文档的核心内容，可以帮助开发者快速上手Bootstrap并创建出响应式的、具有良好视觉效果的网站。

Bootstrap 基础文档

Sca olding

Bootstrap 是建立在响应式 12 列网格、布局以及组建之上的前台框架。

全局设置

使用 HTML5 文档类型

Bootstrap 需要使用 html 元素和 css 属性，必须声明文档类型为 html5，即下图：

排版及其联接

Bootstrap 设置全局 display 属性，排版，链接样式。默认情况下：

1. 移除 body 标签 margin 属性

2. 设置 body 标签 background-color:white

3. 使用@baseFontFamily,@baseFontSize,@baseLineHeight 属性作为基本排版样式

4. 设置全局链接颜色通过@linkColor 并且应用下划线只在:hover 状态下。

其他的样式设置，可以在 sca*olding.less 被找到。

重置样式

默认的网格系统

灵活的网格

下载后可阅读完整内容，剩余5页未读，立即下载

悠闲饭团

粉丝: 184
资源: 3384

Bootstrap基础：12列网格、布局与组件详解

Bootstrap完整示例集

bootstrap.docx

Bootstrap Table API 中文版（完整翻译文档）.docx

移动端开发基础：使用Bootstrap和Vue.js

优先级 bootstrap.yml bootstrap-dev.yml bootstrap-local.yml

BootStrap.css与BootStrap.min.css的区别

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js的镜像有么

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css的镜像有么

bootstrap/3.3.7/css/bootstrap.min.css 下载

bootstrap-table.js下载

最新资源