bootrap淺談
阿新 • • 發佈：2018-12-28
依據 rand 文件 -i ron example round www. html元素 
學習地址：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
自己練習了下
主要是使用了bootrap中包含的class類樣式，只要給相應的HTML元素添加上該類，就可以實現相應的效果。
只是需要記住都有哪些class，並依據相應的語法實現。
完整代碼:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link relView Code="stylesheet" href="../bootstrap.min.css"> <script src="../jquery-3.3.1.min.js"></script> <script src="../bootstrap.min.js"></script> <style> .fakeimg{ height: 200px; background-color: darkgray; } </style> </head> <body> <div class="jumbotron text-center" style="margin-bottom:0"> <h1>我的第一個 Bootrap 頁面!</h1> <p>重置瀏覽器窗口大小查看效果</p> </div> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">網站名</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">主頁</a></li> <li><a href="#">頁面2</a></li> <li><a href="#">頁面3</a></li> </ul> </div> </nav> <div class="container"> <div class="row"> <div class="col-sm-4"> <h2>關於我</h2> <h4>我的照片</h4> <div class="fakeimg">這邊插入圖像</div> <span>關於我的介紹...</span> <h3>鏈接</h3> <h5>描述文本</h5> <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> </div> <div class="col-sm-8"> <h2>標題</h2> <h4>副標題</h4> <div class="fakeimg">圖像</div> <p>一些文本</p> <p> 菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！ </p> <h2>標題</h2> <h4>副標題</h4> <div class="fakeimg">圖像</div> <p>一些文本</p> <p> 菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！ </p> </div> </div> </div> <div class="jumbotron text-center" style="margin-bottom:0"> <span>底部內容</span> </div> </body> </html>
需要引入boot rap.min.css , jquery.min.js , bootrap.min.js文件
只要記住了這些class類的名稱及用法，還是比較簡單的，添加樣式時會更加簡便一點。
bootrap淺談