BootStrap入门教程 (一)

  • 来源:本站
  • 发布时间:2019-08-13
  • 25已阅读
您现在的位置:首页 >> 西方诗歌 >> 文章
简介 GitHub上介绍bootstrap:简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。 基于html5、css3的bootstrap,具有大量的

	BootStrap入门教程 (一)

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

我们从全局样式(GlobalStyle),格网系统(GridSystem),流式格网(FluidgridSystem),自定义(Customing),布局(Layouts),响应式设计(ResponsiveDesign)这六个方面深入讲解Boostrap的scaffolding..Bootstrap要求html5的文件类型,所以必须在每个使用bootstrap页面的开头都引用:同时,它通过文件来设置全局的排版和连接显示风格.其中去掉了Body的margin,使用baseFontFamily,baseFontSize,linkColor等变量来控制基本排版。

格网系统(GridSystem).默认的Bootstrap格网系统提供一个宽达940像素的,12列的格网。 这意味着你页面默认宽度是940px,最小的单元要素宽度是940/能够使得你的网页可以更好地适应多种终端设备(平板电脑,智能手机等)。 默认格网系统直观概念如图1-1所示:图1-1默认格网系统(DefaultGridSystem)以下简单的代码则是实现图1-1中,第三列的宽度为4和宽度为8的两个div.......偏移列.有时候,页面要素前面需要一些空白,bootstrap提供了来实现,如图1-2所示:图1-2偏移列(Offsetcolumns)以下代码实现了是实现图1-2中,第一列的宽度为4和偏移度为4宽度为4的两个div.......和相应的长度的div即可。 如图1-3所示:以下代码实现了是实现图1-3中,第一层的宽度为12和第二层两个宽度为6的两个嵌套的div长度之和不能大于它的父div,否则会溢出叠加。 各位可以试试将第一层的div长度改为其他值,看看效果。 流式格网系统(Fluidgridsystem).它使用%,而不是固定的px,来确定页面要素的宽度.只需要简单的将改成,就可以将fixed行改为fluid.如图1-4所示:图1-4流式格网系统(Fluidgridsystem)以下代码实现了是实现图1-4中,两个不同长度的流式页面要素.......嵌套的流式格网和嵌套的固定格网,稍微有些不同。 嵌套流式格网(Fluidnesting)的子要素不用匹配父要素的宽度,子要素用100%来表示占满父要素的页面宽度。 自定义格网(Gridcustomization).Bootstrap允许通过修改的参数值来自定义格网系统。 主要包括如表1-1所示的变量:变量默认值说明gridColumns12列数gridColumnWidth60px每列的宽度gridGutterWidth20px列间距表1-1格网变量我们通过修改以上值,并重新编译Bootstrap来实现自定义格网系统。 如果添加新的列,需要同时修改同样的,需要修改来获得多设备兼容.布局(Layout).本文最后我们讨论创建页面基础模板的布局。

如前面所言,Bootstrap提供两种布局方式,包括固定(Fixed)和流式(Fliud)布局。 如图1-5所示,左边为Fixed布局,右边为Fluid布局:图1-5布局(Layout)固定布局代码如下:流式布局代码如下:如果对Bootstrap提供的布局不够满意,可以参见essFrameWork提供的模板。 最后,,官方文档极其优秀,强烈推荐各位直接参考和学习之。 参考文献与延伸阅读:的来由和发展。

与Sass的介绍与对比.模板与Bootstrap混合项目(H5BP)个有用的Bootstrap资源按钮生成器7.前后端结合讨论英文教程。