Bootstrap框架的学习(一)

一、Bootstrap框架介绍

Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架。

二、简单介绍

Bootstrap框架是属于UI框架,与Jquery不一样,准确的描述Bootstrap框架属于CSS框架,而非JavaScript框架,但是它本身使用JavaScript来完善Bootstrap框架来完善视觉效果。

三、优点

完美的支持H5和CSS3,以及支持移动端浏览器

四、内容

可以参考一下官方文档http://v3.bootcss.com/

(一)脚手架:用于重置背景,链接的样式等,包含两个简单的布局结构。这两个布局系统:默认栅格系统和流式栅格系统。Bootstrap样式使用了lesscss技术,比如:重置背景。我觉得最精彩的部分是栅格系统。

(1)默认栅格系统:是按照固定的宽度等分,按940px等分。

(2)流式栅格系统:是按照视图页面进行等分,按12等分。

(二)基本CSS样式

Bootstrap给出了常用的HTML元素样式,CSS提供样式很专业很美

(三)CSS组件

Bootstrap还提供一些常用的CSS组件

(四)Js插件

随意扩展Bootstrap,特别是js框架

五、版本

使用较广的是2和3版

2015年9月,发布了Bootstrap 4alpha版本

六、css组件

下拉菜单,按钮组,按钮下拉菜单,导航,导航条

七、js插件

自带13个jq插件,包括:对话框,标签页,流动条,弹出框

八、Bootstrap与JqueryMobile比较

Bootstrap是跨屏幕分辨率自动适应

JqueryMobile是专门针对移动端

九、Bootstrap与Jquery EasyUI比较

Bootstrap封装性更胜一筹。Bootstrap的表格仅仅使用一个属性可以控制分页,无论是服务器的分页还是客户端分页都可以控制,而且自带查询框。

EasyUI需要手动去写分页的样式以及查询功能。

时间: 2024-10-21 12:46:41

Bootstrap框架的学习(一)的相关文章

【原创】bootstrap框架的学习 第八课 -[bootstrap表单]

Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 吹着表单或基本表单 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. 向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-control. 例子: <!DOCTYPE

【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

Bootstrap 表格 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody> 表格主体中的表格行的容器元素(<tr>). <tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>). <td> 默认的表格单元格. <th> 特殊的表格单元格,用来标识列或行(取决于范围和位置).必须在 <

基于BootStrap框架构建快速响应的GPS部标监控平台

最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用的是bootStrap框架,自适应页面大小,基于html5开发,界面设计非常的简洁,清爽,这样可以快速的关注到自己想看到的内容.不像传统的物流网站千人一面,充斥着大量的物流广告还配有slider动图效果让人眼晕,显得很cheap. 显然如果直接将一个以后台数据展现为主的GPS管理平台集成到这样一个物流网

Bootstrap 框架学习目录

Bootstrap 框架学习目录 Bootstrap 框架学习目录,布布扣,bubuko.com

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

Web前端学习笔记:Bootstrap框架

Bootstrap框架属于UI框架,这个和jQuery不太一样,其实准确的描述Bootstrap框架属于css框架而非javascript框架,但是它本身也使用javascript来完善Bootstrap框架的视觉效果.此外,Bootstrap框架十分超前,在支持html5和css3的浏览器上表现特别好,而且对移动终端的浏览器支持也是相当优秀. 一个完整的Bootstrap框架包含如下四个部分: 脚手架(不知道官网为啥这么翻译):用于重置背景.链接样式.栅格系统等,并包含两个简单的布局结构.Bo

bootstrap框架应用

开发中文网:v3.bootcss.com (1)前段?  框架 ? 用户 -->  前端应用程序 --->后端应用程序 --->后端服务器. 框架:Library 或者lib,都值得是框架.第三方提供的,一些接口或者功能. 一.Bootstrap框架是什么?? BootStrap,最早的时候是两个单词的合成.现在成为专有名词Bootstrap,它是一个快速开发web应用程序和网站的前端框架. 二.为什么要学boot,而且为什么那么火爆? (1)容易上手,学过HTML和CSS的人就能来学习

bootstrap框架以及css一些常见问题

这周学习了Bootstrap框架.flatUl框架还有快切框架,框架很好的简化了我们程序员的代码量,同时也可以让我们更丰富利用已经写好的各种css和js样式,能简单.快速.解决兼容性问题让我们有更多精力放在web前端开发上: bootstrap首先提供了一个布局框架,叫 960栅格式布局,其布局格式如下:     1. 12列划分         1. 每个栅格栏左右间隙10px:         2. 每个栅格60px:         2. 列与列之间间隔20px:         3. 可

关于CSS基础框架的学习

什么是CSS基础框架? CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块,用于简化web前端开发的工作,提高工作效率. 为什么需要研究和使用它? 在当前浏览器很多 而且各有差异的情况下 如何统一样式 兼容大部分浏览器是很有必要的 从具象的表现中抽出抽象的模块来重复使用,是减少用户下载.方便团队及个人开发最重要的手段.所以CSS框架就很有必要了 现在有哪些比较著名的框架? 960gs 960 像素的页面宽度似乎成为了一种设计标准,在当