简单易上手的Bootstrap
什么是Bootstrap？
Bootstrap是一個web框架。Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。 ?它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優化而來。
如何獲取Bootstrap：
從http://v3.bootcss.com/網站下載bootstrap。
將下載的壓縮包解壓后將下列3哥文件夾拷貝到D盤的的bootsrap-01文件夾下：
注意：Bootstrap是基于jQuery的，所以js文件夾里還要放入一個jQuery文件，下載地址：http://jquery.com/
?
?
然后新建一個pages文件夾（用于放編寫的html文件），里面新建一個Demo.html文件，，用編輯器打開，寫入如下代碼：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Demo</title><!-- Bootstrap CSS --> <link href="../css/bootstrap.min.css" rel="stylesheet"><!-- Bootstrap javascript --> <script type="text/javascript" src="../js/jquery-3.2.1.js"></script> <script type="text/javascript" src="../js/bootstrap.min.js"></script> <script type="text/javascript"></script> <style type="text/css">.frame {margin: 0 auto;width: 1000px;height: 100%;} </style> </head> <body><div class="frame"><!-- Bootstrap 警告框 --><div class="alert alert-success" role="alert">Well done! You successfully read this important alert message.</div><div class="alert alert-info" role="alert">Well done! You successfully read this important alert message.</div><div class="alert alert-warning" role="alert">Well done! You successfully read this important alert message.</div><div class="alert alert-danger" role="alert">Well done! You successfully read this important alert message.</div><!-- Bootstrap 進度條 --><div class="progress"><div class="progress-bar progress-bar-info progress-bar-striped"role="progressbar" aria-valuenow="20" aria-valuemin="0"aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div></div><div class="progress"><div class="progress-bar progress-bar-warning progress-bar-striped"role="progressbar" aria-valuenow="60" aria-valuemin="0"aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div></div><div class="progress"><div class="progress-bar progress-bar-danger progress-bar-striped"role="progressbar" aria-valuenow="80" aria-valuemin="0"aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div></div><!-- Bootstrap 帶情景效果的面板 --><div class="panel panel-default"><div class="panel panel-heading">面板標題1</div><div class="panel panel-body">面板內容1</div></div><div class="panel panel-primary"><div class="panel panel-heading">面板標題2</div><div class="panel panel-body">面板內容2</div></div><div class="panel panel-info"><div class="panel panel-heading">面板標題3</div><div class="panel panel-body">面板內容3</div></div><div class="panel panel-danger"><div class="panel panel-heading">面板標題4</div><div class="panel panel-body">面板內容4</div></div><!--Bootstrap 圖標--><div><span class="glyphicon glyphicon-phone" aria-hidden="true"></span><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span><span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></div><div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span><span class="sr-only">Error:</span>Enter a valid email address</div><!--Bootstrap 巨幕--><div class="jumbotron "><div class="container"><div class="page-header"><h1>Hello Bootstrap !</h1></div><p>This is a simple hero unit, a simple jumpbotron-style compoent for calling extra attention to featured content or information.</p><p><a class="btn btn-primary btn-1g" href="javascript:void(0)" role="button">Learn more</a></p></div></div></div></body> </html>?執行效果如下：
?
?總結：Bootstrap框架給我的印象就是非常大方、簡介、漂亮、易上手，希望小伙伴們好好學，該框架是目前公司里非常流行的一種框架。
轉載請帶上本文鏈接：http://www.cnblogs.com/stm32stm32/p/6973890.html
?
?
轉載于:https://www.cnblogs.com/stm32stm32/p/6973890.html
總結
以上是生活随笔為你收集整理的简单易上手的Bootstrap的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL Server DATEDIFF(
- 下一篇： Xcode 6 打包ipa文件