bootstrap-material-design-个人总结：

所需框架：
1.boostrapt 3.0+
2.jQuery 1.9.1+

项目目录：
Material/
├── css/
│ ├── bootstrap-material-design.css
│ ├── bootstrap-material-design.css.map
│ ├── bootstrap-material-design.min.css
│ ├── bootstrap-material-design.min.css.map
│ ├── ripples.css.map
│ ├── ripples.min.css
│ ├── ripples.min.css.map
├── js/
│ ├── material.js
│ ├── material.min.js
│ ├── material.min.js.map
│ ├── ripples.js
│ ├── ripples.min.js
│ ├── ripples.min.js.map

注意：
.form-horizontal .form-group{
margin-left:-15px;
margin-right:-15px;
}会出现横滚动条，去掉即可

初始化：
$.material.init()

<!doctype html>

<html lang="en">

<head>

    <title>DemoMine</title>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Bootstrap -->

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Material Design -->

    <link href="css/bootstrap-material-design.css" rel="stylesheet">

    <link href="css/ripples.min.css" rel="stylesheet">

    <!-- jQuery -->

    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

    <!-- Twitter Bootstrap -->

    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- Material Design for Bootstrap -->

    <script src="js/material.js"></script>

    <script src="js/ripples.min.js"></script>

    <!--修正表单和滚动条问题-->

    <style>

        .form-horizontal .form-group{

            margin:0;

        }

    </style>

</head>

<body>

<!--导航栏-->

<div class="navbar navbar-default">

    <div class="container-fluid">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="javascript:void(0)">Brand</a>

        </div>

        <div class="navbar-collapse collapse navbar-responsive-collapse">

            <ul class="nav navbar-nav">

                <li class="active"><a href="javascript:void(0)">Active</a></li>

                <li><a href="javascript:void(0)">Link</a></li>

                <li class="dropdown">

                    <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown

                        <b class="caret"></b></a>

                    <ul class="dropdown-menu">

                        <li><a href="javascript:void(0)">Action</a></li>

                        <li><a href="javascript:void(0)">Another action</a></li>

                        <li><a href="javascript:void(0)">Something else here</a></li>

                        <li class="divider"></li>

                        <li class="dropdown-header">Dropdown header</li>

                        <li><a href="javascript:void(0)">Separated link</a></li>

                        <li><a href="javascript:void(0)">One more separated link</a></li>

                    </ul>

                </li>

            </ul>

            <form class="navbar-form navbar-left">

                <div class="form-group">

                    <input type="text" class="form-control col-md-8" placeholder="Search">

                </div>

            </form>

            <ul class="nav navbar-nav navbar-right">

                <li><a href="javascript:void(0)">Link</a></li>

                <li class="dropdown">

                    <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown

                        <b class="caret"></b></a>

                    <ul class="dropdown-menu">

                        <li><a href="javascript:void(0)">Action</a></li>

                        <li><a href="javascript:void(0)">Another action</a></li>

                        <li><a href="javascript:void(0)">Something else here</a></li>

                        <li class="divider"></li>

                        <li><a href="javascript:void(0)">Separated link</a></li>

                    </ul>

                </li>

            </ul>

        </div>

    </div>

</div>

<!--表单-->

<div class="form-group label-floating">

    <label class="control-label" for="focusedInput1">Write something to make the label float</label>

    <input class="form-control" id="focusedInput1" type="text">

</div>

<div class="form-group label-floating">

    <label class="control-label" for="focusedInput2">Focus to show the help-block</label>

    <input class="form-control" id="focusedInput2" type="text">

    <p class="help-block">You should really write something here</p>

</div>

<div class="form-group">

    <label class="control-label" for="disabledInput">Disabled input</label>

    <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">

</div>

<div class="form-group has-warning">

    <label class="control-label" for="inputWarning">Input warning</label>

    <input type="text" class="form-control" id="inputWarning">

</div>

<div class="form-group has-error">

    <label class="control-label" for="inputError">Input error</label>

    <input type="text" class="form-control" id="inputError">

</div>

<div class="form-group has-success">

    <label class="control-label" for="inputSuccess">Input success</label>

    <input type="text" class="form-control" id="inputSuccess">

</div>

<div class="form-group">

    <label class="control-label" for="inputLarge">Large input</label>

    <input class="form-control input-lg" type="text" id="inputLarge">

</div>

<div class="form-group">

    <label class="control-label" for="inputDefault">Default input</label>

    <input type="text" class="form-control" id="inputDefault">

