发表于: 2019-11-13 21:20:33
1 1052
今天做的事
今天没有忙着开始推进任务
学习了 BOOTSTRAP
BootStrap 是Twitter的工程师开发的前端框架,可以非常方便的设计出好看的页面效果。
本章演示一些基本元素 使用 Bootstrap和不用的区别
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新、简洁;要素排版利落大方。
Bootstrap 特点:
简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档。
自定义JQuery插件,完整的类库,基于Less等
BootStrap优势:
Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。
Bootstrap响应式布局设计,给用户提供更好的视觉使用体验。
丰富的组件
高大上:界面美观上档次
未来向所有项目、平台推广
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
使用单一的一组 .col-md-*
栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row
内。
按钮样式 可以用于
按钮元素<button>
超链元素<a>
按钮类型的input元素 <input type="button">
提交类型的input元素 <input type="submit">
重置类型的input元素 <input type="reset">
运用Bootstrap的栅格系统,可以做出像table那样定义多少行,多少列效果,但是又比table灵活。
运用Bootstrap的栅格系统,首选需要准备一个class=container的div
紧接着需要一个class=row的 div,表示行
再挨着的div,就是列了。
今天的收获
学到了一个新的布局
遇到的问题
还没学会如何使用
明天的计划
实践学习的知识
评论