书签 分享 收藏 举报 版权申诉 / 57
立即下载 加入VIP,免费下载
当前位置： 首页 > 解决方案 > 学习计划 > BootStrap入门教程.docx

类型BootStrap入门教程.docx

  • 文档编号：7977081
  • 上传时间：2023-01-27
  • 格式：DOCX
  • 页数：57
  • 大小：863.86KB

...

2.2偏移列.有时候，页面要素前面需要一些空白，bootstrap提供了偏移列来实现，如图1-2所示：

图1-２偏移列（Offsetcolumns）

以下代码实现了是实现图1-2中，第一列的宽度为4和偏移度为4宽度为4的两个div.

...

...

2.3嵌套列.嵌套列是容许用户实现更复杂的页面要素布局。

在bootstrap中实现嵌套列非常简单，只需要在原有的div中加入.row和相应的长度的span*div即可。

如图1-3所示：

图1-3嵌套列（Nestingcolumns）

以下代码实现了是实现图1-3中，第一层的宽度为12和第二层两个宽度为6的两个div.

Level1ofcolumn

Level2

Level2

嵌套的div长度之和不能大于它的父div，否则会溢出叠加。

各位可以试试将第一层的div长度改为其他值，看看效果。

4流式格网系统（Fluidgridsystem）.它使用%，而不是固定的px,来确定页面要素的宽度.只需要简单的将.row改成.row-fluid，就可以将fixed行改为fluid.如图1-4所示：

图1-4流式格网系统（Fluidgridsystem）以下代码实现了是实现图1-4中，两个不同长度的流式页面要素.

...

...

嵌套的流式格网和嵌套的固定格网，稍微有些不同。

嵌套流式格网（Fluidnesting）的子要素不用匹配父要素的宽度，子要素用100%来表示占满父要素的页面宽度。

自定义格网（Gridcustomization）.Bootstrap允许通过修改variables.less的参数值来自定义格网系统。

主要包括如表1-1所示的变量：

变量

默认值

说明

@gridColumns

12

列数

@gridColumnWidth

60px

每列的宽度

@gridGutterWidth

20px

列间距

表1-1格网变量我们通过修改以上值，并重新编译Bootstrap来实现自定义格网系统。

如果添加新的列，需要同时修改grid.less.同样的,需要修改responsive.less来获得多设备兼容.

5布局（Layout）.本文最后我们讨论创建页面基础模板的布局。

如前面所言，Bootstrap提供两种布局方式，包括固定（Fixed）和流式（Fliud）布局。

如图1-5所示，左边为Fixed布局，右边为Fluid布局：

图1-5布局（Layout）固定布局代码如下：

...

流式布局代码如下：

--Sidebarcontent-->

--Bodycontent-->

如果对Bootstrap提供的布局不够满意，可以参见LessFrameWork提供的模板。

最后，再次强调，官方文档极其优秀，强烈推荐各位直接参考和学习之。

参考文献与延伸阅读：

1.Bootstrap的来由和发展。

2.Less与Sass的介绍与对比.

3.Html5模板

4.Html5与Bootstrap混合项目（H5BP）

5.20个有用的Bootstrap资源

6.Bootstrap按钮生成器http:

//charliepark.org/bootstrap_buttons/

7.前后端结合讨论

8.Bootstrap英文教程

BootStrap入门教程

（二）

上讲回顾：

Bootstrap的手脚架（Scaffolding）提供了固定（fixed）和流式（fluid）两种布局，它同时建立了一个宽达940px和12列的格网系统。

基于手脚架（Scaffolding）之上，Bootstrap的基础CSS（BaseCSS）提供了一系列的基础Html页面要素，旨在为用户提供新鲜、一致的页面外观和感觉。

本文将主要深入讲解排版（Typography）,表格（Table）,表单（Forms）,按钮（Buttons）这四个方面的内容。

1排版（Typography），它囊括标题（Headings）,段落（paragraphs）,列表（lists）以及其他内联要素。

我们可以通过修改variables.less的两个变量:

@baseFontSize和@baseLineHeight来控制整体排版的样式。

Bootstrap同时还用了一些其他的算术方法来创建所有类型要素的margin,padding,line-height等。

1.1标题和段落使用常见的html和

即可表现,可以不必考虑margin,padding。

两者显示效果如图2-1所示：

图2-1标题与段落（Headings¶graphs）

1.2强调（Emphasis）.使用和两个标签，前者使用粗体，后者使用斜体来强调标签内容。

请注意标签在html4中定义语气更重的强调文本；在HTML5中，定义重要的文本。

这些短语标签也可以通过定义CSS的方式来丰富效果。

更多短语标签请参见[1].缩写（abbreviations）.使用，它重新封装了该标签，鼠标滑过会异步地显示缩写的含义。

引入title属性来显示原文，使用.initialism类对缩写以大写方式显示。

1.3引用文字（Blockquotes）.使用

标签和两个标签，前者
是引用的文字内容，后者是可选的要素，能够添加书写式的引用，比如内容作者。

如图2-2所示

图2-2引用（Blockquotes）

代码片段如下所示：

凌冬将至.我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。

守夜人军团总司令.蒙奇.D.路飞

凌冬将至.

我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。

守夜人军团总司令.蒙奇.D.路飞

1.4列表（lists）.Bootstrap提供三种标签来表现不同类型的列表。