</div>

<div class="form-group">

    <label class="control-label" for="inputSmall">Small input</label>

    <input class="form-control input-sm" type="text" id="inputSmall">

</div>

<div class="form-group">

    <label class="control-label" for="addon1">Default label w/input addons</label>

    <div class="input-group">

        <span class="input-group-addon">$</span>

        <input type="text" id="addon1" class="form-control">

        <span class="input-group-btn">

        <button class="btn btn-primary" type="button">Button</button>

    </span>

    </div>

</div>

<div class="form-group label-floating">

    <div class="input-group">

        <span class="input-group-addon">$</span>

        <label class="control-label" for="addon3a">Floating label w/2 addons</label>

        <input type="text" id="addon3a" class="form-control">

        <p class="help-block">The label is inside the <code>input-group</code> so that it is positioned properly as a placeholder.</p>

        <span class="input-group-btn">

      <button type="button" class="btn btn-fab btn-fab-mini">

        <i class="material-icons">send</i>

      </button>

    </span>

    </div>

</div>

<div class="form-group label-floating">

    <label class="control-label" for="addon2">Floating label w/right addon</label>

    <div class="input-group">

        <input type="text" id="addon2" class="form-control">

        <span class="input-group-btn">

      <button type="button" class="btn btn-fab btn-fab-mini">

        <i class="material-icons">functions</i>

      </button>

    </span>

    </div>

</div>

<div class="form-group">

    <input type="file" id="inputFile4" multiple="">

    <div class="input-group">

        <input type="text" readonly="" class="form-control" placeholder="Placeholder w/file chooser...">

        <span class="input-group-btn input-group-sm">

        <button type="button" class="btn btn-fab btn-fab-mini">

          <i class="material-icons">attach_file</i>

        </button>

      </span>

    </div>

</div>

<!--表单2-->

<form class="form-horizontal">

    <fieldset>

        <legend>Legend</legend>

        <div class="form-group">

            <label for="inputEmail" class="col-md-2 control-label">Email</label>

            <div class="col-md-10">

                <input type="email" class="form-control" id="inputEmail" placeholder="Email">

            </div>

        </div>

        <div class="form-group">

            <label for="inputPassword" class="col-md-2 control-label">Password</label>

            <div class="col-md-10">

                <input type="password" class="form-control" id="inputPassword" placeholder="Password">

                <!--

                <div class="checkbox">

                  <label>

                    <input type="checkbox"> Checkbox

                  </label>

                  <label>

                    <input type="checkbox" disabled> Disabled Checkbox

                  </label>

                </div>

                <br>

                <div class="togglebutton">

                  <label>

                    <input type="checkbox" checked> Toggle button

                  </label>

                </div>

                -->

            </div>

        </div>

        <div class="form-group" style="margin-top: 0;"> <!-- inline style is just to demo custom css to put checkbox below input above -->

            <div class="col-md-offset-2 col-md-10">

                <div class="checkbox">

                    <label>

                        <input type="checkbox"> Checkbox

                    </label>

                    <label>

                        <input type="checkbox" disabled=""> Disabled Checkbox

                    </label>

                </div>

            </div>

        </div>

        <div class="form-group">

            <div class="col-md-offset-2 col-md-10">

                <div class="togglebutton">

                    <label>

                        <input type="checkbox" checked=""> Toggle button

                    </label>

                </div>

            </div>

        </div>

        <div class="form-group">

            <label for="inputFile" class="col-md-2 control-label">File</label>

            <div class="col-md-10">

                <input type="text" readonly="" class="form-control" placeholder="Browse...">

                <input type="file" id="inputFile" multiple="">

            </div>

        </div>

        <div class="form-group">

            <label for="textArea" class="col-md-2 control-label">Textarea</label>

            <div class="col-md-10">

                <textarea class="form-control" rows="3" id="textArea"></textarea>

                <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

            </div>

        </div>

        <div class="form-group">

            <label class="col-md-2 control-label">Radios</label>

            <div class="col-md-10">

                <div class="radio radio-primary">

                    <label>

                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">

                        Option one is this

                    </label>

                </div>

                <div class="radio radio-primary">

                    <label>

                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">

                        Option two can be something else

                    </label>

                </div>

            </div>

        </div>

        <div class="form-group">

            <label for="select111" class="col-md-2 control-label">Select</label>

            <div class="col-md-10">

                <select id="select111" class="form-control">

                    <option>1</option>

                    <option>2</option>

                    <option>3</option>

                    <option>4</option>

                    <option>5</option>

                </select>

            </div>

        </div>

        <div class="form-group">

            <label for="select222" class="col-md-2 control-label">Select Multiple</label>

            <div class="col-md-10">

                <select id="select222" multiple="" class="form-control">

                    <option>1</option>

                    <option>2</option>

                    <option>3</option>

                    <option>4</option>

                    <option>5</option>

                </select>

            </div>

        </div>

        <div class="form-group">

            <div class="col-md-10 col-md-offset-2">

                <button type="button" class="btn btn-default">Cancel</button>

                <button type="submit" class="btn btn-primary">Submit</button>

            </div>

        </div>

    </fieldset>

