首页 > 其他分享 >深入理解BootStrap -- 学习从现在开始1

深入理解BootStrap -- 学习从现在开始1

时间:2022-12-14 15:36:01浏览次数:73  
标签:Bootstrap -- BootStrap 网格 样式 深入 开发者 文档 CSS


当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传的11大原因。如果你还没有使用Twitter Bootstrap,建议你去了解一下。我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习。这里有我对VS2013更新的简要介绍,有兴趣的话你可以看一眼​​Visual Studio 2013更新内容简介​​

bootstrap深受广大丝喜爱的原因到底是什么呢 

1.节省时间

利用Bootstrap,你将有更多的时间用来挣钱。Bootstrap库中包含很多现成的代码片段,这些代码可为你的网站增加更多活力。Web开发者不必再花费时间、费力地编码,只需找到合适的代码,插入到合适位置即可。此外,CSS利用LESS编写,很多样式和设计都已设计完成。

2.定制化

Bootstrap很重要的一方面就是你可以将它据为己有。你可以留取框架中需要的部分,抛弃不需要的。Bootstrap整体允许你根据自己的需要,裁剪自己开发的项目。

3.设计方面的因素

网格系统

对页面进行布局时,往往需要有一个合适的网格。你不一定使用该平台的网格,但它确实能大大降低你工作的难度。默认模式下,该平台提供一个16列的网格(宽为960px)。每列宽40px,每列左右两侧具有10px的间隙,各网格最外侧均留出20px的空白。你可以根据需要改变行数与间隔大小。样式已开发完成,开发者只需要把合适的代码放入HTML合适的位置即可。

LESS

LESS在开发周期内应用很广。它是一种基于CSS之上的高级语言,其目的是使得CSS开发更灵活和更强大。你可以利用LESS的Mixins及CSS操作定制内嵌网格。Bootstrap采用了大量流行的CSS3功能,可以对所有的网站提供统一的浏览体验。

JavaScript

Bootstrap提供JavaScript库,该库超越了基本的架构与样式。通过Bootstrap,开发者可轻易地操作窗口警告框、工具提示框、滚动条、按钮等。Bootstrap最突出之处是,它可以让你不必再费神费力地写脚本。

4.一致性

Twitter当初开发该工具的最主要原因是,开发者所开发项目在不同浏览器间的不一致性。这就导致了很多前端开发与最终用户界面之间的问题。Bootstrap保证了界面在不同平台上的统一性。在IE、Chrome及Firefox中,你可以看到统一的界面。

5.保持持续更新

以jQuery 的UI为例:每一年更新一次。而Bootstrap则在不停地改进,更具规律性与持续性。Web开发者一发现新问题, Bootstrap团队便立刻着手修复它。

6.易于集成

如果你想进一步完善一个已完成的网站,Bootstrap可以帮助你。例如,如果你要统一使用自己编写的表格样式,你要做的是把你的样式复制到CSS样式文件中。Bootstrap将立即剔除它本身的样式,在这里,你需要将该文件与Twitter进行关联。集成的过程十分简单、方便、快捷。完成之后,你便可以把你的设计应用到你的核心内容上。

7.响应式

Bootstrap为响应式框架。无论你的开发工作从笔记本转移到iPad,还是从iPad转移到Mac上,你都不用为你的工作而苦恼。因为Bootstrap能以超快的速递与效率适应不同平台间的差异。

8.对未来技术具有兼容性

Bootstrap包含很多特殊元素,如HTML5和CSS3,这些元素被称为设计的未来。因为该框架考虑到设计和开发的未来,它很有潜力成为未来几年里Web开发者的参考标准。

9.竞争力

Bootstrap并不是唯一的前端开发框架,比如还有JQuery UI、HTML5 Boilerplate等等。但对于Bootstrap来说,真正的竞争对手是Zurb Foundation。Bootstrap 2新增加了一个工具集,Foundation经过好长时间才填补上。Bootstrap包含大量的第三方插件、主题、功能特性、代码等等,而Foundation并不具备这些。

10.详尽的说明文档

