BootStrap入门：响应式布局与基础教程
需积分: 9 59 浏览量
更新于2024-07-21
1
收藏 1.54MB PDF 举报
"BootStrap入门教程"
Bootstrap是一个广泛使用的前端框架，由Twitter的工程师开发，旨在提供一套易于使用、设计优美、高度灵活且可扩展的工具，用于构建响应式网站和用户界面。这个框架的核心特性包括HTML5、CSS3以及JavaScript组件，特别强调友好的学习曲线、广泛的浏览器兼容性、响应式设计以及丰富的组件库。Bootstrap的开源性质吸引了大量开发者参与，使其迅速成长并保持活跃。
在Bootstrap中，Scaffolding是基础布局系统，涵盖了全局样式、格网系统、流式格网、自定义和响应式设计等多个方面。
1. 全局样式(Global Style): Bootstrap依赖于HTML5，因此在使用Bootstrap的每个页面顶部都需要声明文档类型`<!DOCTYPE html>`。此外，Bootstrap的全局样式通过Bootstrap.less文件定义，包括基本的排版设置和链接样式。为了实现Bootstrap的基础样式，需要在HTML文件中引入必要的CSS和JavaScript文件。
2. 格网系统(Grid System): Bootstrap的格网系统是其布局的核心，采用12列的响应式布局。它允许开发者创建不同尺寸屏幕上的灵活布局，通过`.row`和`.col-*`类来定义行和列。开发者可以轻松地调整元素在不同设备上的显示方式，以适应各种屏幕尺寸。
3. 流式格网(Fluid Grid System): 除了固定宽度的格网，Bootstrap还提供了流式布局，允许页面内容根据浏览器窗口大小动态调整宽度，从而实现更流畅的用户体验。
4. 自定义(Customizing): Bootstrap提供了定制选项，允许开发者根据项目需求调整框架的颜色、字体、间距等。这可以通过修改Less源码或使用Bootstrap的SASS版本来实现。
5. 布局(Layouts): Bootstrap提供了多种预设的布局模式，如容器(Container)和容器流(Container Fluid)，帮助开发者快速构建页面结构。容器是有限定宽度的，而容器流则占据整个视口宽度，适用于全屏布局。
6. 响应式设计(Responsive Design): Bootstrap的响应式设计确保了网站在不同设备上的表现一致性。它通过媒体查询(Media Queries)来应用不同的CSS规则，使页面在手机、平板和桌面等不同设备上都能呈现出良好的视觉效果。
在接下来的教程中，将详细介绍如何使用这些概念来创建网页，包括手脚架的使用、基础CSS的覆盖、组件的应用，以及如何利用LESS进行自定义和构建自己的Bootstrap主题。理解并掌握这些内容，对于快速开发响应式、现代感强的网站至关重要。
团总司令.<small>蒙奇.D.<citetitle="">路飞</cite></small>
</blockquote>
</div>
</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页未读，继续阅读
点击了解资源详情
点击了解资源详情
点击了解资源详情
2014-04-16 上传
2021-01-19 上传
259 浏览量
2021-02-08 上传
点击了解资源详情
xiaoguangtouqiang
- 粉丝: 112
- 资源: 2
我的内容管理
展开