</form>

<!--表格-->

<table class="table table-striped table-hover ">

    <thead>

    <tr>

        <th>#</th>

        <th>Column heading</th>

        <th>Column heading</th>

        <th>Column heading</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td>1</td>

        <td>Column content</td>

        <td>Column content</td>

        <td>Column content</td>

    </tr>

    <tr>

        <td>2</td>

        <td>Column content</td>

        <td>Column content</td>

        <td>Column content</td>

    </tr>

    <tr class="info">

        <td>3</td>

        <td>Column content</td>

        <td>Column content</td>

        <td>Column content</td>

    </tr>

    <tr class="success">

        <td>4</td>

        <td>Column content</td>

        <td>Column content</td>

        <td>Column content</td>

    </tr>

    <tr class="danger">

        <td>5</td>

        <td>Column content</td>

        <td>Column content</td>

        <td>Column content</td>

    </tr>

    <tr class="warning">

        <td>6</td>

        <td>Column content</td>

        <td>Column content</td>

        <td>Column content</td>

    </tr>

    <tr class="active">

        <td>7</td>

        <td>Column content</td>

        <td>Column content</td>

        <td>Column content</td>

    </tr>

    </tbody>

</table>

<!--tab切换1-->

<ul class="nav nav-tabs" style="margin-bottom: 15px;">

    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>

    <li><a href="#profile" data-toggle="tab">Profile</a></li>

    <li class="disabled"><a>Disabled</a></li>

    <li class="dropdown">

        <a class="dropdown-toggle" data-toggle="dropdown" href="bootstrap-elements.html" data-target="#">

            Dropdown <span class="caret"></span>

        </a>

        <ul class="dropdown-menu">

            <li><a href="#dropdown1" data-toggle="tab">Action</a></li>

            <li class="divider"></li>

            <li><a href="#dropdown2" data-toggle="tab">Another action</a></li>

        </ul>

    </li>

</ul>

<div id="myTabContent" class="tab-content">

    <div class="tab-pane fade active in" id="home">

        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>

    </div>

    <div class="tab-pane fade" id="profile">

        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>

    </div>

    <div class="tab-pane fade" id="dropdown1">

        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>

    </div>

    <div class="tab-pane fade" id="dropdown2">

        <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>

    </div>

</div>

<!--分页器-->

<ul class="pagination">

    <li class="disabled"><a href="javascript:void(0)">«</a></li>

    <li class="active"><a href="javascript:void(0)">1</a></li>

    <li><a href="javascript:void(0)">2</a></li>

    <li><a href="javascript:void(0)">3</a></li>

    <li><a href="javascript:void(0)">4</a></li>

    <li><a href="javascript:void(0)">5</a></li>

    <li><a href="javascript:void(0)">»</a></li>

</ul>

<!--左右-->

<ul class="pager">

    <li><a class="withripple" href="javascript:void(0)">Previous</a></li>

    <li><a class="withripple" href="javascript:void(0)">Next</a></li>

</ul>

<ul class="pager">

    <li class="previous disabled"><a href="javascript:void(0)">← Older</a></li>

    <li class="next"><a class="withripple" href="javascript:void(0)">Newer →</a></li>

</ul>

<!--点击按钮示意-->

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus

                                                                                                                                                  sagittis lacus vel augue laoreet rutrum faucibus.">Bottom

</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>

<!--警告条-->

<div class="alert alert-dismissible alert-info">

    <button type="button" class="close" data-dismiss="alert">×</button>

    <strong>Heads up!</strong> This

    <a href="javascript:void(0)" class="alert-link">alert needs your attention</a>, but it's not super important.

</div>

<script>

    $.material.init();

</script>

</body>

</html>

　　

bootstrap-material-design-个人总结的更多相关文章

  1. Material Design学习

    前言: 最为一个用习惯了bootstrap的前端小菜,今天偶然听闻material design 这个从未听闻的前端框架,带着好奇开始了新的尝试,并将bootstrap跟material design ...

  2. 超实用！9个目前流行的MATERIAL DESIGN前端框架

    http://www.uisdc.com/material-design-frameworks-top-9 谷歌推出的Material Design风格已见有一些APP UI采用,视觉和交互体验都很棒 ...

  3. Jquery之家5个顶级Material Design框架

    谷歌Material Design在如今的前端页面设计中非常流行.Material Design的设计风格向我们展示了一个简单而有内涵的现代UI设计方案. Material Design是如此的简洁美 ...

  4. Top 15 - Material Design框架和类库(译)

    _Material design_是Google开发的,目的是为了统一公司的web端和手机端的产品风格.它是基于很多的原则,比如像合适的动画,响应式,以及颜色和阴影的使用.完整的指南详情请看这里(ht ...

  5. Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果

    Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...

  6. Material Design Animation

    Material Design Animation Authentic motion 真实的运动 运动以一种优美流动的形式描述了空间关系,功能和目的. Mass and weight: 质量和重量 在 ...

  7. Material Design 概念,环境和基本属性

    Material Design 概念,环境和基本属性 Material Design是随Android 5.0推出的一种设计概念, 涉及到了跨平台和设备的视觉,动态,交互设计等方面.   设计概念 M ...

  8. Android Material Design 兼容库的使用

    Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...

  9. Material Design学习笔记

    Wiki->移动开发->Android->Material Design-原质化设计 (友情链接:http://wiki.jikexueyuan.com/project/materi ...

  10. ANDROID L——Material Design详解（UI控件）

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

随机推荐

  1. Greenplum查询计划分析

    这里对查询计划的学习主要是对TPC-H中Query2的分析. 1.Query的查询语句 select s_acctbal, s_name, n_name, p_partkey, p_mfgr, s_a ...

  2. Asp.net中static变量和viewstate的使用方法(谨慎)

    在.Net平台下进行CS软件开发时,我们经常遇到以后还要用到某些变量上次修改后的值,为了简单起见,很多人都习惯用static来定义这些变量,我也是.这样非常方便,下一次调用某个函数时该变量仍然保存的是 ...

  3. xsl: normalize-space(string str) 函数

    本文出自http://technet.microsoft.com/zh-cn/magazine/ms256063%28VS.90%29.aspx 通过去掉前导和尾随空白并使用单个空格替换一系列空白字符 ...

  4. 【C++设计模式】单件类与DCLP(Double Check Lock Pattern)的风险

    [单件类] 保证只能有一个实例化对象,并提供全局的访问入口. [设计注意事项] 1.阻止所有实例化的方法: private 修饰构造函数,赋值构造函数,赋值拷贝函数. 2.定义单实例化对象的方法: a ...

  5. win10家庭版在线升级到win10专业版

    首先在win10自带的搜索框中输入"控制面板",在搜索结果的界面中单击"控制面板",进入控制面板界面. 在控制面板中点击"系统和安全",进入 ...

  6. 管理Scope和Lifetime

    Nick Blumhardt’s Autofac lifetime primer 是一个学习Autofac Scope和Lifetime的好地方.这里有很多未理解的,混淆的概念,因此我们将尝试在这里完 ...

  7. java与javac命令的功用

    一.javac用来编译java程序,比如说我写了一个Server.java文件,首先通过命令行进入.java文件所在的路径, 然后通过输入 javac Server.java 命令行来完成编译,编译之 ...

  8. Thinkphp的初级注意点

    开头话: 网站,说实话,是第一次做,也就直接选择了ThinkPHP这个开源框架.选择这个框架的原因...已经不记得了 貌似在我当时的认知中只有这个了,其它更优秀的框架也是这个毕业设计做到后期再去了解的 ...

  9. C# DataTable的Select()方法不支持 != 判断

    异常描述: 用户代码未处理 System.Data.SyntaxErrorException HResult=-2146232032 Message=无法解释位置 23 的标记“!”. Source= ...

  10. jQueryUI Draggable 和 Droppable 配合使用时遇到的两个坑

    jQueryUI 的 拖拽插件极大的方便了开发者对拖拽功能的实现,但是官方教程给的太笼统,在具体实现的时候很多地方不明确,这里说一下我遇到的两个 "小坑": 1:Draggable ...