Bootstrap用户界面与交互架构

Twitter里面的开发者和设计师做出来的一套用于网页上面的用户界面和交互的架构。架构的意思就是把经常用到的一些东西事先给你编写好,需要的时候可以直接去调用。

比如说你想去设计页面的布局,你需要去计算网页的宽度,然后呢手工地把布局需要用的css代码给写出来。Bootstrap呢内置了一套网格布局的系统,你只需要在元素中使用设计布局相关的网格的类,不需要你手工地去写布局使用的css代码了。

再比如说你想在网页中出现一个按钮,通常你需要先用图形设计工具软件去设计这样一个按钮,然后用html和css代码把它实现出来,那么在网页中使用bootstrap架构的话,我们可以直接在元素中使用bootstrap架构为我们写好的按钮相关的类,这样就可以立即在网页中出现一个漂亮的按钮。

Bootstrap还允许我们去控制这个按钮的颜色,大小,边框等等。

Bootstrap包含了很多经常在网页中用到的设计,表格,表单,导航栏,按钮,分页器,导航路径等等。

Bootstrap还提供了很多交互的插件,比如说:对话框,下拉菜单,工具提示,选项卡等等。这些你都可以直接去使用,你只需要按照bootstrap设计好的方式,先把代码的结构写出来,然后在元素上使用相应的类。剩下的事呢,bootstrap都会为你做好。这就让我们的工作变得非常简单,下面我们就一起来学习bootstrap的使用架构。

总结:css类+交互插件=bootstrap架构

时间: 2024-08-27 09:53:34

Bootstrap用户界面与交互架构的相关文章

Hover States - 有趣的用户界面及交互设计

Hover States 一组新潮的和有趣的用户界面和交互设计的集合.Hover States 的目标是要成为设计师和开发人员灵感来源,向人们展示目前人们正在做的各种网站中令人惊奇的效果.他们认为交互设计的美是它的动作和行为,这就是为什么他们展示他们发现的所有视频内容的方式. 马上去围观 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效

解决Bootstrap.用户界面架构视频中的popover鼠标滑过无法弹出提示框

<div class="container"> <h1 class="page-header">工具提示</h1> <p><a title="这是一个提示信息" rel="tooltip" href="#">Tooltip</a></p> <div class="arrow"></div

Bootstrap学习(一):Bootstrap简介

一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 详细的来说,Bootstrap是一个简单.灵活的,可用于搭建简洁漂亮WEB页面的HTML,CSS,JAVASCRIPT的工具集.BootStrap基于HTML5 和 CSS3,具有漂亮的设计,友好的学习曲线,卓越的兼容性,还有12列的响应式栅格结构,丰富的组件等等.简单的说,Bootstr

Bootstrap框架基础

特点:写非常少的代码 即可实现多终端的页面适配 ?  简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. ?  基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档. ?  自定义JQuery插件,完整的类库,基于Less等.

Bootstrap(基础)学习笔记1

Bootstrap到底是什么? 欢迎来到Bootstrap课堂,加入高端大气上档次的web前端开发团队.上一小节Bootstrap做了简单的介绍,下面我们再来了解一下Bootstrap的前世今缘,在右侧是用Bootstrap预设的组件样式,包括按钮.表格.标签.导航等,感兴趣的小伙伴可以先睹为快,后面的章节我们会对这些组件做详细讲解. 2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootSt

Bootstrap的学习

bootstrap简介: ?  简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. ?  基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档. ?  自定义JQuery插件,完整的类库,基于Less等. 排版: 标题: 1.h1=36px,h2=30px,h3=24px,h4=18px,h5=14px.h6=12px 2.<small>标签来制作副标题 主要内容: clas

BootStrap入门教程 (一)

BootStrap入门教程 (一) 2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目.大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多

Bootstrap学习笔记上(带源码)

做好笔记方便日后查阅o(╯□╰)o bootstrap简介: ?  简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. ?  基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档. ?  自定义JQuery插件,完整的类库,基于Less等. bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script sr

(转帖)BootStrap入门教程 (一)

2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目.大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新.简洁;要素