bootstrap-material-design-个人总结

Posted 郑福坤

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap-material-design-个人总结相关的知识，希望对你有一定的参考价值。

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-个人总结的主要内容，如果未能解决你的问题，请参考以下文章

Rails - @import 和 *= 要求之间的区别？