1. Home
  2. Programming-網頁語法-Bootstrap
    3. [BS] Hello, World!

[BS] Hello, World!

3月 09, 2016
我要留言
作者：

01／第一支舞
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>Title of the document</title>
<link rel="stylesheet" href="bootstrap-3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css" />
<script src="jquery/jquery-2.2.0.min.js"></script>
<script src="bootstrap-3.3.6/js/bootstrap.min.js"></script>
<!-- 1. jQuery：Bootstrap 核心 JavaScript 文件 -->
<!-- (download) https://jquery.com/download/ -->
<!-- 2. Bootstrap：是非常強大的網頁前端套件，為 RWD 網頁設計的實現帶來許多方便 -->
<!-- (download) http://getbootstrap.com/getting-started/#download -->
<!-- 3. Font Awesome：是一套完美的圖標字體，主要目的是和 Bootstrap 搭配使用 -->
<!-- (download) https://fortawesome.github.io/Font-Awesome/ -->
</head>
<body>
<!-- (HTML5 Introduction) http://www.w3schools.com/html/html5_intro.asp-->
<!-- (Bootstrap 3 Tutorial) http://www.w3schools.com/bootstrap/ -->
<div class="container">
  <div class="jumbotron">
    <h1>Hello, World!</h1>
    <p>Hello, World!</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3><i class="fa fa-shopping-basket"></i> ← 這是外掛 Font Awesome 產生的圖標字體</h3>
      <p>Hello, World!</p>
      <p>Hello, World!</p>
    </div>
    <div class="col-sm-4">
      <h3><span class="glyphicon glyphicon-search" aria-hidden="true"></span> ← 這是 Bootstrap 本身提供的圖標字體</h3>
      <p>Hello, World!</p>
      <p>Hello, World!</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>Hello, World!</p>
      <p>Hello, World!</p>
    </div>
  </div>
</div>
</body>
</html>
02／檔案上傳
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- bootstrap -->
<link rel="stylesheet" href="3.3.5/bootstrap.min.css" />
<script src="2.1.4/jquery.min.js"></script>
<script src="3.3.5/bootstrap.min.js"></script>
<!-- fileinput -->
<link rel="stylesheet" href="fileinput.css">
<script src="fileinput.js"></script>
<script src="fileinput_locale_zh-TW.js"></script>
</head>
<body>
<form enctype="multipart/form-data">
  <input id="file-1" name="file-1" type="file">
  <script>
  $('#file-1').fileinput({
    language             : 'zh-TW',                         // 設置語言
    allowedFileExtensions: ['xlsx', 'xls'],                 // 接收的文件格式
    maxFileSize          : 5120,                            // 接收的文件大小
    maxFileCount         : 1,                               // 接收的文件個數
    showUpload           : false,                           // 是否顯示上傳按鈕
    showRemove           : false,                           // 是否顯示移除按鈕
    showCaption          : false,                           // 是否顯示標題
    uploadUrl            : 'upload.php',                    // 上傳的地址
    uploadAsync          : false,
    overwriteInitial     : false
  }).on("filebatchselected", function(event, files) {       // 自動上傳
    $("#file-1").fileinput("upload");
  });

  // 導入文件上傳完成之後的事件
  $('#file-1').on("fileuploaded", function (event, data, previewId, index) {
      // do something...
  });
  </script>
</form>
</body>
</html>
03／刪除某一列
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- bootstrap -->
<link rel="stylesheet" href="3.3.5/bootstrap.min.css" />
<script src="2.1.4/jquery.min.js"></script>
<script src="3.3.5/bootstrap.min.js"></script>
<!-- dialog -->
<link rel="stylesheet" href="bootstrap_dialog.css" />
<script src="bootstrap_dialog.min.js"></script>
<script>
$(document).ready(function()
{
  $('.confirm-delete').on('click', function(e) {
    e.preventDefault();

    //content
    var title = $(this).data('title');
    $('#myModal .modal-body p').html("確定要刪除「 " + '<b>' + title +'</b>' + '」嗎 ?');

    //open
    var id = $(this).data('id');
    $('#myModal').data('id', id).modal('show');
  });

  $('#btnYes').click(function() {
    // handle deletion here
    var id = $('#myModal').data('id');
    $('[data-id='+id+']').parents('tr').remove();
    $('#myModal').modal('hide');  
  });

});
</script>
<style>
th, td {
  border :1px solid #ccc;
  padding:5px;
}
</style>
</head>
<body>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">系統訊息</h4>
      </div>
      <div class="modal-body">
        <p></p>
      </div><!--/modal-body-->
      <div class="modal-footer">
        <button class="btn btn-primary btn-lg" data-dismiss="modal" aria-hidden="true">取消</button>
        <button data-dismiss="modal" class="btn btn-danger btn-lg" id="btnYes">刪除</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<table>
  <thead>
    <tr>
      <th class="hidden-phone">名字</th>
      <th>刪除</th>
    </tr>
  </thead>
  <tbody>
    <tr>             
      <td class="hidden-phone">John</td>
      <td><a href="#" class="confirm-delete btn mini red-stripe" role="button" data-title="John" data-id="1">Delete</a></td>
    </tr>
    <tr>                      
      <td class="hidden-phone">Mary</td>
      <td><a href="#" class="confirm-delete btn mini red-stripe" role="button" data-title="Mary" data-id="2">Delete</a></td>
    </tr>
  </tbody>
