17、bootStrap组件

1、bootStrap组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

2、字体图标

①不要和其他图标混合使用

②只能对内容为空的元素起作用

3、下拉菜单

    <div class="dropdown">

         <button class="btn btn-default dropdown-toggle"

                 type="button"

                 data-toggle="dropdown">

             DropDown

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

         </button>

         <ul class="dropdown-menu">

             <li class="dropdown-header">健身</li>

             <li><a href="#">哑铃</a></li>

             <li><a href="#">仰卧起坐</a></li>

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

             <li class="dropdown-header">跑步</li>

             <li><a href="#">半马</a></li>

             <li class="disabled"><a href="#">全马</a></li>

             <li><a href="#">5km</a></li>

             <li><a href="#">10km</a></li>

         </ul>

4、按钮组

 <div class="container">

     <div class="btn-toolbar">

         <div class="btn-group btn-group-vertical" role="group">

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

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

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

         </div>

         <div class="btn-group btn-group" role="group">

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

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

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

         </div>

     </div>

     <hr/>

     <div class="btn-group btn-group-lg" role="group">

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

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

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

     </div>

     <br/>

     <br/>

     <div class="btn-group btn-group-sm" role="group">

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

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

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

     </div>

     <br/>

     <br/>

     <div class="btn-group btn-group-xs" role="group">

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

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

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

     </div>

 </div>

 <div class="btn-group btn-group-justified" role="group" aria-label="...">

     <div class="btn-group" role="group">

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

     </div>

     <div class="btn-group" role="group">

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

     </div>

     <div class="btn-group" role="group">

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

     </div>

 </div>

5、下拉式按钮菜单

 ddiv class="btn-group">

     <!-- Single button -->

     <div class="btn-group">

         <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">

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

         </button>

         <ul class="dropdown-menu">

             <li> <a href="#">1</a></li>

             <li> <a href="#">2</a></li>

             <li> <a href="#">3</a></li>

             <!--<li role="separator"class="divider"></li>-->

             <li> <a href="#">4</a></li>

         </ul>

     </div>

     <!-- Single button -->

     <div class="btn-group">

         <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">

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

         </button>

         <ul class="dropdown-menu">

             <li> <a href="#">1</a></li>

             <li> <a href="#">2</a></li>

             <li> <a href="#">3</a></li>

             <li> <a href="#">4</a></li>

         </ul>

     </div>

     <!-- Single button -->

     <div class="btn-group">

         <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">

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

         </button>

         <ul class="dropdown-menu">

             <li> <a href="#">1</a></li>

             <li> <a href="#">2</a></li>

             <li> <a href="#">3</a></li>

             <li> <a href="#">4</a></li>

         </ul>

     </div>

     <!-- Single button -->

     <div class="btn-group">

         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

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

         </button>

         <ul class="dropdown-menu">

             <li> <a href="#">1</a></li>

             <li> <a href="#">2</a></li>

             <li> <a href="#">3</a></li>

             <li> <a href="#">4</a></li>

         </ul>

     </div>

 </div>

给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。

6、输入框组

为 .input-group 赋予.input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。

<div class="input-group">

    <input type="text" class="form-control" placeholder="kunyashaw">

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

    <input type="text" class="form-control" placeholder="tedu.cn">

</div>

<div class="input-group">

    <span class="input-group-addon">htt://</span>

    <input type="text" class="form-control" placeholder="kunyashaw">

    <span class="input-group-addon">@tedu.cn</span>

</div>

7、导航

 <ul class="nav nav-tabs">

     <li role="presentation" class="active"><a href="#">home</a></li>

     <li role="presentation"><a href="http://www.baidu.com">bai du</a></li>

     <li role="presentation"><a href="http://www.qq.com">qq</a></li>

 </ul>

 <br>

 <br>

 <br>

 <ul class="nav nav-pills">

     <li role="presentation"><a href="#">home</a></li>

     <li role="presentation" class="active"><a href="http://www.baidu.com">bai du</a></li>

     <li role="presentation"><a href="http://www.qq.com">qq</a></li>

 </ul>

 <br>

 <hr>

 <ul class="nav nav-pills nav-stacked">

     <li role="presentation"><a href="#">home</a></li>

     <li role="presentation " class="disabled"><a href="http://www.baidu.com">bai du</a></li>

     <li role="presentation" class="active"><a href="http://www.qq.com">qq</a></li>

 </ul>

 <hr>

 <br>

 <ul class="nav nav-pills ">

     <li role="presentation"><a href="#">home</a></li>

     <li role="presentation " class="active"><a href="http://www.baidu.com">bai du</a></li>

     <li role="presentation" class="dropdown">

         <a class="dropdown dropdown-toggle" data-toggle="dropdown">

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

         </a>

         <ul class="dropdown-menu">

             <li >1</li>

             <li >2</li>

             <li >3</li>

         </ul>

     </li>

 </ul>

