BootStrap前端框架入门教程：打造响应式布局

5星 · 超过95%的资源需积分: 10 81 浏览量更新于2024-07-25 1 收藏 1.3MB PDF 举报

"BootStrap入门教程" Bootstrap是一个由Twitter的工程师MARK OTTO和Jacob Thornton创建的前端框架，旨在提供易用、优雅、灵活且可扩展的工具，用于快速开发高质量的网页界面。自2011年开源以来，Bootstrap迅速在GitHub上受到广泛关注，其社区活跃，版本更新频繁，文档完善，因此成为了许多开发者构建用户界面的首选框架。 Bootstrap的核心特性包括HTML5和CSS3支持，响应式设计，12列格网系统，以及一系列预先设计的组件和JavaScript插件。它降低了网页设计的学习曲线，增强了不同设备上的兼容性，并提供了丰富的样式和功能选项。在Bootstrap的Scaffolding部分，我们主要关注以下几个方面： 1. 全局样式(Global Style): Bootstrap依赖HTML5的文档类型，因此在每个页面的顶部应包含`<!DOCTYPE html>`声明。Bootstrap的全局样式通过Bootstrap.less文件来设定，涵盖了基本的排版和链接样式，字体设置等。 2. 格网系统(Grid System): 这是Bootstrap布局的基础，它使用12列的网格布局，允许开发者轻松创建响应式的、适应各种屏幕尺寸的布局。开发者可以利用`.row`和`.col-*`类来定义行和列，实现灵活的布局设计。 3. 流式格网(Fluid Grid System): 对于需要更流畅、自适应宽度的布局，Bootstrap提供了流式网格，允许内容随着浏览器窗口大小的变化而动态调整。 4. 自定义(Customizing): Bootstrap允许开发者根据项目需求定制框架，包括改变颜色方案、调整间距或修改组件样式。这通常通过调整less源文件或者使用预编译选项完成。 5. 布局(Layouts): Bootstrap提供了一系列预定义的布局组件，如导航栏、页脚、头像等，帮助开发者快速构建网页的基本结构。 6. 响应式设计(Responsive Design): Bootstrap的响应式设计确保了网站在各种设备（手机、平板、桌面）上的良好表现。通过媒体查询和断点，可以控制内容在不同屏幕尺寸下的显示方式。在后续的教程中，将详细介绍如何使用这些元素和方法，逐步深入到Bootstrap的组件、JavaScript插件以及如何使用LESS进行自定义。通过学习Bootstrap，开发者能够更高效地构建现代、美观且适应性强的网页应用。

团总司令.<small>蒙奇.D.<citetitle="">路飞</cite></small>

</blockquote>

</div>

1.4列表(lists).Bootstrap 提供三种标签来表现不同类型的列表。<ul>表示无序列表，<ul class="unstyled">表

示无样式的无序列表，<ol>表示有序列表，<dl>表示描述列表，<dl class="dl-horizontal">表示竖排描述列表。

图2-3较好显示了这几种列表：

图2-3 列表(lists)

2.表格(Table).依然使用<table><tr><th><td>等标签来表现表格。主要提供了四个 css 的类来控制表格的边

和结构。表2-1显示了 bootstrap 的 table 可选项。

名字

Class

描述

Default None 没有样式，只有行和列

Basic .table 只有在行间有竖线

Bordered .table-bordered 圆角和添加外边框

Zebra-stripe .table-striped 为奇数行添加淡灰色的背景色

Condensed .table-condensed 将横向的 padding 对切

表2-1 表格选项(Table Options)

我们可以将这些 CSS 类结合起来使用，如图2-4所示，显示一个混合的表格：

剩余44页未读，继续阅读

Dong__feng

粉丝: 0
资源: 2

BootStrap前端框架入门教程：打造响应式布局

BootStrap入门教程

Bootstrap使用基础教程详解

BootStrap入门教程[汇编].pdf

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

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

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

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

bootstrap.bundle.min.js

./bin/idea.sh -Djava.awt.headless=true -Didea.analyze.auto=true !bootstrap.error.title.startup.error! !bootstrap.error.message.no.graphics.environment!

bootstrap-datetimepicker.min.css 引用

最新资源