我与bootStrap的初吻

453 阅读4分钟

开篇第一讲:BootStrap美妙的开始

先来了解一下BootStrap它是做什么的?了解完以后我们开始进入今天的学习

简介明了的说,bootstrap是一款用于网络和网络应用的一个开源框架,web前端用到的组件和功能的开发库,提供了非常好看的 CSS和JavaScript的源码,方便前端开发者能够快速上手搭建一套完善的前端html页面。

 Bootstrap是一组用于网站和网络应用程序开发的开源前端(所谓“前端”,指的是展现给最终用户的界面。与之对应的“后端”是在服务器上面运行的代码)框架

Bootstrap提供了哪些服务呢?

包括HTML、CSS及JavaScript的框架,提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展,旨在使动态网页和Web应用的开发更加容易。

Bootstrap采用模块化设计,并且用LESS样式表语言来实现各种组件和工具。一个名为bootstrap.less的文件包括了这些组件和工具,前端人员可以修改这个文件,自行决定项目需要哪些组件。

Less是什么?

Less 是一门CSS预处理语言,它扩充了CSS语言,增加了诸如变量、混合(mixin)、函数等功能,让CSS更易维护、方便制作主题、扩充。Less可以运行在Node.js或浏览器端。

Less语言支持变量、函数、运算符、组合选择器和一个叫做Mixin(混入)的功能。

从Bootstrap 2.0开始,Bootstrap文档包括一个叫做“自定义”的特别选项,前端人员可以根据自己的实际需要来选择包含的组件和效果,然后生成和下载已经编译好的包。

网格系统和响应式设计

以1170 px宽为基准。此外前端人员也可以自定义基准。

这两种情况下,Bootstrap都能提供四种变体:

  • 手机竖屏
  • 手机横屏
  • 平板电脑
  • PC
  • 低分辨率
  • 高分辨率

每个变体都会自动调整网格宽度

CSS

Bootstrap对一系列HTML组件的基本样式进行了定义,并且为文本、表格和表单元素设计了一套独特的、现代化的样式

可重用组件

除了基本HTML元素,Bootstrap还包括了其他常用的界面元素,例如带有高级功能的按钮(例如按钮组合、带有下拉菜单选项的按钮、导航栏、水平和垂直标签组、导航、分页等等)、标签、高级排版、缩略图、警告信息、进度条等。

这些组件都使用CSS的类实现。在页面中需要将其对应到特定的HTML元素上面。

JavaScript组件

通过jQuery,Bootstrap加入了一些JavaScript组件。它们提供了例如对话框、工具提示、轮播等功能。此外还增强了一些用户界面元素的功能,例如输入框的自动完成。

Bootstrap 2.0支持以下JavaScript插件:

  • Modal(模态对话框)
  • Dropdown(下拉菜单)
  • Scrollspy(滚动监听)
  • Tab(标签页)
  • Tooltip(工具提示)
  • Popover(浮动提示)
  • Alert(警告)
  • Button(按钮)
  • Collapse(折叠)
  • Carousel(轮播)
  • Typeahead(输入提示)
  • Affix(附加导航)

了解了以上的内容后,我们可对Bootstrap进行了一些基础的了解,接下来我们讲一讲Bootstrap 要用它的理由是什么?

我们为什么要使用bootstrap?

随着互联网的崛起,日新月异的技术不断涌现,前端作为互联网客户端的佼佼者,可谓是充当着和客户交互的首要关卡,前端页面的展示可以吸引用户的眼球,能够为企业带来大量的用户。所以在前端发展迅速的时代,我们要突破用户对前端技术的认知。

在使用bootstrap时,它有着以下几点

  • 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。

  • 浏览器支持:所有的主流浏览器都支持 Bootstrap。

  • 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap

  • 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计

  • 为开发人员创建接口提供了一个简洁统一的解决方案。

  • 包含了功能强大的内置组件,易于定制。

  • 它还提供了基于 Web 的定制。

  • 最重要的是 免费开源

以上就是什么是bootstrap以及其作用的详细内容,更多请关注博主获取其它相关文章!