bootstrap经典实用案例

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

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

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

how2j.cn 以实例驱动学习

<img src="https://pic3.zhimg.com/b532c958909291f704005159b4db10d2_b.png" data-rawwidth="1021" data-rawheight="281" class="origin_image zh-lightbox-thumb" width="1021" data-original="https://pic3.zhimg.com/b532c958909291f704005159b4db10d2_r.png">

哈哈，这个就是用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 的学习案例？的更多相关文章

  1. bootstrap基础学习【菜单、按钮、导航】（四）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. bootstrap基础学习【表单含按钮】（二）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. bootstrap组件学习

    转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...

  4. Sql Server触发器案例（初学者学习案例）

    万事都是从最简单的一句“hello world”开始,所以我接下里介绍的sql触发器学习案例也从最简单的案例来说明分析: 1.首先创建表,这几张表你们也许很熟,在百度搜触发器案例都是使用这2张表 Cr ...

  5. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

  6. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

  7. 第二百五十四节，Bootstrap项目实战--案例

    Bootstrap项目实战--案例 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...

  8. DNS解析综合学习案例

    DNS解析综合学习案例 #图右侧为做题前环境配置 #命令为红色 #命令加载内容为绿色 #vi编辑内容为蓝色 1.用户需把/dev/myvg/mylv逻辑卷以支持磁盘配额的方式挂载到网页目录下 [roo ...

  9. Bootstrap基础学习 ---- 系列文章

    [Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...

随机推荐

  1. Fuckey V1.0 Beta版发布！！！

    Fuckey,以前叫FullNexus4,只因为当时想做一个软件给自己的Nexus 4,方便方便一下,不过这名字感觉太局限了,毕竟很多朋友不是使用的Nexus 4的手机,但却还是使用了FullNexu ...

  2. 北美Developer生存发展攻略

    http://www.followmedoit.com/bbs/forum.php?mod=viewthread&tid=49&extra=page%3D1 在北美,做PM不易,而做D ...

  3. robotFramework--ride 问题：Data source does not exist.

    第一次安装robotFramework,运行时提示Data source does not exist.最后发现是在Arguments这一栏误输入了. 导致的,去掉.后就可以正常运行了.

  4. word用宏命令完美解决列表编号变黑块的问题

    相信很多人跟我一样,多次定义新的多级列表,会导致列表编号变成下面这样黑块 在百度搜索结果尝试了鼠标左键选中应用样式,文档关闭后打开问题依旧: 还是得感谢万能的Google,帮我找到了答案. 问题根因: ...

  5. PHP利用二叉堆实现TopK-算法的方法详解

    前言 在以往工作或者面试的时候常会碰到一个问题,如何实现海量TopN,就是在一个非常大的结果集里面快速找到最大的前10或前100个数,同时要保证 内存和速度的效率,我们可能第一个想法就是利用排序,然后 ...

  6. Language-Directed Hardware Design for Network Performance Monitoring——Marple

    网络监控困难 1.仅仅通过去增加特定的监控功能到交换机是不能满足运营商不断变化的需求的.(交换机需要支持网络性能问题的表达语言) 2.他们缺乏对网络深处的性能问题进行本地化的可见性,间接推断网络问题的 ...

  7. springmvc细节篇

    前面讲了入门篇,现在来了解下springmvc的细节.mvc框架都有请求映射.数据绑定.请求处理.视图解析这几个过程,现在我们来了解springmvc中的这些细节. 1.使用@RequestMappi ...

  8. Ansible--01

    一.ansible是什么: 类似puppet之类的运维自动化工具 二.为什么选择ansible: 1. ansible是python语言开发的,python语言进入门槛低,方便基于pytnon对ans ...

  9. php中static静态变量的使用方法详解

    php中的变量作用范围的另一个重要特性就是静态变量(static 变量).静态变量仅在局部函数域中存在且只被初始化一次,当程序执行离开此作用域时,其值不会消失,会使用上次执行的结果.     看看下面 ...

  10. DevOps 解读

    本文为 转载文章, 非原创 DevOps DevOps(Development和Operations的组合词)是一种重视“软件开发人员(Dev)”和“IT运维技术人员(Ops)”之间沟通合作的文化.运 ...