Bootstrap快速入门与栅格系统解析

需积分: 10 97 浏览量更新于2024-09-12 3 收藏 42KB DOC 举报

"Bootstrap简易使用指南" Bootstrap是一个流行的前端开发框架，它提供了丰富的预设样式、组件和响应式设计工具，极大地简化了网页设计和开发的过程。本指南将概述Bootstrap的一些核心概念和常用功能。 1. **框架** - **全局样式**：Bootstrap基于HTML5文档类型，并使用normalize.css来实现跨浏览器的样式一致性。在`scaffolding.less`中定义了全局样式，通过`reset.less`进一步简化。 - **栅格系统**：Bootstrap的默认栅格系统采用940px宽度，分为12列。你可以通过`row`和`span[NUM]`类来分配列，使用`offset[NUM]`类来调整列的偏移。非流动栅格允许直接嵌套，同时提供了四种响应式方案适应不同设备。 2. **流动栅格系统**：通过将`row`改为`row-fluid`，栅格系统变为基于百分比的流式布局。子元素的宽度将根据其父元素的百分比计算，确保在不同屏幕尺寸下的适应性。 3. **自定义栅格**：在`variables.css`中，你可以更改变量以定制栅格系统，如列数、宽度和间隔。为了保持响应性，还需要相应地修改`responsive.less`中的内容。 4. **布局**：`container`类用于创建一个940px宽度的居中容器，而`container-fluid`则用于实现流体布局，覆盖整个视口宽度。 5. **响应式设计**：Bootstrap的响应式设计依赖于`responsive.less`中的媒体查询。你需要在`<head>`中添加`<meta name="viewport" content="width=device-width, initial-scale=1.0">`来确保在移动设备上的正确显示。Bootstrap提供了`.visible-*`类来控制不同设备尺寸下的元素可见性。 6. **基础CSS** - **排版**：排版风格基于`variables.less`中的`@baseFontSize`和`@baseLineHeight`。例如，`strong`用于加粗文本，`em`用于斜体，`abbr`用于缩写，`address`用于地址展示，`blockquote`用于引用，`small`用于引用的作者。 - **代码**：Bootstrap支持`code`元素用于行内代码，`pre`用于块级代码展示，`pre.scrollable`允许设置最大高度。同时，`code`, `pre`, `samp`等元素可以方便地展示代码片段。 7. **列表**：Bootstrap提供了`ul`（无序列表）、`ol`（有序列表）和`dl`（描述列表）等多种列表样式，还有无样式的`ul.unstyled`和水平的`dl-horizontal`。这只是一个简化的Bootstrap使用指南，实际使用中还包含导航、按钮、表单、组件、插件等多个方面。熟悉这些基础知识后，开发者可以快速构建美观且响应式的网页。对于更深入的用法和定制，建议查阅官方文档以获取完整信息。

Bootstrap 简易使用指南

看完使用手册后所作的笔记，可以当做简易使用指南使用。

1.框架

1.1 全局样式

使用 HTML5 的 doctype，scaffolding.less 中定义全局样式，从 2 开始使用

normalize.css，并使用 reset.less 进行简化

1.2 默认栅格系统

940px 宽 12 列栅格，使用 row 与 span[NUM]的 class 来控制，使用 offset[NUM]来控制偏

移，于 non-fluid 可以直接嵌套，提供了四种响应式方案

1.3 流动栅格系统

基于百分比，将 row 改为 row-fluid 即可使用，内嵌注意宽度是按照父列的百分比进行计算

的

1.4 自定义栅格

于 variables.css 中改变变量，默认列 12，宽 60px，间隔 20px，要保证响应性还得修改

responsive.less 中内容

1.5 布局

container 为 940px 居中，container-fluid 则为流体布局

1.6 响应式设计

responsive.less 中提供了一组 media query：

智能手机《=480px；流式列，非固定宽度

垂直平板《=767px；流式列，非固定宽度

水平平板》=768px；42px 20px

默认》=980px； ? ? ?60px ?20px

大分辨率》=1200px；70px 30px

要求添加 meta 标签，<meta name=”viewport” content=”width=device-width, initail-

scale=1.0″>

有诸如.visible-phone 等支持类

2.基础 CSS

2.1 排版

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

yvonne莫

粉丝: 15
资源: 3

Bootstrap快速入门与栅格系统解析

Bootstrap简易使用指南

基于bootstrap的简单 后台管理 系统

Bootstrap通知简易函数实现指南

Python3+Django+Bootstrap简易博客系统部署与使用

快速搭建仪表板：Bootstrap小部件的简易实现指南

搭建简易网上购物平台使用指南

Books: 基于Bootstrap和jQuery的简易微博服务

Django框架简易CMS系统源码及使用指南

Bootstrap入门：打造流行界面的简易工具

利用纯JS创建模态对话框的简易指南

最新资源

基于bootstrap的简单后台管理系统