首页 > 学习bootstrap 有什么什么方式 推荐一下吗?求推荐交流

学习bootstrap 有什么什么方式 推荐一下吗?求推荐交流

我刚刚接触前端的一点HTML CSS的东西 现在有一个项目要用bootstrap 做前端 ,以前都是做后端的PHP 对前端不是很熟悉,
我现在学bootstrap 发现很盲目不知道怎么下手

官方文档看的懂, 然后一涉及到设计做一个页面就不知道怎么下手了


首先,要掌握一个前端框架,前几步走好了,后面就可以很欢快的使用了~~~

第一步:看看现成的组件的例子。并不是让你直接学用法,是让你预先熟悉下组件,样式的使用场景,什么样的情况用什么,有个大概的印象,对于之后自己需要什么样的东西也有个明确的目的(目的很重要)

第二步:基于第一步,等这几个现成的东西玩熟了,可以去"大致"看看示例api(注意不要深究,慢慢来)。当然也不是让你直接就学其中的写法,你可以直接粘贴复制,看看能不能按自己的心意去实现把现场的东西"挪"到你的项目中

第三步:你会发现你直接复制过来的东西不能达到自己的效果,现在开始,就可以去仔细的看看怎么去调用api的不同写法,实现自己的需求了。这时,你要先看看这个bootstrap的卖点栅格系统,然后对比之前看到的示例网站,自己动手改改,删删,看看有什么不同。

第四步:等粘贴复制用熟了后,就尝试去自己来写了,然后可以去看看成熟的网站结构源码,相信会悟出更多~


bootstrap只是一个前端框架,并且你的目的就是利用他搭建出一个比较好看的网站而已。

你应该有html\css\js\jq等的基础,就算是没有,也肯定差不多能看懂

bootstrap有两个版本,现在一般选择的就是3.X版本

关于设计页面,你可以先抄抄他的,bootstrap官网就是一个很好的例子,并且在官网里面就介绍了一些基于bootstrap搭建的网站,你都可以邪恶的用F12抄下来

我个人认为你可以用1-2个小时大致的看一下文档,然后做一些笔记什么的,记下他提供了哪些样式。 然后直接下手做,遇到什么就按照他的文档用什么,半路中发现有更好的方式去做之前的工作了就重构一下前面的代码

最后一个,他的源码(开发的那个版本里面,可以去github下载)里面提供了几个比较简单的example,可以粗略的看一下


看文档,还有SASS..


copy and paste, f5, yes!


~~这个放着我来!~~

把要引用的文件都弄明白是干什么的,然后看着官方的例子,找到要用的直接复制粘贴。直接开浏览器调试器看。特别是栅格系统,2和3有很大的不同,要好好弄明白,毕竟是关乎整个网页的结构。然后js组件也多用用,感受一下。icon-font也是好东西,多看看,多用用。

重点来了,这里是一个技术人员的分水岭了。我个人认为bootstrap的一个优点是他的命令规则,值得好好研究。栅格的设计也是比较优美,相当耐用。想一下人家为什么这么设计。不止是css的设计,less和sass(scss)也是相当值得一看。里面各种精巧设计,简直就是活例子。里面各种函数化设计,相当灵活。

如果我想要一个24栏的栅格系统肿木办?自己修改。而且官方其实也提供了一个自定义的工具,调调颜色什么的。或者看源码,这样就能根据自己的需求生成适用于自己项目的bootstrap了。

拿过来,改一改,那就是自己的了。我不知道大家都用bootstrap,都是为了用那几个UI组件,反正我是把有用的抽出来,然后改一改,然后加点什么,变成适用于项目。然后你会发现,自己用的东西都是自己改造的,这个时候bootstrap才真正的发挥了他的价值。


练、练、练


1.看文档
2.敲代码


这个其实你需要什么样的功能,在文档里找,然后,看看他的介绍,套用他的代码,主要是引用class类,还有一部分效果是有两种方式调用,一种是data-*,还有一种是利用JS调用,这个要看清楚了,仔细的看一下文档。还有现在是有两个版本一个是B2,还有一个是B3,这两个差别其实还是不少的。


文档中有很多例子,拿过来套就行,主要是class标签

【热门文章】
【热门文章】