1.什麼是bootstrap?javascript
Bootstrap 是一個用於快速開發 Web 應用程序和網站的開源的UI前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。css
2.爲何要用bootstraphtml
容易上手:只要您具有 HTML 和 CSS 的基礎知識,您就能夠開始學習 Bootstrap。 Copy+Edit前端
響應式設計:Bootstrap 的響應式 CSS 可以自適應於臺式機、平板電腦和手機。java
它爲開發人員建立接口提供了一個簡潔統一的解決方案。jquery
· 它包含了功能強大的內置組件,易於定製。bootstrap
· 它還提供了基於 Web 的定製。瀏覽器
· 它是開源的。前端框架
開源免費app
兼容性好
容易上手
支持響應式
3.什麼是響應式設計
響應式設計:一套代碼可以適應多種終端(PC,平板,手機等),也就是該代碼在多種設備上良好的顯示。不要要的內容被隱藏。
特色:訪問該類型的網站時,改變瀏覽器的寬度,看他是否有滾動條。
優缺點:
優勢:開發成本低
缺點:耗流量,用戶體驗很差
小公司使用
手機網站:專門爲移動端開發一套代碼,爲PC又開發一套代碼。百度,京東,淘寶等
PC百度.html 移動端.html;
優缺點:
優勢:省流量,用戶體驗好
缺點:開發成本高
大公司使用
4.基礎配置
首先創建html
head配置以下:
5.柵格系統
<body> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> ----------------------------------------- <!--流式佈局容器--> <div class="container-fluid"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> ========================================= <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-1">xxxx</div> <div class="col-xs-6 col-md-2">ooooo</div> <div class="col-xs-6 col-md-3">vvvvvv</div> <div class="col-xs-6 col-md-6">,jjjjj</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4 clear the XS cols if their content doesn't match in height clear the XS cols if their content doesn't match in height clear the XS cols if their content doesn't match in height</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>
6.表單
<!DOCTYPE html> <html lang="en"> <head> <!--設置編碼--> <meta charset="utf-8"> <!--兼容IE--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 適應設備--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面,任何其餘內容都*必須*跟隨其後! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap 核心css樣式 --> <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- jquery--> <script src="static/jquery-2.1.3.min.js"></script> <!--bootstrap 核心包--> <script src="static/bootstrap/js/bootstrap.min.js"></script> <style type="text/css"> .myCss2{ border: 1px dashed indigo; } .myCss{ border: 1px dashed red; } </style> </head> <body> <table class="table"> <tr> <td>編號</td> <td>開始車站</td> <td>到達車站</td> <td>價格</td> </tr> <tr> <td>1</td> <td>ks</td> <td>j</td> <td>215</td> </tr> <tr> <td>2</td> <td>開車</td> <td>到車</td> <td>666</td> </tr> </table> -----------條紋-------------------------------- <table class="table table-striped"> <tr> <td>編號</td> <td>開始車站</td> <td>到達車站</td> <td>價格</td> </tr> <tr> <td>1</td> <td>ks</td> <td>j</td> <td>215</td> </tr> <tr> <td>2</td> <td>開車</td> <td>到車</td> <td>666</td> </tr> </table> -----------帶邊框的表格-------------------------------- <table class="table table-bordered"> <tr> <td>編號</td> <td>開始車站</td> <td>到達車站</td> <td>價格</td> </tr> <tr> <td>1</td> <td>ks</td> <td>j</td> <td>215</td> </tr> <tr> <td>2</td> <td>開車</td> <td>到車</td> <td>666</td> </tr> </table> -----------鼠標懸停的表格-------------------------------- <table class="table table-hover"> <tr> <td>編號</td> <td>開始車站</td> <td>到達車站</td> <td>價格</td> </tr> <tr> <td>1</td> <td>ks</td> <td>j</td> <td>215</td> </tr> <tr> <td>2</td> <td>開車</td> <td>到車</td> <td>666</td> </tr> </table> ----------------緊縮表格----------------- <table class="table table-condensed"> <tr> <td>編號</td> <td>開始車站</td> <td>到達車站</td> <td>價格</td> </tr> <tr> <td>1</td> <td>ks</td> <td>j</td> <td>215</td> </tr> <tr> <td>2</td> <td>開車</td> <td>到車</td> <td>666</td> </tr> </table> ==================================== <table class="table table-hover"> <!-- On rows --> -------------------- <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="active">...</td> <td class="success">...</td> <td class="warning">...</td> <td class="danger">...</td> <td class="info">...</td> </tr> <tr> <td class="active">ooo</td> <td class="success">ooo</td> <td class="warning">ooo</td> <td class="danger">ooo</td> <td class="info">ooo</td> </tr> <tr> <td class="active">xxx</td> <td class="success">xxx</td> <td class="warning">xxx</td> <td class="danger">xxx</td> <td class="info">xxx</td> </tr> </table> ====================================== <div class="table-responsive"> <table class="table"> <tr> <td>編號</td> <td>開始車站</td> <td>到達車站</td> <td>價格</td> </tr> <tr> <td>1</td> <td>ks</td> <td>j</td> <td>215</td> </tr> <tr> <td>2</td> <td>開車</td> <td>到車</td> <td>666</td> </tr> </table> </div> </body> </html>
7.滾動播放
<!DOCTYPE html> <html lang="zh-CN"> <head> <!--設置編碼--> <meta charset="utf-8"> <!--兼容IE--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 適應設備--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面,任何其餘內容都*必須*跟隨其後! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap 核心css樣式 --> <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- jquery--> <script src="static/jquery-2.1.3.min.js"></script> <!--bootstrap 核心包--> <script src="static/bootstrap/js/bootstrap.min.js"></script> <style type="text/css"> .myCarousel{ border: 1px dashed red; height: 100px; width: auto; } </style> </head> <body> <!--<div class="container myCarousel"> .......tttt </div>--> <!--<div class="myCarousel" > </div>--> <div class="container myCarousel"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators 原點部分--> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides 圖片部分 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="static/image/lb1.jpg" alt="兔兔" > <div class="carousel-caption"> 圖片1 </div> </div> <div class="item"> <img src="static/image/lb2.jpg" > <div class="carousel-caption"> 圖片2 </div> </div> <div class="item"> <img src="static/image/lb3.jpg" > <div class="carousel-caption"> 圖片3 </div> </div> <div class="item"> <img src="static/image/lb4.jpg" > <div class="carousel-caption"> 圖片4 </div> </div> </div> <!-- Controls 左右按鈕 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </body> <script type="text/javascript"> $('.carousel').carousel({ interval: 3000, pause:null }) </script> </html>
7.死神效果展現
<!DOCTYPE html> <html lang="zh-CN"> <head> <!--設置編碼--> <meta charset="utf-8"> <!--兼容IE--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 適應設備--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面,任何其餘內容都*必須*跟隨其後! --> <title>死神</title> <!-- Bootstrap 核心css樣式 --> <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- jquery--> <script src="static/jquery-2.1.3.min.js"></script> <!--bootstrap 核心包--> <script src="static/bootstrap/js/bootstrap.min.js"></script> <!-- <style type="text/css"> .myCarousel{ border: 1px dashed red; height: 100px; width: auto; } </style>--> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="container-fluid"> <div class="navbar-header"> <!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>--> <a class="navbar-brand" href="#">死神</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#info">簡介 <span class="sr-only">(current)</span></a></li> <a class="navbar-brand" href="#role">人物</a> <a class="navbar-brand" href="#">其餘</a> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登陸</a></li> <li><a href="#">註冊</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </div> </nav> <!--滾動播放--> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox" > <div class="item active"> <img src="static/image/總覽.jpg" class="img-responsive img-circle" width="100%" height="auto" disabled="block"/> <div class="carousel-caption"> 圖1 </div> </div> <div class="item"> <img src="static/image/十番隊隊長.jpg" class="img-responsive img-circle"/> <div class="carousel-caption"> 圖2 </div> </div> <div class="item"> <img src="static/image/最強總隊長.jpg" class="img-responsive img-circle"/> <div class="carousel-caption"> 圖3 </div> </div> <div class="item"> <img src="static/image/虛化黑崎.jpg"class="img-responsive img-circle" width="100%" height="auto" disabled="block" /> <div class="carousel-caption"> 圖4 </div> </div> <div class="item"> <img src="static/image/十番副隊.jpg"class="img-responsive img-circle"/> <div class="carousel-caption"> 圖5 </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!--簡介--> <a id="info"></a> <div class="container"> <!-- 標題--> <div class="page-header"> <h1 class="page-header-customer">簡介<small>改編自fresh果果同名小說</small></h1> </div> <!--內容--> <div class="well"> <p>死神 </p> <P> 故事的主角黑崎一護,15歲,頭髮顏色桔色,瞳孔顏色棕色,職業:學生,特技是:能看見幽靈。 故事從兩我的的相遇開始……</p> <p>被露琪亞追捕的虛襲擊了一護的家人,( 順帶一提,這一家人都能看見靈,除了一個死硬派的妹妹),露琪亞也身受重傷,爲了摯愛的家人,一護將斬魂刀插進本身的胸口,獲得了露琪亞的力量,終將虛消滅。</p> <p>露琪亞由於力量被一護奪走,暫時只能用義駭而呆在人間,而且要求一護在這段時間內成爲代理死神,怕麻煩的一護固然拒絕掉了。 虛又出現,露琪亞強行將一護的靈魂推離肉體,卻又讓一護不要救那個小孩。</p> <p> 露琪亞:就算你如今救那孩子,若是你沒有自覺本身是個死神那還不是同樣!由於在你面前受到攻擊才就他?你別太天真了。死神必須對全部靈魂一概平等才行!只由於在本身視線範圍,可以達到的範圍才救他,這只不過是顧本身方便!不要用半調子的心情救他!若是你之後要去救他…那就要覺悟連其餘全部的靈也要拯救!不論是哪裏都要趕去,就算是犧牲性命也在所不惜。 一護:我才無論什麼覺悟不覺悟,應爲我想救他,因此我就要救他,……當時你不是自告奮勇救了我嗎……既然是自告奮勇,那會想那麼多啊! 一番話和眼前的危機境況終於讓一護有了作死神的自覺。</p> </div> <!--角色介紹--> <a id="role"></a> <div class="container"> <div class="page-header"> <h1>角色介紹</h1> </div> <!-- 黑崎一護--> <div class="alert alert-success"> <div class="row"> <div class="col-lg-3"> <img src="static/image/黑崎一護.jpg" class="img-thumbnail"> </div> <div class="col-lg-4"> <h3>黑崎一護</h3> <P> 黑崎一護( Kurosaki Ichigo)是日本動漫《死神》中的男主角,是滅卻師與死神結合生下的後代,體內同時擁有死神、滅卻師以及虛的多種力量。</p> <p>在家人遭到虛的襲擊時,爲了救下家人,從死神朽木露琪亞那裏獲得了死神之力,從而開啓了死神代理的工做。</p> <p>後來分別在屍魂界篇和虛圈篇拯救同伴於險境,並戰勝了想要破壞屍魂界安定的藍染惣右介,被瀞靈廷授予「屍魂界的英雄」的稱呼。戰勝藍染後,一護失去了死神之力,後在完現術篇中從朽木露琪亞那裏再次得到。</p> <p> 在千年血戰篇中一護覺醒了本身真正的斬魂刀,靠着同伴們的幫助最終戰勝了最強敵人友哈巴赫,解救了屍魂界、現世與虛圈。大決戰約十年後,黑崎一護與井上織姬婚後育有一子,名叫黑崎一勇。</p> </div> </div> </div> <!--花千骨--> <div class="alert alert-warning" > <div class="row"> <div class="col-lg-9"> <h3>朽木露琪亞 </h3> <p>原屬屍魂界護廷十三隊的十三番隊、被分派往空座町執行任務的死神,在追捕「虛」期間趕上黑崎一護,被虛所傷,因而將大半力量傳給了一護,後來取得「義骸」,在空座町繼續生活了近兩個月,和一護四處面對虛、解放遊魂,直至被護廷十三隊通緝逮捕、帶回屍魂界。此事原由正是露琪亞將死神的力量非法傳給了人類,露琪亞獲屍魂界最高司法組織——中央四十六室判處以死刑。</p> </div> <div class="col-lg-3"> <img src="static/image/朽木露琪亞.jpg" class="img-responsive img-circle"/> </div> </div> </div> <div class="alert alert-danger" role="alert"> <div class="row"> <div class="col-lg-3"> <img src="static/image/十番隊隊長.jpg" class="img-responsive img-rounded"/> </div> <div class="col-lg-9"> <h3>日番谷冬獅郎(十番隊隊長) </h3> <p>歷史上最年輕成爲隊長的天才少年,銀髮,碧綠雙眼,身材矮小。西流魂街一地區「潤林安」出身,擅長踢足球。與西門的守衛兕丹坊是朋友,並教他「都會準則」。日番谷爲人冷靜,同時也具備優秀的觀察力,最先察覺護廷十三隊內部異常的跡象,後來便獨自展開調查。而跟護廷隊裏其餘瘋瘋的死神們比起來,他算是「比較有常識的正常人」。平日喜歡別人叫他「日番谷隊長」,討厭別人直呼其名。與五番隊副隊長雛森桃是兩小無猜的好朋友,幼年時雛森桃總呼他「小白或小獅郎」。進入真央靈術院學習並掌握始解後,雛森桃終以真名稱呼他。在瀞靈廷的隊長副隊長中,除了草鹿八千流以外身高是最低的,所以如何讓本身長高是他最煩惱的事情之一,如今正奉行「祖母說多睡覺的孩子會長高」的教誨,總會盡早完成工做而後回隊舍睡覺。對於別人常常將他當成小學生一事很反感。 日番谷常被除了祖母和雛森桃以外的人說他「就像冰同樣」而敬而遠之。另外,他也在還沒有成爲死神甚至尚未進入術院的那時,就已經聽到的冰輪丸的呼喚,天才之說可見一斑。常常被雛森桃規勸進入死神學院,但每每嗤之以鼻,並一再強調不準其再稱乎他爲小白/小獅郎,然後雛森桃曾許諾「只要你進入死神學院後,我便再也不叫你的小名」。以後碰見與市丸銀同輩的死神松本亂菊,被其提醒「去作死神吧。像你這麼強的靈壓,若是不學習控制它,你的力量可能會殺了你的奶奶」的契機之下,決心去尋找屬於本身的力量,而且在聽到奶奶說「其實冬獅郎一直在忍耐吧,比起這個奶奶會更難受的」狀況下,終於再也不顧慮,踏上了成爲死神的道路。 </p> </div> </div> </div> <div class="alert alert-info" role="alert"> <div class="row"> <div class="col-lg-9"> <h3>最強總隊長 </h3> <p>在全部隊長中年事最高。被稱爲一千年來最強總隊長。死神教育學院「真央靈術院」的創始者。身爲護廷十三隊的總隊長,負責做戰計劃,總指揮隊長,副隊長,上位席官和普通死神的做戰。於建校早年任教,京樂和浮竹是他最優秀的兩個學生。因旅禍事件而與浮竹京樂爲敵,但藍染的最終目的暴露後,衆人冰釋前嫌。在與破面的戰鬥中,松本、雛森、吉良,修兵都敵不過的犽翁,被他兩招即秒。然而犽翁有著秒殺四人的實力,但卻被山本總隊長快速擊倒,可見他的實力遠遠高出副隊長四人之和。 堅決十足地貫徹正義。年事已高,寶刀未老。斬魄刀和死神各戰鬥方式都具備讓人毛骨悚然的威嚴。足見其厲害程度。</p> </div> <div class="col-lg-3"> <img src="static/image/最強總隊長.jpg" class="img-responsive img-circle"/> </div> </div> </div> </div> <div class="panel-footer">Panel footer</div> <!-- <footer class="modal-footer"> 版權全部:@2016 xxxx 歡迎收看 </footer>--> </body> <!--<script type="text/javascript"> $('.carousel').carousel({ interval: 3000, pause:null }) </script>--> </html>
效果: