-
專門針對Bootstrap的開發工具:jetstrap 下載地址:jetstrap.com查看全部
-
IE9以上瀏覽器查看全部
-
Bootstrap基于html5、css3 本次學習基于Bootstrap3查看全部
-
學習內容查看全部
-
<button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#danger"> 這是測試按鈕 </button> <div id="danger" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span>×</span> <span class="sr-only">關閉彈窗</span> </button> <h4 class="modal-title">標題</h4> </div> <div class="modal-body"> 慕課網 </div> <div class="modal-footer"> <button class="btn btn-default" type="button" data-dismiss="modal"> 關閉 </button> <button class="btn btn-primary" tyoe="button">保存</button> </div> </div> </div> </div>查看全部
-
字體大小寫轉化查看全部
-
段落字號 文本對齊:text-left/text-center/text-right 標簽:del 刪除線標簽 ins/u 下劃線標簽查看全部
-
面板 <div class="panel panel-default"> <!-- 藍色panel-default ......可以是別的等等--> <div class="panel-heading"> 彈出層 </div> <div class="panel-body"> 這是面板的具體內容 </div> <div class="panel-footer"> 腳注 </div> </div>查看全部
-
標題字號查看全部
-
列表 <ul class="list-group"> <li class="list-group-item active"> 這是一個列表 <span class="badge">10</span> </li> <li class="list-group-item disabled"> 這是一個列表 <span class="badge">10</span> </li> <li class="list-group-item list-group-item-info"> 這是一個列表 <span class="badge">10</span> </li> <li class="list-group-item"> 這是一個列表 <span class="badge">10</span> </li> </ul>查看全部
-
progress進度條 <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" >20%</div> </div>查看全部
-
分頁 <nav> <ul class="pager"> <li class="previous"><a href="#">向左</a></li> <li class="next"><a href="#">向右</a></li> </ul> <ul class="pagination pagination-lg"> <li class="active"><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> </ul> </nav> <!-- pagination-lg 變大 pagination-sm 變小 -->查看全部
-
可切換導航 <ul class="nav nav-tabs"> <li class="active"><a href="#">慕課網1</a></li> <li><a href="#">慕課網2</a></li> <li><a href="#">慕課網3</a></li> </ul> 膠囊式 <ul class="nav nav-pills"> <li class="active"><a href="#">慕課網1</a></li> <li><a href="#">慕課網2</a></li> <li><a href="#">慕課網3</a></li> </ul> 垂直 <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">慕課網1</a></li> <li><a href="#">慕課網2</a></li> <li><a href="#">慕課網3</a></li> </ul> .active默認選中查看全部
-
基本的控件 <div class="input-group"> <span class="input-group-addon">放置額外的內容及圖標</span> <input type="text" class="form-control"> </div>查看全部
-
以一個帶有class.nav 的無序列表開始 .nav-tabs代表可切換的導航 .nav-pills代表膠囊導航 .nav-justified使導航垂直 <ul class="nav nav-tabs"> <li class="active"></li> <li></li> <li></li> </ul>查看全部
舉報
0/150
提交
取消