有哪些 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风格的按钮：
<img src="https://pic1.zhimg.com/5195f861270e3ea83e1e4d56dd347ad0_b.png" data-rawwidth="83" data-rawheight="52" class="content_image" width="83">
而它本来是这一个样子的：
而它本来是这一个样子的：
<img src="https://pic4.zhimg.com/1769458565c69cea4771ee20b81605db_b.png" data-rawwidth="69" data-rawheight="39" class="content_image" width="69">
接着我把Bootstrap做了些整理，把常用(我学会了的)的一些功能留下来，大体分为如下几个部分(有点长的图)：
<img src="https://pic4.zhimg.com/4f40043c7a0a7b306dbc3e78616be02f_b.png" data-rawwidth="181" data-rawheight="1621" class="content_image" width="181">
对于每个效果，以及需要套用什么样式列罗出来，方便查阅和使用
<img src="https://pic2.zhimg.com/a44d9e362daad8ed135ab1ed70265aed_b.png" data-rawwidth="1236" data-rawheight="708" class="origin_image zh-lightbox-thumb" width="1236" data-original="https://pic2.zhimg.com/a44d9e362daad8ed135ab1ed70265aed_r.png">
如果你不满意，也可以在线修改，马上看到效果(无需跳转到新的页面，无需刷新页面)
<img src="https://pic3.zhimg.com/720d80cfc3c22fa40671116ca55f06f6_b.png" data-rawwidth="1117" data-rawheight="843" class="origin_image zh-lightbox-thumb" width="1117" data-original="https://pic3.zhimg.com/720d80cfc3c22fa40671116ca55f06f6_r.png">
好嘛，只要走一遍，基本上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 ...
随机推荐
- 关于easyUI分页
首先前台会传来两个参数,分别是rows(一页数据的大小,即一页有多少条数据)和page(第几页),根据这两个参数可以计算出从数据库中从第几 条数据开始取和要取多少条数据.数据取出来后,因为easyUI ...
- [翻译] FBLikeLayout
FBLikeLayout This is an UICollectionView layout inspired by the photo section of facebook. This layo ...
- PowerShell管理SCOM_批量设置维护模式（上 ）
#定义存储需要置为维护模式的计算机名称列表 $serverlist = "C:\scomm\servers.txt" #定义脚本执行结果的输出位置 $server_maintena ...
- PHP解决网站大数据大流量与高并发
1:硬件方面 普通的一个p4的服务器每天最多能支持10万左右的IP,如果访问量超过10W那么需要专用的服务器才能解决,如果硬件不给力软件怎么优化都是于事无补的.主要影响服务器的速度 有:网络-硬盘读写 ...
- Ubuntu Linux 14.04 LTS 上安装php7+mysql+nginx
输入 $ sudo apt-get install -y language-pack-en-base$ sudo LC_ALL=en_US.UTF-8 add-apt-repository ppa:o ...
- 铁乐学Python_Day35_Socket模块3和hmac模块
验证客户端链接的合法性 如果你想在分布式系统中实现一个简单的客户端链接认证功能,又不像SSL那么复杂, 那么可以利用hmac+加盐的方式来实现. 例1:简单的服务端如下 #!/usr/bin/env ...
- VB ASP 使用 now() 时默认格式调整方法
修改注册表 [HKEY_USERS\.DEFAULT\Control Panel\International] "sShortDate"="yyyy-M-d" ...
- python3: 字符串和文本(3)
11. 删除字符串中不需要的字符 strip() 方法能用于删除开始或结尾的字符: lstrip() 和 rstrip() 分别从左和从右执行删除操作 >>> s = ' hell ...
- in有两种用法:
# in有两种用法: 1. 在for中. 是把每一个元素获取到赋值给前⾯的变量. 2. 不在for中. 判断xxx是否出现在str中. #len() 为内置函数,输出为1,2,3,4....., 长度 ...
- 解决qpidd服务安装不上的问题
前几天对一个文件夹命名,忘记了qpidd的路径在这个文件夹的下面,导致后来qpidd用不了. 并且有打开计算机-管理-服务时,看到Advanced MessageQueuing Protocol 未启 ...