美文网首页我爱编程
Bootstrap学习总结

Bootstrap学习总结

作者: 梁煜辉 | 来源:发表于2017-08-20 18:14 被阅读101次

这篇文章是本人对于学习Bootstrap的一些总结,在此分享给大家。

1. Bootstrap是什么?

Bootstrap是一个为我们构建网站样式提供方便的框架,它分为主要分为三大块。即css样式板块、font字体板块与js插件板块。bootstrap着重于把所有样式都实现好,供我们调用,所以js板块的代码很大一部分是为了实现样式的动画效果。而字体文件可以用于生成图标,不过字体的文件比较大,一般比较少使用到。

2. Bootstrap CSS样式

Bootstrap里的CSS样式文件全部都是Less文件作为组件,导入到bootstrap.less文件中,然后再对bootstrap.less进行编译,得到bootstrap.css文件。
以下是bootstrap.less的源码

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/* Core variables and mixins (mixins文件夹里的less文件)*/
@import "variables.less";
@import "mixins.less";

/* 基础和依赖 */
/* Reset and dependencies */
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

/* Core CSS 核心 */
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

/* Components 各种组件 */
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";

/* Components w/ JavaScript */
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";

/* Utility classes */
@import "utilities.less";
@import "responsive-utilities.less";

如果想学习Less这门CSS预编译语言,不妨登录他们的官网Less,进行学习。

3. 自定义Bootstrap

由于Bootstrap里面的样式都帮我们设置好了,如一个按钮的样式,我们只需在html文件中为此按钮添加对应的类名就能渲染出很好看的按钮样式。但是如果我们要对此按钮的样式进行修改就比较麻烦了。虽然比较少样式进行修改我们还可以写写行内样式 ,但是修改的样式多起来时不仅修改困难,日后维护也将会十分困难。

综上,我们应该做的是学习Bootstrap的设计理念,基于这个理念来编写我们的自定义样式。如创建自己的按钮模块,然后在bootstrap.less中引入。同时我们已可以把项目中不需要的样式从bootstrap.less中删除对应的组件。

4. 总结

我觉得Bootstrap有两大形态:

①原始形态。不限制页面样式或对于样式无要求时网页的快速搭建,如后端工程师写页面时可以直接套用Bootstrap的默认样式,对数据进行简单的呈现;

②高度定制化形态。有设计要求的响应式页面,如必须按照PSD图进行网页的搭建时就需要前端工程师按照设计要求进行组件的创建,然后引入需要的bootstrap模块(常用的组件有grid.less)实现高度定制化后的Bootstrap。

相关文章

  • Bootstrap学习总结

    引言: 在学习完HTML、CSS、JavaScript、JQuery之后学习了bootstrap相关知识,并做了一...

  • Bootstrap学习总结

    这篇文章是本人对于学习Bootstrap的一些总结,在此分享给大家。 1. Bootstrap是什么? Boot...

  • Bootstrap学习总结

  • BootStrap学习总结

    BootStrap 概念:一个前端开发的框架,Bootstrap是基于html、css、Javascript的。 ...

  • 学习bootstrap的总结

    前端菜鸟一枚,最近开始学习bootstrap,自己的总结,如果有大神看到有好的学习建议,还请多多指教。 在学习之前...

  • Bootstrap学习总结一

    Bootstraps是我在看视频教程的时候无意中看到的,现在才真正领会到它的强大与流行。 [ 1 ] Bootst...

  • Bootstrap学习资源

    bootstrap笔记总结 Bootstrap入门笔记之(三)栅格系统 我的Bootstrap笔记,常用类名知...

  • BootStrap应用实例学习笔记

    第二次学习bootstrap了,这次主要以实际用例为主,做一下总结。 51CTO课程链接:BootStrap零基础...

  • bootstrop总结上 一、 什么是Bootstrap? Bootstrap,来自 Twitter,是目前最受欢...

  • 学习网站资源

    Bootstrap :bootstrap学习网站 element:element学习地址 Flex: Flex 布...

网友评论

    本文标题:Bootstrap学习总结

    本文链接:https://www.haomeiwen.com/subject/rmfxkxtx.html