有哪些 Bootstrap 的学习案例？

时间 2019-11-17

原文原文链接

bootstrap经典实用案例

bootstrap经典实用案例(很是详细),从菜鸟到高手的过程是艰辛的，你渴望救助。这本教程就是你无言的助手，默默的帮你到永远。带奋斗一块儿飞翔，由于有了它，让我拥有理智之思；我才使过去的失误再也不重演到今天的影片里；我才能使过去的成功在人生中继续升华；我才能真正收获金秋丰硕的果实，品味人生的快乐。css

出处：http://download.csdn.net/download/lzb2512/5307039html

=================================================================前端

how2j.cn 以实例驱动学习html5

哈哈，这个就是用Bootstrap的大屏幕作的效果，实现起来很简单，代码在这里： http://how2j.cn/k/boostrap/boostrap-jumbotron/495.htmlreact

若是你用过了Bootstrap就知道用起来很简单，可是若是你没用过，而后第一次去学习Bootstrap的网站的官网: Getting started · Bootstrap，放心好了，你必定会被各类术语： Bootstrap CDN，Install with npm, Grunt 什么的吓着，让你觉得，我靠，用Bootstrap 要这些都会啊？那恐怕个人基础知识还不够用Bootstrap吧？是的，我当初就是这种懵逼的感受jquery

可是，我上课要教这些东西啊，因此只有硬着学了。学完了以后，整理一遍，再用很平缓的曲线把Bootstrap的知识表现出来，基本上个人学生们一下下。。。就会了~npm

那么到底怎么使用呢？三个步骤bootstrap

1. 加上标签，由于Bootstrap用到了html5的特性，因此须要声明一下学习

<!DOCTYPE html>

2. 导入css和js网站

<script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

3. 套用class

<button class="btn btn-success">按钮</button>

duang! 你就获得了一个Bootstrap风格的按钮：

而它原本是这一个样子的：

接着我把Bootstrap作了些整理，把经常使用(我学会了的)的一些功能留下来，大致分为以下几个部分(有点长的图)：

对于每一个效果，以及须要套用什么样式列罗出来，方便查阅和使用

若是你不满意，也能够在线修改，立刻看到效果(无需跳转到新的页面，无需刷新页面)

好嘛，只要走一遍，基本上Bootstrap的效果就大概有个了解了。之后要用什么再来查一下，复制粘贴，而后再改改。。。就阔以了。

这个教程我前先后后差很少作了10天左右，而后duang~ 一个小时就讲完了~

教程地址：http://how2j.cn/k/boostrap/boostrap-tutorial/538.html

其余相关：定个小目标，作他个天猫官网前端？ - 黄喜的回答 - 知乎

收藏的同窗，请记得点个赞~

最好去下面的连接看看，由于知乎是能够随时更新的。

出处：https://www.zhihu.com/question/19867068