bootstrap教程-BootStrap初学者入门教程pdf格式免费版-东坡下载

本节内容小编为大家精选带来的是pdf格式免费版BootStrap初学者入门教程，如果你是一个BootStrap初学者，正好需要一份这样的bootstrap教程，那就赶紧点击本文下方的“立即下载”进行查阅吧！

温馨提示：

本文档为PDF格式文档，因此需确保在阅读之前你已经安装了PDF阅读器，如果尚未安装阅读器，建议下载福昕PDF阅读器或其他PDF阅读器进行安装后阅读。

BootStrap初学者入门教程内容节选

……

GitHub 上这样介绍 bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于 html5、css3的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于 Less等。本系列教程遵循官方文档结构来介绍bootstrap，包括手脚架（Scaffolding),基础CSS,组件,javascript插件，使用 LESS与自定义.本文主要介绍Bootstrap 的基础布局--Scaffolding.

Bootstrap 建立了一个响应式的12列格网布局系统，它引入了 fixed 和 fluid-with 两种布局方式。我们从全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts),响应式设计(Responsive Design)这六五个方面深入讲解Boostrap 的 scaffolding.

1 全局样式(Global Style).Bootstrap 要求 html5的文件类型，所以必须在每个使用 bootstrap 页面的开头都引用:

<!DOCTYPE html>

<htmllang="en"> ...

……

图1-3 嵌套列(Nesting columns) 以下代码实现了是实现图1-3中，第一层的宽度为12和第二层两个宽度为6的两个div. <divclass="row">

<divclass="span12"> Level 1 of column

<divclass="row">

<divclass="span6">Level 2</div>

</div>

嵌套的 div长度之和不能大于它的父 div，否则会溢出叠加。各位可以试试将第一层的div长度改为其他值，看看效果。

4 流式格网系统(Fluid grid system).它使用%，而不是固定的px,来确定页面要素的宽度.只需要简单的将.

row 改成.row-fluid ，就可以将fixed行改为fluid.如图1-4所示：

……

1.2 强调(Emphasis).使用<strong>和<em>两个标签，前者使用粗体，后者使用斜体来强调标签内容。请注意<strong>标签在html4中定义语气更重的强调文本；在 HTML 5 中，<strong> 定义重要的文本。这些短语标签也可以通过定义 CSS 的方式来丰富效果。更多短语标签请参见[1].缩写(abbreviations ).使用<abbr>，它重新封装了该标签，鼠标滑过会异步地显示缩写的含义。引入 title 属性来显示原文，使用.initialism 类对缩写以大写方式显示。

1.3 引用文字(Blockquotes).使用<blockquote>标签和<small>两个标签，前者<blockquote>是引用的文字内容，后者<small>是可选的要素，能够添加书写式的引用，比如内容作者。如图2-2所示

……

BootStrap初学者入门教程相关内容小编就为大家介绍到这里了，更多pdf格式文档资料下载，敬请关注东坡下载站！