</table>
</body>
</html>
04／Tooltip
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<!-- bootstrap -->
<link rel="stylesheet" href="3.3.5/bootstrap.min.css" />
<script src="2.1.4/jquery.min.js"></script>
<script src="3.3.5/bootstrap.min.js"></script>
<style>
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#f00; }
</style>
<script>
$(document).ready(function(){
    $("a").tooltip();
});
</script>
</head>
<body>
<a href="#" data-toggle="tooltip" data-placement="bottom"
    title="" data-original-title="Tooltip on bottom"
    class="red-tooltip">Tooltip on bottom</a>
</body>
</html>
05／dataTable
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Title of the document</title>
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="bootstrap/3.3.5/css/bootstrap.min.css" />
<!-- Select -->
<link rel="stylesheet" href="plugins/select/select.bootstrap.css" />
<!-- DataTables -->
<link rel="stylesheet" href="plugins/datatables/css/dataTables.bootstrap.css">
</head>
<body>
<!-- Start doc -->
<section class="content">
    <div class="row">
        <section class="col-lg-12">
            <!-- Start SQL -->
            <table id="datatable" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Rendering engine</th>
                    <th>Browser</th>
                    <th>Platform(s)</th>
                    <th>Engine version</th>
                    <th>CSS grade</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Trident</td>
                    <td>Internet
                      Explorer 4.0</td>
                    <td>Win 95+</td>
                    <td> 4</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>Internet
                      Explorer 5.0</td>
                    <td>Win 95+</td>
                    <td>5</td>
                    <td>C</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>Internet
                      Explorer 5.5</td>
                    <td>Win 95+</td>
                    <td>5.5</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>Internet
                      Explorer 6</td>
                    <td>Win 98+</td>
                    <td>6</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 7</td>
                    <td>Win XP SP2+</td>
                    <td>7</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>AOL browser (AOL desktop)</td>
                    <td>Win XP</td>
                    <td>6</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Firefox 1.0</td>
                    <td>Win 98+ / OSX.2+</td>
                    <td>1.7</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Firefox 1.5</td>
                    <td>Win 98+ / OSX.2+</td>
                    <td>1.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Firefox 2.0</td>
                    <td>Win 98+ / OSX.2+</td>
                    <td>1.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Firefox 3.0</td>
                    <td>Win 2k+ / OSX.3+</td>
                    <td>1.9</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Camino 1.0</td>
                    <td>OSX.2+</td>
                    <td>1.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Camino 1.5</td>
                    <td>OSX.3+</td>
                    <td>1.8</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Gecko</td>
                    <td>Netscape 7.2</td>
                    <td>Win 95+ / Mac OS 8.6-9.2</td>
                    <td>1.7</td>
                    <td>A</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Rendering engine</th>
                    <th>Browser</th>
                    <th>Platform(s)</th>
                    <th>Engine version</th>
                    <th>CSS grade</th>
                </tr>
            </tfoot>
            </table>
            <!-- End SQL -->
        </section><!-- /.col -->
  </div><!-- /.row -->
</section><!-- /.content-->
<!-- End doc -->

