有哪些 Bootstrap 的学习案例？

bootstrap经典实用案例

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

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

=================================================================

how2j.cn 以实例驱动学习

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

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

但是，我上课要教这些东西啊，所以只有硬着学了。学完了之后，整理一遍，再用很平缓的曲线把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

有哪些 Bootstrap 的学习案例？的更多相关文章

bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
bootstrap基础学习【表单含按钮】（二）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
bootstrap组件学习
转自http://v3.bootcss.com/components/ bootstrap组件学习矢量图标的用法<span class="glyphicon glyphicon-se ...
Sql Server触发器案例（初学者学习案例）
万事都是从最简单的一句“hello world”开始,所以我接下里介绍的sql触发器学习案例也从最简单的案例来说明分析: 1.首先创建表,这几张表你们也许很熟,在百度搜触发器案例都是使用这2张表 Cr ...
bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
第二百五十四节，Bootstrap项目实战--案例
Bootstrap项目实战--案例 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...
DNS解析综合学习案例
DNS解析综合学习案例 #图右侧为做题前环境配置 #命令为红色 #命令加载内容为绿色 #vi编辑内容为蓝色 1.用户需把/dev/myvg/mylv逻辑卷以支持磁盘配额的方式挂载到网页目录下 [roo ...
Bootstrap基础学习 ---- 系列文章
[Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...

随机推荐

python基础_类型_dict
#dict字典,其实与其叫字典不如叫key-value更合适,不知道这个名是怎么来的,这个可以用来搞用户名和密码,不过搞这个不用数据库是不是显得太low了 #用花括号{}扩起来,逗号分隔每个元素,每个 ...
ubuntu 常见配置文件
环境变量:linux的环境变量其实就是在启动时执行一下赋值语句系统级 1./etc/environment 系统级$PATH 2.其他启动文件(https://www.cnblogs.com ...
Python静态方法实现单实例模式
单实例模式当程序中需要同一个实例就可以解决问题的场景,可以使用单实例模式
一、DAO设计模式二、DAO设计模式的优化三、JDBC中的事务，连接池的使用
一.DAO设计模式概述###<1>概念 DAO,Data Access Object ,用于访问数据库的对象. 位于业务逻辑和数据持久化层之间,实现对数据持久化层的访问![](1.png) ...
December 01st 2016 Week 49th Thursday
Life is a maze and love is a riddle. 生活是个迷宫,爱情是个谜语. I am lost in both. Can you provide me some guida ...
* args 和 **kwargs
def func(*args, **kwargs): print(args,kwargs) func("对", "哦",o=4, k=0) 结果---> ...
C++11 的右值引用
作者:Tinro链接:https://www.zhihu.com/question/22111546/answer/30801982来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...
2002. [HNOI2010]弹飞绵羊【LCT】
Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置 ...
Python - 格式化字符串的用法
0. 摘要 Python支持多种格式化字符串的方法,包括%-fromatting.str.format().f-strings三种,f-strings是Python3.6以后出现的一种新方法,相比其他 ...
Day4 JavaScript（二）dom操作
dom(文档对象模型) 文档结构文档加载,转换为文档对象模型.将所有的标签,文本,属性转换为dom节点,形成一棵dom树. 标签,元素,节点: <a> 标签开始到结束的部分标签,文本, ...

有哪些 Bootstrap 的学习案例？

bootstrap经典实用案例

有哪些 Bootstrap 的学习案例？的更多相关文章

随机推荐

热门专题