Bootstrap零基础入门教程(二)

前端之家收集整理的这篇文章主要介绍了Bootstrap零基础入门教程(二)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

什么是 Bootstrap?

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示:

过程中会频繁查阅资料的网站:

这是W3C联盟为了传播W3C标准而建立的网站,有很多关于Web端的技术,你可以将其看作为一部Web技术的百科全书。

不用多说,BootStrap3官方文档

这个其实跟W3school差不多,但是比W3school要全要杂一点,好多内容都是从原版W3C英文网站和原版BootStrap官方英文文档翻译过来,但是我感觉他的翻译质量要更高(因为前两个网站说白了也是翻译过来的),有些Case更加好懂。

闲话不多说,让我们开始:

(1) 明确实现目标

如下图所示,这就是咱们要实现的一个简单网站。布局简单,也没有很炫的效果。但是要实现一个功能:从Json文件(关于Json的知识可以到上述网站去查)里读取相关信息,显示在网站上。

Json文件内容:

即:

布局:

  为三大块:第一行左边为班级列表,第一行右边为同学姓名列表,第二行为同学相关信息。

功能:

1.点击班级列表中的某一个班级,可以动态地在同学列表中更新这个班级中有哪些同学,并且可以实现班级的复选。

2.点击同学列表中的某一个同学,动态的在第二行显示该同学的信息,每次只能显示一个同学的信息。

(2)分析需要用到的技术

布局:

BootStrap:用来实现这种简单的两行布局,以及Class列的复选,以及滚动条(有些直接用BootStrap很好实现,有些则不能。如何知道?去上述三个网站里去找,去查)

功能:

用Javascript和Ajax来实现数据的获取和动态的交互(以局部刷新的方式)。

(3)技术选型分析

 

 1. 实现布局。

  通过查阅文档(),我发现了Bootstrap是用栅格系统布局的,通过给div 设置特定的class属性可以实现我想要的布局效果。并且可以给手机、平板、台式电脑设置不一样的效果。关于HTML标签的class属性,以及什么是HTML标签可以在W3SCHOOL上查到。

  值得注意的一点是:元素的class属性可以有多个。

  Eg:

  不同属性之间用“空格”间隔,相信我 ,这样能让你写Javacript脚本和调整CSS时游刃有余。

  2.实现Class编号垂直排列以及多选。

  查阅知道了如何设置垂直的按钮组。即将按钮组所在的DIV的class设置为btn-group-vertical,使之成为存放按钮组的容器。

  查阅知道了如何让按钮组实现复选。通过向class属性为 btn-group的DIV 添加 data 属性 data-toggle="buttons" 来实现。

  3.实现按钮边角由圆角重新定义为直角,给按钮组加滚动条,以及给按钮上显示文字加上限制,使其不超出按钮,超出的部分以”…”显示,并且当鼠标移动停在按钮上的时候,显示全部文字

  少部分(圆角变直角,鼠标悬停显示文字)需要直接在HTML标签里设置style和title属性

  大部分的实现,是写了个CSS:

  该




Click classmate to show details.

猜你在找的Bootstrap相关文章