<!-- jQuery 2.1.4 -->
<script src="jquery/2.1.4/jquery.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Select -->
<script src="plugins/select/select.bootstrap.js"></script>
<!-- DataTables -->
<script src="plugins/datatables/js/jquery.dataTables.js"></script>
<script src="plugins/datatables/js/dataTables.bootstrap.min.js"></script>
<!-- Page script -->
<script>
$(document).ready(function() {
    ////////////////////////////////////////////////////////////
    // (1)基本啟用
    $('#datatable').DataTable();

    ////////////////////////////////////////////////////////////
    // (2)關閉不想用到的附加功能
    // $('#datatable').DataTable({
    //     "paging"      : false,  // 關閉(左上角)每頁顯示列數下拉選單+(右下角)分頁
    //     "searching"   : false,  // 關閉(右上角)表格內關鍵字搜尋
    //     "info"        : false,  // 關閉(左下角)筆數資訊顯示  
    //     "ordering"    : false   // 關閉欄位排序  
    // });

    ////////////////////////////////////////////////////////////
    // (3)中文化
    // $('#datatable').dataTable({
    //     // <常用>預設資料不排序
    //     "aaSorting"     : [],   
    //     // 中文化
    //     "oLanguage"     : {
    //         // (左上角)選擇1頁要印幾筆
    //         "sLengthMenu"  : "每頁顯示： _MENU_",
    //         // (右上角)表格內關鍵字查詢
    //         "sSearch"      : "關鍵字搜尋：",
    //         // (左下角)顯示筆數資訊
    //         "sInfo"        : "第 _START_ 至 _END_ 筆，共 _TOTAL_ 筆",
    //         // (右下角)分頁
    //         "oPaginate"    : {"sFirst": "第一頁","sNext": "下一頁","sPrevious": "上一頁","sLast": "最末頁" },
    //         // 查無資料
    //         "sInfoEmpty"   : "第 0 至 0 筆，共 0 筆",
    //         "sZeroRecords" : "無符合條件之資料",
    //         "sEmptyTable"  : "無符合條件之資料",
    //         "sInfoFiltered": ""
    //     }  
    // });

    ////////////////////////////////////////////////////////////
    // (4)自訂「(左上角)每頁顯示列數下拉選單」的樣式
    // $(document).ready(function() {
    //     var menu = '每頁顯示：'
    //         +'<select class="selectpicker" data-live-search="false">'
    //         +'<option value="50"> - 請選擇 - </option>'
    //         +'<option value="10">10</option>'
    //         +'<option value="20">20</option>'
    //         +'<option value="30">30</option>'
    //         +'<option value="-1">全部</option>'
    //         +'</select>'

    //     $('#datatable').dataTable({ 
    //         "oLanguage"     : {
    //             // (左上角)選擇1頁要印幾筆
    //             "sLengthMenu": menu
    //         }  
    //     });
    // });  

    ////////////////////////////////////////////////////////////
    // (5)關閉(左上角)每頁顯示列數下拉選單，但要保留(右下角)分頁
    // $(document).ready(function() {
    //     $('#datatable').dataTable({
    //         // 用來控制是否要在表格左上角顯示一個可以更改每頁顯示列數的下拉式選單
    //         "bLengthChange" : false ,
    //         "iDisplayLength": 6
    //     });
    // }); 

    ////////////////////////////////////////////////////////////
    // (6)如果不滿意左上角 10, 25, 50, 100 預設選單的話, 可以用 aLengthMenu 選項來更改
    // $(document).ready(function() {
    //     $('#datatable').dataTable({
    //         "aLengthMenu":[[5, 30, 60, -1], [5, 30, 60,"顯示全部"]] 
    //     });
    // });   

});   
</script>
</body>
</html>
06／Form
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Title of the document</title>
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="bootstrap/3.3.5/css/bootstrap.min.css" />
<!-- Select -->
<link rel="stylesheet" href="plugins/select/select.bootstrap.css" />
</head>
<body>
<!-- Start doc -->
<section class="content">
  <div class="row">
    <section class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-heading">表單輸入</div>
        <div class="panel-body">

<!-- form start -->
        <form class="form-horizontal">
<!-- 單行輸入 text -->        
          <div class="form-group">
            <label class="col-sm-2 control-label">單行輸入 text</label>
            <div class="col-sm-10">
              <input class="form-control" type="text" placeholder="請輸入" />
              <span class="help-block">我是小字HELP</span>
            </div>
          </div>

<!-- 多行輸入 textarea -->
          <div class="form-group">
            <label class="col-sm-2 control-label">多行輸入 textarea</label>
            <div class="col-sm-10">
              <textarea class="form-control" rows="5" placeholder="請輸入"></textarea>
            </div>
          </div>