Bootstrap的文档相当精彩。大部分新平台往往没有合适的说明文档,而Bootstrap的说明文档大大帮助了我们的入门学习。通过文档可以找到我们需要的所有信息。

11.让老板们受益

学习Bootstrap,并不会花费你太多时间,因为它将所有的模块化方法与体系结构封装在了一起。从老板的角度来看,如果你为Web开发者提供了Bootstrap框架,那么他们会节省更多的学习时间,并快速投入到工作中。这会为老板们带来更好的收益。 

如果你觉得Bootstrap确实对你有帮助,你可以访问​​twitter.github.com/bootstrap/​​查看该框架。你也可以下载编译版本,或获取包含CSS和JavaScript文档的Bootstrap源文件。

视觉体验


深入理解BootStrap -- 学习从现在开始1_CSS

首先看到的这是中文官网,如果细心看一下,其实它的讲解很详细。

接下来点进​​http://v3.bootcss.com/​​bootstrap3中文文档。


深入理解BootStrap -- 学习从现在开始1_bootstrap_02

继续往下看​​http://expo.bootcss.com/​​这里许多已经应用的网站实例额。


深入理解BootStrap -- 学习从现在开始1_web开发_03

看到这么多实例,这么优秀的前端架构,我竟然才知道,而且有这么多的网站已经使用了,我也迫不及待了,开始我的学习之旅了。

总结

看了这么多,没什么好说的了,接下来就是要学习了,初步打算使用Sublime Text3进行简单的学习练习。

标签:Bootstrap,--,BootStrap,网格,样式,深入,开发者,文档,CSS
From: https://blog.51cto.com/u_15912341/5937198

相关文章

  • SpringBoot入门系列:Spring Security 和 Angular JS(1)
    SpringSecurity和AngularJS系列,是一文的解析。受保护的单页面应用程序这一节我们要展示将SpringSecurity、SpringBoot和AngularJS放在一起使用的一些不错的特性,它......
  • SpringBoot入门系列:Spring Security 和 Angular JS(2)
    添加动态的内容目前我们已经有了一个应用程序,硬编码了一句问候语在里面。这对学习如何把这些凑到一起很有帮助,不过实际上我们期望的是来自于后台服务器的内容,因此我们可以创......
  • Maven下载jar包不完整缺少source、doc问题的解决方案
      https://blog.csdn.net/Gaowumao/article/details/115262356https://www.imlc.me/how-to-build-maven-project-with-source-jar-and-javadoc-jar/https://www.cn......
  • 深入理解BootStrap -- 表格4
    前言本文主要讲解的是表格,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的各种列表的展示,有时候也会因为用户或者老板的需求而感到头疼。下面我们来看一下,Boo......
  • Java线程篇(六):线程池
    自JDK5之后,Java推出了一个并发包,​​java.util.concurrent​​,在Java开发中,我们接触到了好多池的技术,String类的对象池、Integer的共享池、连接数据库的连接池、Struts1.3的......
  • SpringBoot入门系列: JPA mysql(五)
    一,准备工作,建立spring-boot-sample-mysql工程1、http://start.spring.io/    A、Artifact中输入spring-boot-sample-mysql    B、勾选Web下的web    C、勾选......
  • idea快捷键大全
    IntelliJIdea常用快捷键列表Ctrl+Shift+Enter,语句完成“!”,否定完成,输入表达式时按“!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ct......
  • bashrc 配置文件自定义指南,如何快速cd到指定路径、添加别名、使用函数等
    目录bashrc配置文件是啥?自定义.bashrc配置文件的好处如何编辑bashrc配置文件使你的修改生效如何在.bashrc中使用别名——比如可以快速cd到某个路径起个别名——cdd,快速......
  • 深入理解BootStrap -- 表单5
    前言本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容:​​1.基本案例​​​​2.内联表单......
  • Linux man命令手册使用方法,man和man5区别
    1、https://www.modb.pro/db/4464931.man手册页简介man手册页(manualpages,“手册”),是类UNIX系统最重要的手册工具。多数Linux发行版都预装了它。Linux提供了丰富的帮......