8、导航条

 <div class="container">

     <ui class="nav navbar-nav">

         <li role=" presentation" class="active"><a href="#">hello</a></li>

         <li role="presentation"><a href="#">world</a></li>

         <li role="presentation"><a href="#">automan</a></li>

         <li role="presentation" class="dropdown ">

             <a type="button" class="dropdown dropdown-toggle" data-toggle="dropdown">

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

             </a>

             <ul class="dropdown-menu">

                 <li>hello</li>

                 <li>hello</li>

                 <li>hello</li>

             </ul>

         </li>

     </ui>

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

         <div class="form-group">

             <input class="form-control" placeholder="search">

         </div>

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

     </form>

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

         <li role="presentation"><a href="#">normalLi</a></li>

         <li role="presentation" class="dropdown ">

             <a type="button" class="dropdown dropdown-toggle" data-toggle="dropdown">

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

             </a>

             <ul class="dropdown-menu">

                 <li>hello</li>

                 <li>hello</li>

                 <li>hello</li>

             </ul>

         </li>

     </ui>

 </div>

通过添加 .navbar-inverse 类可以改变导航条的外观

.navbar-fixed-top 类可以让导航条固定在顶部，

.navbar-fixed-bottom 类可以让导航条固定在底部，

使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置。

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

  <div class="form-group">

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

  </div>

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

</form>

9、面包屑导航

<ol class="breadcrumb">

    <li><a href="#">Home</a></li>

    <li><a href="#">Library</a></li>

    <li class="active">Data</li>

</ol>

10、分页

 <nav>

     <ul class="pagination pagination-lg">

         <li class="disabled"><a href="#"><span>&laquo</span></a></li>

         <li><a href="#">1</a></li>

         <li><a href="#">2</a></li>

         <li><a href="#">3</a></li>

         <li><a href="#">4</a></li>

         <li><a href="#">5</a></li>

         <li><a href="#"><span>&raquo</span></a></li>

     </ul>

     <br/>

     <br/>

     <br/>

     <ul class="pagination pagination-sm">

         <li class="disabled"><a href="#"><span>&laquo</span></a></li>

         <li><a href="#">1</a></li>

         <li><a href="#">2</a></li>

         <li><a href="#">3</a></li>

         <li><a href="#">4</a></li>

         <li><a href="#">5</a></li>

         <li><a href="#"><span>&raquo</span></a></li>

     </ul>

 </nav>

 <nav>

     <ul class="pager">

         <li><a href="#">Previous</a></li>

         <li><a href="#">Next</a></li>

     </ul>

 </nav>

11、标签、徽章

 <div class="container">

     <!--标签-->

     <h1>鱼香肉丝<span class="label label-default">Hot</span></h1>

     <h2>宫保鸡丁<span class="label label-success">Spicy</span></h2>

     <h3>肉夹馍<span class="label label-warning">Hot</span></h3>

     <h3>肉夹馍<span class="label label-danger">Hot</span></h3>

     <!--徽章-->

     <a href="#"> baidu <span class="badge">New</span></a>

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

         Messages

         <span class="badge">4</span>

     </button>

     <!-- 胶囊导航-->

     <ui class="nav nav-pills" role="tablist">

         <li role="presentation" class="active"><a href="#">Home<span class="badge">42</span></a></li>

         <li role="presentation"><a href="#">Profile</a></li>

         <li role="presentation"><a href="#">Messages<span class="badge">3</span></a></li>

     </ui>

 </div>

12、巨幕

 <!---index.html---->

 <div class=" container" >

     <div class="jumbotron jumubg" >

         <h1> hell world </h1>

         <p>

             This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured

             content or information.

             Learn more

         </p>

         <button class="btn btn-primary" type="button">Learn More<a href="#"></a></button>

     </div>

 </div>

 <!--demo.css---->

 .jumubg {

     background: url("zzl.jpg");

     width: 1000px;

     height: 600px;

 }