<!-- 單選 radio (換行) -->
          <div class="form-group">
            <label class="col-sm-2 control-label">單選 radio</label>
            <div class="col-sm-10">
              <div class="radio">
                <label>
                <input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio" />選項 1</label>
              </div>
              <div class="radio">
                <label>
                <input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio" />選項 2</label>
              </div>
              <div class="radio">
                <label>
                <input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio" />選項 3</label>
              </div>
            </div>
          </div>

<!-- 單選 radio (同一行) -->
          <div class="form-group">
            <label class="col-sm-2 control-label">單選 radio</label>
            <div class="col-sm-10">
              <label class="radio-inline">
                <input type="radio" value="option1" />選項 1</label>
              <label class="radio-inline">
                <input type="radio" value="option1" />選項 2</label>
              <label class="radio-inline">
                <input type="radio" value="option1" />選項 3</label>
            </div>
          </div>

<!-- 單選 radio (特殊) -->
          <div class="form-group">
            <label class="col-sm-2 control-label">單選 radio</label>
            <div class="col-sm-10">
              <div class="btn-group btn-group-justified" data-toggle="buttons">
                <label class="radio-inline btn btn-default btn-md">
                  <input type="radio" value="0" /> 選項 1</label>
                <label class="active radio-inline btn btn-default btn-md">
                  <input type="radio" value="1" /> 選項 2</label>
                <label class="radio-inline btn btn-default btn-md">
                  <input type="radio" value="2" /> 選項 3</label>  
              </div>
              <span class="help-block">選項 1 的說明；選項 2 的說明；選項 3 的說明</span>
            </div>
          </div>

<!-- 核取 checkbox (換行) -->
          <div class="form-group">
            <label class="col-sm-2 control-label">核取 checkbox</label>
            <div class="col-sm-10">
              <div class="checkbox">
                <label><input type="checkbox"/> 選項 1</label>
              </div>
              <div class="checkbox">
                <label><input type="checkbox"/> 選項 2</label>
              </div>
            </div>
          </div>

<!-- 核取 checkbox (同一行) -->
          <div class="form-group">
            <label class="col-sm-2 control-label">核取 checkbox</label>
            <div class="col-sm-10">
              <label class="checkbox-inline"><input type="checkbox"/> 選項 1</label>
              <label class="checkbox-inline"><input type="checkbox"/> 選項 2</label>
            </div>
          </div>

<!-- 下拉選單 select option -->
          <div class="form-group">
            <label class="col-sm-2 control-label">下拉選單 select option</label>
            <div class="col-sm-10">
              <select class="selectpicker" data-live-search="true" title="請選擇">  
                <option>香蕉</option>
                <option>蘋果</option>
                <option>鳳梨</option>
                <option>芭樂</option>
                <option>草莓</option>
              </select>
            </div>
          </div>
        </form><!-- /form -->
        </div><!-- /panel-body -->
        <div class="panel-footer">
<!-- 按鈕 -->
          <button type="button" class="btn btn-default">Default</button>
          <button type="button" class="btn btn-primary">Primary</button>
          <button type="button" class="btn btn-success">Success</button>
          <button type="button" class="btn btn-info">Info</button>
          <button type="button" class="btn btn-warning">Warning</button>
          <button type="button" class="btn btn-danger">Danger</button>
          <button type="button" class="btn btn-link">Link</button>
        </div><!-- /panel-footer -->
      </div>
    </section><!-- /.col -->
  </div><!-- /.row -->
</section><!-- /.content-->
<!-- End doc -->

<!-- jQuery 2.1.4 -->
<script src="jquery/2.1.4/jquery.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Select -->
<script src="plugins/select/select.bootstrap.js"></script>
</body>
</html>
07／Bootpag 純粹做出分頁
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>測試頁</title>
<link rel="stylesheet" href="lib/bootstrap.min.css" />
<style>
.content {
    border : 1px solid #ccc;
    padding: 15px;
}
.content, .demo1 {
    margin: 10px;
}
</style>
</head>
<body>
<!-- http://botmonster.com/jquery-bootpag -->
<div class="content">Dynamic Content goes here</div>
<div class="demo1"></div>
<script src="lib/jquery_2.1.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/jquery.bootpag.min.js"></script>
<script>
    // init bootpag
    $('.demo1').bootpag({
        total     : 23,
        page      : 3,
        next      : '下一頁',
        prev      : '上一頁'
    }).on("page", function(event, num){
     $(".content").html("Page " + num);
    });
