Web前台框架学习—Bootstrap

  • 时间:2018-10-15 23:22 作者:程序员界的彭于晏 来源:程序员界的彭于晏 阅读:101
  • 扫一扫,手机访问
摘要:Bootstrap是一个非常好的前台框架,在前台时间的小项目中需要使用Bootstrap做前台,于是就学习了一下,觉得非常好用,推荐给新手。一. 什么是Bootstrap?Bootstrap,来自 Twitter,是目前最受欢迎的前台框架。Bootstrap 是基于 HTML、CSS、JAVASCR

Bootstrap是一个非常好的前台框架,在前台时间的小项目中需要使用Bootstrap做前台,于是就学习了一下,觉得非常好用,推荐给新手。

一. 什么是Bootstrap?

Bootstrap,来自 Twitter,是目前最受欢迎的前台框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。同时,Bootstrap 还是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设施优先的 WEB 项目。作为一个框架,它和jQuery EasyUI、WeUI一样,助力于前台开发。简而言之,使用Bootstrap让前台开发变得简洁高效。

注释:

1. jQuery EasyUI:jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种客户界面插件。

2. WeUI:WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令客户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

二. Bootstrap入门

使用Bootstrap框架,必需具有 HTML 、 CSS 和 JavaScript 的基础知识。假如没有掌握,可以前往【菜鸟教程】学习。

2.1 环境配置

你有两种方式可以使用Bootstrap,本地调用和网络调用。

本地调用需要从网络上下载[用于生产环境的Bootstrap],下载地址:http://v3.bootcss.com/getting-started 。

Web前台框架学习—Bootstrap

下载完成后,解压文件,得到如下图所示的三个文件夹,这三个文件夹分别用于存放样式文件、字体文件、js脚本文件。

Web前台框架学习—Bootstrap

网络调用只要使用 BootCDN 提供的免费 CDN 加速服务。在你的网页文件中写入以下link就可。

2.2 理解Bootstrap

2.2.1 Bootstrap是html5的文档

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

...

2.2.2 移动设施优先

Bootstrap 3是对移动设施友好的。不是简单的添加少量可选的针对移动设施的样式,而是直接融合进了框架的内核中。也就是说,Bootstrap 是移动设施优先的。针对移动设施的样式融合进了框架的每个角落,而不是添加一个额外的文件。

为了确保适当的绘制和触屏缩放,需要在 之中增加 viewport 元数据标签。

在移动设施浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,客户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定。

2.2.3 栅格系统

Bootstrap 提供了一套响应式、移动设施优先的流式栅格系统,随着屏幕或者视口(viewport)尺寸的添加,系统会自动分为最多12列。它包含了易于使用的预约义类,还有强大的mixin 用于生成更具语义的布局。

栅格系统用于通过一系列的行(row)与列(column)的组合来创立页面布局,你的内容即可以放入这些创立好的布局中。下面就详情一下 Bootstrap 栅格系统的工作原理:

“行(row)”必需包含在 .container (固定宽度)或者 .container-fluid (100%

宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

通过“行(row)”在水平方向创立一组“列(column)”。

你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

相似 .row 和 .col-xs-4 这种预约义的类,可以用来快速创立栅格布局。Bootstrap 源码中定义的 mixin也可以用来创立语义化的布局。

通过为“列(column)”设置 padding 属性,从而创立列与列之间的间隔(gutter)。通过为 .row 元素设置负值

margin 从而抵消掉为 .container 元素设置的

padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。

负值的 margin就是下面的示例为什么是向外突出的起因。在栅格列中的内容排成一行。

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创立。

假如一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或者等于分界点大小的设施 , 并且针对小屏幕设施覆盖栅格类。 因而,在元素上应用任何

.col-md-*栅格类适用于与屏幕宽度大于或者等于分界点大小的设施 , 并且针对小屏幕设施覆盖栅格类。 因而,在元素上应用任何

.col-lg-*不存在, 也影响大屏幕设施。

通过研究后面的实例,可以将这些原理应用到你的代码中。

下面这幅图有助于了解Bootstrap的栅格系统。

三. 在线学习的网站推荐

Bootstrap V3版本官网:http://v3.bootcss.com

菜鸟教程Bootstrap专栏:http://www.runoob.com/bootstrap/bootstrap-tutorial.html

腾讯课堂:http://ke.qq.com

慕课网:http://www.imooc.com

  • 全部评论(0)
最新发布的资讯信息
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
【系统环境|】教你零基础如何快速入门大数据技巧(2019-05-12 11:25)
【系统环境|】想学习大数据?这才是完整的大数据学习体系(2019-05-11 11:33)
手机二维码手机访问领取大礼包
返回顶部