13、页头

 <div class=" container" >

     <!--页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。-->

     <!--它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）-->

     <div class="page-header">

         <h1>Example page header <small>Subtext for header</small></h1>

     </div>

 </div>

14、缩略图

 <div class="container">

     <div class="row">

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

             <div class="thumbnail">

                 <img src="zzl.jpg" width="100px" height="200px">

                 <div class="caption">

                     <h3>Label</h3>

                     <p>

                         Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                     </p>

                     <button type="button" role="button" class="btn btn-primary">ok</button>

                     <button type="button" role="button" class="btn btn-danger">cancel</button>

                 </div>

             </div>

         </div>

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

             <div class="thumbnail">

                 <img src="zzl.jpg" width="100px" height="200"px>

                 <div class="caption">

                     <h3>Label</h3>

                     <p>

                         Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at

                         eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                     </p>

                     <button type="button" role="button" class="btn btn-primary">ok</button>

                     <button type="button" role="button" class="btn btn-default">cancel</button>

                 </div>

             </div>

         </div>

     </div>

 </div>

15、警告框

可以设置警告框可以点击：

务必给 <button> 元素添加 data-dismiss="alert" 属性

可以在警告框中设置链接：

用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色。

 <div class="container">

     <div class="alert alert-success">success</div>

     <div class="alert alert-info">information</div>

     <div class="alert alert-warning">warning plz contact:

         <a href="wss.jpg" class="alert-link">

             wss

         </a>

     </div>

     <div class="alert alert-danger alert-dismissable" role="alert">

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

             <span>&times;</span>

         </button>

         Danger

     </div>

 </div>

16、进度条

 <div class="container">

     <div class="progress">

         <div class="progress-bar" role="progressbar" style="width: 40%">

             <span>40%</span>

         </div>

     </div>

     <div class="progress">

         <div class="progress-bar" role="progressbar" style="width: 100%">

             <span>100%</span>

         </div>

     </div>

     <p>设置最小宽度为5em min-width: 5em"</p>

     <div class="progress">

         <div class="progress-bar" role="progressbar" style="width: 1%;min-width: 5em">

             <span>1%</span>

         </div>

     </div>

     <div class="progress">

         <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%;">

             <span>20%</span>

         </div>

     </div>

     <div class="progress">

         <div class="progress-bar progress-bar-info" role="progressbar" style="width:40%;">

             <span>40%</span>

         </div>

     </div>

     <div class="progress">

         <div class="progress-bar progress-bar-warning" role="progressbar" style="width:80%;">

             <span>80%</span>

         </div>

     </div>

     <div class="progress">

         <div class="progress-bar progress-bar-success" role="progressbar" style="width:100%;">

             <span>100%</span>

         </div>

     </div>

     <p>

         通过渐变( progress-bar-striped)可以为进度条创建条纹效果，IE9 及更低版本不支持。

     </p>

     <div class="progress">

         <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" style="width:80%;">

             <span>80%</span>

         </div>

     </div>

     <p>

         为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。-->

     </p>

     <div class="progress">

         <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="width:80%;">

             <span>80%</span>

         </div>

     </div>

 </div>

17、媒体对象

 <div class="container">

     <div class="media">

         <div class="media-left media-middle">

             <img src="wss.jpg" class="img-rounded" width="50" height="80">

         </div>

         <div class="media-body">

             <div class="media-heading">

                 <h1>sport</h1>

             </div>

             <div class="media-right">

                 <p>

                     hello worlCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin

                     commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.d

                     hello worlCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin

                 </p>

             </div>

         </div>

     </div>

     <div class="media">

         <div class="media-body">

             <div class="media-heading">

                 <h1>Sport Utlitied Vehicle</h1>

                 <div class="media-left">

                     <p>

                         hello worlCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante

                         sollicitudin

                         commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.d

                         commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.d

                     </p>

                 </div>

             </div>

         </div>

         <div class="media-right media-middle">

             <img src="zzl.jpg" class="img-rounded" width="50" height="80">

         </div>

     </div>

 </div>