</script>
</body>
</html>
08／twbsPagination 純粹做出分頁
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>測試頁</title>
<link rel="stylesheet" href="lib/bootstrap.min.css" />
<style>
.content {
    border : 1px solid #ccc;
    padding: 15px;
}
.content, .demo1 {
    margin: 10px;
}
</style>
</head>
<body>
<ul class="demo1"></ul>
<div class="content">Dynamic Content goes here</div>
<ul class="demo1"></ul>
<script src="lib/jquery_2.1.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/jquery.twbsPagination.min.js"></script>
<script>
    $(function () {
        $('.demo1').twbsPagination({
            totalPages  : 23,
            startPage   : 3,
            visiblePages: 10,
            first       : '第一頁',
            prev        : '上一頁',
            next        : '下一頁',
            last        : '最末頁',
            onPageClick: function (event, page) {
                $('.content').html('Page ' + page);
            }
        });
    })
</script>
</body>
</html>
09／TreeView 建立一棵樹
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Title of the document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.tree, .tree ul {
  margin    : 0;
  padding   : 0;
  list-style: none
}
.tree ul {
  margin-left: 1em;
  position   : relative
}
.tree ul ul {
  margin-left: .5em
}
.tree ul:before {
  content    : "";
  display    : block;
  width      : 0;
  position   : absolute;
  top        : 0;
  bottom     : 0;
  left       : 0;
  border-left: 1px solid
}
.tree li {
  margin     : 0;
  padding    : 0 1em;
  line-height: 2em;
  color      : #369;
  font-weight: 700;
  position   : relative
}
.tree ul li:before {
  content   : "";
  display   : block;
  width     : 10px;
  height    : 0;
  border-top: 1px solid;
  margin-top: -1px;
  position  : absolute;
  top       : 1em;
  left      : 0
}
.tree ul li:last-child:before {
  background: #fff;
  height    : auto;
  top       : 1em;
  bottom    : 0
}
.indicator {
  margin-right: 5px;
}
.tree li a {
  text-decoration: none;
  color          : #369;
}
.tree li button, .tree li button:active, .tree li button:focus {
  text-decoration: none;
  color          : #369;
  border         : none;
  background     : transparent;
  margin         : 0px 0px 0px 0px;
  padding        : 0px 0px 0px 0px;
  outline        : 0;
}
</style>
</head>
<body>
<div class="container" style="margin-top:30px;">
  <div class="row">
      <div class="col-md-12">
          <ul id="tree1">
              <li><a href="#">TECH</a>
                  <ul>
                    <li>Company Maintenance</li>
                    <li>Employees
                        <ul>
                            <li>Reports
                                <ul>
                                    <li>Report1</li>
                                    <li>Report2</li>
                                    <li>Report3</li>
                                </ul>
                            </li>
                            <li>Employee Maint.</li>
                        </ul>
                    </li>
                    <li>Human Resources</li>
                  </ul>
              </li>
              <li>XRP
                  <ul>
                    <li>Company Maintenance</li>
                    <li>Employees
                        <ul>
                            <li>Reports
                                <ul>
                                    <li>Report1</li>
                                    <li>Report2</li>
                                    <li>Report3</li>
                                </ul>
                            </li>
                            <li>Employee Maint.</li>
                        </ul>
                    </li>
                    <li>Human Resources</li>
                  </ul>
              </li>
          </ul>
      </div>    
  </div>
</div>

<script src='lib/jquery.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$.fn.extend({
    treed: function (o) {
      
      var openedClass = 'glyphicon-minus-sign';
      var closedClass = 'glyphicon-plus-sign';
      
      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };
      
        //initialize each of the top levels
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this); //li with children ul
            branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });
        //fire event from the dynamically added icon
      tree.find('.branch .indicator').each(function(){
        $(this).on('click', function () {
            $(this).closest('li').click();
        });
      });
        //fire event to open branch if the li contains an anchor instead of text
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        //fire event to open branch if the li contains a button instead of text
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }
});

//Initialization of treeviews

$('#tree1').treed();
</script>
</body>
</html>

〔範例下載〕

☞ Creating Accordion Table with Bootstrap
☞ Bootstrap 進度條與 RowSorter 交換列
☞ Bootstrap 進度條與 RowSorter 交換列 1
☞ Bootpag分頁
☞ Bootstrap 表單運用
☞ Bootstrap DateTime Picker

Image Source

☞ Hello World in Swearjure
Tags :

沒有留言:

訂閱： 張貼留言 ( Atom )
技術提供：Blogger.

網誌建立於 2015 年 8 月 24 日 The Color Moon 遇見你。月亮彩色 | Created By Themexpose | Distributed By Blogger Themes