亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

bootstrap快速入門

難度中級
時長 2小時 5分
學習人數
綜合評分9.37
179人評價 查看評價
9.6 內容實用
9.4 簡潔易懂
9.1 邏輯清晰
  • 專門針對Bootstrap的開發工具:jetstrap 下載地址:jetstrap.com
    查看全部
  • IE9以上瀏覽器
    查看全部
  • Bootstrap基于html5、css3 本次學習基于Bootstrap3
    查看全部
  • 學習內容
    查看全部
    0 采集 收起 來源:課程介紹

    2017-05-05

  • <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>&times;</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>
    查看全部
    0 采集 收起 來源:面板

    2018-03-22

  • 標題字號
    查看全部
  • 列表 <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>
    查看全部
    1 采集 收起 來源:列表

    2018-03-22

  • progress進度條 <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" >20%</div> </div>
    查看全部
    0 采集 收起 來源:進度條

    2018-03-22

  • 分頁 <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 變小 -->
    查看全部
    1 采集 收起 來源:分頁

    2018-03-22

  • 可切換導航 <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默認選中
    查看全部
    1 采集 收起 來源:導航

    2018-03-22

  • 基本的控件 <div class="input-group"> <span class="input-group-addon">放置額外的內容及圖標</span> <input type="text" class="form-control"> </div>
    查看全部
    0 采集 收起 來源:控件組

    2018-03-22

  • 以一個帶有class.nav 的無序列表開始 .nav-tabs代表可切換的導航 .nav-pills代表膠囊導航 .nav-justified使導航垂直 <ul class="nav nav-tabs"> <li class="active"></li> <li></li> <li></li> </ul>
    查看全部
    0 采集 收起 來源:導航

    2018-03-22

舉報

0/150
提交
取消
課程須知
本教程適合具有一定前端基礎的人員,對HTML、CSS、JavaScript有一定的了解。
老師告訴你能學到什么?
(1)如何快速搭建網頁 (2)如何使用組件開發 (3)使用bootstrap插件實現網頁的開發

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!