19、列表组

 <div class="container">

     <ui class="list-group">

         <li class="list-group-item"> hello</li>

         <li class="list-group-item"> hello</li>

     </ui>

     <br>

     <br>

     <!-- 徽章组合

     <li class="list-group-item active">

          hel1qasdlo <span class="badge">12</span>

      </li>-->

     <ui class="list-group">

         <li class="list-group-item active">

             hel1qasdlo <span class="badge">12</span>

         </li>

         <li class="list-group-item">

             hzadsfkadsjf <span class="badge">100</span>

         </li>

     </ui>

     <br>

     <br>

     <!-- 超链接组合 <a class="list-group-item active" href="#" >kkk</a>-->

     <ui class="list-group">

         <a class="list-group-item " href="#">baidu</a>

         <a class="list-group-item " href="#">google</a>

     </ui>

     <br>

     <br>

     <div class="list-group">

         <button role="button" class=" list-group-item list-group-item-danger">hello1</button>

         <button role="button" class=" list-group-item list-group-item-success">hello2</button>

         <!-- 为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色，表现出被禁用的效果-->

         <button role="button" class=" list-group-item disabled">hello3</button>

     </div>

     <div class="list-group">

         <a href="#" class="list-group-item">

             <h4 class="list-group-item-heading">List group item heading</h4>

             <p class="list-group-item-text">   为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色，表现出被禁用的效果</p>

         </a>

         <a href="#" class="list-group-item">

             <h4 class="list-group-item-heading">List group item heading</h4>

             <p class="list-group-item-text">   为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色，表现出被禁用的效果</p>

         </a>

     </div>

 </div>

20、面板

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。

把按钮或次要的文本放入 .panel-footer 容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。

像其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版。

 <div class="container">

     <div class="panel">

         hello world

     </div>

     <br>

     <br>

     <div class="panel panel-primary">

         <div class="panel-heading">

             Panel Without a head

         </div>

         <div class="panel-body">

             I am Panel Body

         </div>

     </div>

     <br>

     <br>

     <div class="panel panel-warning">

         <div class="panel-heading">

             <h1 class="panel-title">

                 Panel With a head

             </h1>

         </div>

         <div class="panel-body">

             I am Panel Body

         </div>

     </div>

     <br>

     <br>

     <div class="panel panel-success">

         <div class="panel-body">

             I am Panel Body

         </div>

         <div class="panel-footer">

             <h1 class="panel-title">

                 Panel With a footer

             </h1>

         </div>

     </div>

 </div>

表格

 <!--制作一个带表格的面板-->

 <div class="panel panel-info">

     <br>

     <br>

     <div class="panel-heading">

         <h1 class="panel-title">

             2016年3月最新消息

         </h1>

     </div>

     <div class="panel-body">

         <p>恭喜企业新三板上市，并成功拿下100000亿融资，开创史上最高融资记录，下表为具体数据</p>

     </div>

     <table class="table table-bordered">

         <thead>

         <td>name</td>

         <td>age</td>

         <td>province</td>

         </thead>

         <tr>

             <td>18</td>

             <td>kunyashaw</td>

             <td>Mars</td>

         </tr>

         <tr>

             <td>20</td>

             <td>wss</td>

             <td>China</td>

         </tr>

         <tr>

             <td>10</td>

             <td>wzs</td>

             <td>Julpiter</td>

         </tr>

     </table>

     <br>

     <br>

     <div class="panel-heading">

         <h1 class="panel-title">

             2016年3月最新消息

         </h1>

     </div>

     <table class="table table-bordered">

         <thead>

         <td>name</td>

         <td>age</td>

         <td>province</td>

         </thead>

         <tr>

             <td>18</td>

             <td>kunyashaw</td>

             <td>Mars</td>

         </tr>

         <tr>

             <td>20</td>

             <td>wss</td>

             <td>China</td>

         </tr>

         <tr>

             <td>10</td>

             <td>wzs</td>

             <td>Julpiter</td>

         </tr>

     </table>

 </div>

 <--带面板的列表-->

 <div class="container">

     <div class="panel panel-warning">

         <div class="panel-heading">

             <h1>

                 特卖会，请注意

             </h1>

         </div>

         <div class="panel-body">

             <strong>特卖产品列表请见下表：</strong>

         </div>

         <ul class="list-group">

             <li class="list-group-item">男士外套</li>

             <li class="list-group-item">女士手套</li>

             <li class="list-group-item">儿童棉衣</li>

         </ul>

     </div>

 </div>

21、Well

 <div class="container">

     <!-- 把 Well 用在元素上，能有嵌入（inset）的的简单效果。-->

     <br>

     <br>

     <div class="well well-lg">

         Look, I'm in a well

     </div>

     <br>

     <br>

     <div class="well well">

         Look, I'm in a well

     </div>

     <br>

     <br>

     <div class="well well-sm">

         Look, I'm in a well

     </div>

 </div>

17、bootStrap组件的更多相关文章

Bootstrap组件
1.Bootstrap组件——Glyphicons图标字体图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
bootstrap学习笔记--bootstrap组件
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...
bootstrap 组件
bootstrap 组件 1下拉菜单(dropdown) 下拉菜单切换(dropdown-toggle) 下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...
ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
阅读目录 Bootstrap 导航条列表组徽章媒体对象页头路径导航分页输入框组按钮式下拉菜单警告框进度条小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...
bootstrap组件 2
bootstrap组件2 <!DOCTYPE html> <html lang="zh-cn"> <head > <meta charse ...
bootstrap组件学习
转自http://v3.bootcss.com/components/ bootstrap组件学习矢量图标的用法<span class="glyphicon glyphicon-se ...
UIBootatrap:是由AngularJS UI团队编写的纯AngularJS实现的Bootstrap组件
本文为翻译文档.原文是https://angular-ui.github.io/bootstrap/(需要FQ). 准备工作: 依赖关系:这个库中包含一组基于Bootstrap组件和CSS的原生Ang ...
Angular -ui - BootStrap组件的解释以及使用
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

随机推荐

C盘压缩，电脑无法正常启动的解决方法？
有时候,我们觉得电脑很卡,因此压缩磁盘来节约资源,前段时间,由于不小心将C盘压缩了,导致电脑无法正常启动,查了一些有关的资料,发现很多人都遇到过类似的问题,如果你不想重装系统的话,那么,现在我说一下我 ...
NO.003-2018.02.08《江城子·乙卯正月二十日夜记梦》宋代：苏轼
江城子·乙卯正月二十日夜记梦_古诗文网江城子·乙卯正月二十日夜记梦乙卯:公元1075年,即北宋熙宁八年. 宋代:苏轼十年生死两茫茫,不思量,自难忘.千里孤坟,无处话凄凉.纵使相逢应不识,尘满面, ...
MPMoviePlayerViewController和MPMoviePlayerController的使用
ios播放视频文件一般使用 MPMoviePlayerViewController 和 MPMoviePlayerController.前者是一个view,后者是个Controller.差别就是MPM ...
Zabbix3.0部署实践
Zabbix3.0部署实践 Zabbix3整个web界面做了一个全新的设计. 1.1Zabbix环境准备 [root@linux-node1 ~]# cat /etc/redhat-release ...
Centos 5.5 编译安装mysql 5.5.9
下载mysql wget http://mysql.mirrors.pair.com/Downloads/MySQL-5.5/mysql-5.5.9.tar.gz 创建mysql用户 [root@x ...
继承FileInputFormat类来理解 FileInputFormat类
import java.io.IOException; import java.util.ArrayList; import java.util.List; import org.apache.had ...
linux数据库copy方法
相信大多数程序员都会遇到数据库copy的问题,下面就总结几种常见的方法,针对有mysql基础的同学参考方法一:利用sqlyog的copy database的功能,如图这种最简单,速度比较慢: 方法 ...
django+xadmin在线教育平台（九）
django admin介绍上一章我们进行了需求分析和数据库设计.本章我们来快速搭建一个可用的后台管理系统. 后台管理系统特点: 权限管理少前端样式.(样式一般不是很看重), 快速开发 djang ...
python3 井字棋 GUI - 人机对战、机器对战（threading、tkinter库）
python3 井字棋 GUI - 人机对战.机器对战功能 GUI界面人机对战(可选择机器先走) 机器对战(50局) 流程图内核棋盘 [0][1][2] [3][4][5] [6][7][8] ...
C#基础-委托与事件
委托 delegate是申明委托的关键字返回类型都是相同的,并且参数类型个数都相同委托声明 delegate double DelOperater(double num1, double num2 ...

17、bootStrap组件

17、bootStrap组件的更多相关文章

随机推荐

热门专题