前端學習1 bootstrap
近幾年全棧工程師的思想流行，爲了跟上浪潮，最近花了點時間，從新審視了一下前端，發現這兩年前端技術發展迅猛，有必要深刻去學習一下前端知識，就先從bootstrap開始吧。javascript
bootstrap是一個源於twitter的開源工具庫，目的是爲了解決前端是響應式佈局的快速開發，它有豐富的插件和不少已經寫好的css樣式，能夠說是後端程序員完成前端工做的好幫手。在此以前，後端程序員每每被css的樣式佈局，瀏覽器的統一表現和ui的色彩搭配所困擾，寫出的頁面每每比較醜，而有了bootstrap，咱們能夠輕鬆的寫出高大上的頁面，豐富的組件幾乎能夠知足個人一切需求，而開源和可定製化又能夠爲個人具體問題給予解決方案，less賦予了css動態語言的特性。關於bootstrap的具體內容和學習文檔，我推薦http://www.bootcss.com/，裏面的文檔很是友好。css
今天貼一個自學的bootstrap代碼，是一些經常使用組件的我的重寫，最後在上傳一個半完工毛坯頁面，基本體現了bootstrap的柵格佈局，豐富組件和支持響應式佈局的特色html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="device-width,initial-scale=1"> 6 <link href="css/bootstrap.min.css" rel="stylesheet"> 7 <script type="text/javascript" src="js/jquery.min.js"></script> 8 <title></title> 9 </head> 10 <body style="padding-top: 150px;"><!--設置body內部，防止nav遮擋--> 11 <!--隨鼠標滾動的nav標籤start--> 12 <div class="col-md-10"> 13 <nav class="nav navbar-inverse navbar-fixed-top"> 14 <div class="container"> 15 <div class="navbar-header"> 16 <a href="#" class="navbar-brand" > 17 <img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2428887428,3176715982&fm=58"> 18 </a> 19 <p class="navbar-text"><strong>BMW</strong></p> 20 </div> 21 <div class="collapse navbar-collapse"> 22 <div class="col-md-6"> 23 <ul class="nav navbar-nav"> 24 <li class="active"><a href="#">Home</a></li> 25 <li class="dropdown-toggle"><a href="#" data-toggle="dropdown">Page1</a> 26 <ul class="dropdown-menu"> 27 <li><a href="#">Item1</a></li> 28 <li><a href="#">Item2</a></li> 29 <li><a href="#">Item3</a></li> 30 </ul> 31 </li> 32 <li><a href="#">Page2</a></li> 33 <li><a href="#">Page3</a></li> 34 <li><a href="#">Page4</a></li> 35 </ul> 36 </div> 37 <div class="col-md-2"> 38 <div class="input-group"> 39 <input type="text" class="form-control" placeholder="搜索"> 40 <span class="input-group-btn"> 41 <button class="btn btn-info" type="button">Go</button> 42 </span> 43 </div> 44 <div> 45 </div> 46 </div> 47 </div> 48 </div> 49 </nav> 50 </div> 51 <!--隨鼠標滾動的nav標籤End--> 52 <!--麪包屑導航start--> 53 <div class="container"> 54 <div class="row"> 55 <div class="col-md-6"> 56 <ol class="breadcrumb"> 57 <li><a href="#">Home</a></li> 58 <li><a href="#">Show</a></li> 59 <li class="active">Details</li> 60 </ol> 61 </div> 62 </div> 63 </div> 64 <!--麪包屑導航end--> 65 <!--側邊欄導航start--> 66 <div class="col-md-10 col-md-offset-1"> 67 <ul class="nav nav-tabs"> 68 <li><a data-toggle="tab" href="#tab1">list1</a> 69 <li><a href="#tab2" data-toggle="tab">list2</a></li> 70 <li><a href="#tab3" data-toggle="tab">list3</a></li> 71 </ul> 72 <div class="tab-content"> 73 <div class="tab-pane fade" id="tab1"><h2>list1中內容</h2></div> 74 <div class="tab-pane fade" id="tab2"><h2>list2中內容</h2></div> 75 <div class="tab-pane fade" id="tab3"><h2>list3中內容</h2></div> 76 </div> 77 </div> 78 <!--側邊欄導航end--> 79 <div class="container"> 80 <ul class="nav nav-tabs"> 81 <li><a href="#tabs1"data-toggle="tab">tab1</a></li> 82 <li><a href="#tabs2" data-toggle="tab">tab2</a></li> 83 <li><a href="#tabs3" data-toggle="tab">tab3</a></li> 84 </ul> 85 <div class="tab-content"> 86 <div class="tab-pane" id="tabs1"><h3>tabs1</h3></div> 87 <div class="tab-pane" id="tabs2"><h3>tabs2</h3></div> 88 <div class="tab-pane" id="tabs3"><h3>tabs3</h3></div> 89 </div> 90 </div> 91 <article> 92 <!--分頁start--> 93 <ul class="pagination pagination-lg"> 94 <li class="disabled"><a href="#"><span class="glyphicon glyphicon-menu-left"></span></a></li> 95 <li class="active"><a href="#">1</a></li> 96 <li><a href="#">2</a></li> 97 <li><a href="#">3</a></li> 98 <li><a href="#">4</a></li> 99 <li><a href="#">5</a></li> 100 <li><a href="#"><span class="glyphicon glyphicon-menu-right"></span></a></li> 101 </ul> 102 <!--分頁end--> 103 </article> 104 <article> 105 <ul class="pager"> 106 <li class="previous"><a href="#"><span aria-hidden="true">←</span>前一篇</a></li> 107 <li class="next"><a href="#">後一篇<span aria-hidden="true">→</span></a></li> 108 </ul> 109 </article> 110 <div class="container"> 111 <h3>Version<label class="label label-default">New</label></h3> 112 <button type="button" class="btn btn-primary">more <span class="badge">5</span></button> 113 </div> 114 <div class="jumbotron"> 115 <div class="container"> 116 <h1>WelCome</h1> 117 <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> 118 <p><a href="#" class="btn btn-primary">more Info</a> </p> 119 </div> 120 </div> 121 <div class="container"> 122 <div class="row"> 123 <div class="col-xs-6 col-md-3"> 124 <a href="#" class="thumbnail"><img src="http://img.taopic.com/uploads/allimg/130501/240451-13050106450911.jpg" alt=""/></a> 125 <div class="caption"> 126 <h3>Nice Eyes</h3> 127 <p>balabalabala.....</p> 128 </div> 129 </div> 130 </div> 131 </div> 132 <div class="alert alert-danger alert-dismissable"> 133 <button type="button" class="close" data-dismiss="alert">close<span class="glyphicon glyphicon-remove"></span></button> 134 <span class="glyphicon glyphicon-alert"></span><p>Danger!</p> 135 <p>Don't Touch if Break</p> 136 </div> 137 <div class="progress"> 138 <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 40%;"> 139 <span>40%</span> 140 </div> 141 </div> 142 <div class="media"> 143 <div class="media-left"> 144 <a href="#"> 145 <img src="#" alt="" class="media-object"/> 146 </a> 147 </div> 148 <div class="media-body"> 149 <h4 class="media-heading">Heading............</h4> 150 </div> 151 </div> 152 <div class="embed-responsive-16by9"> 153 <video class="embed-responsive-item" src="http://v.baidu.com/link?url=dm_00pw_klemzFrMIr-E5gWV_F8l9vmTZFVv2mYSHVpDTklzO99cDEQZTkEC31rt5pZRhkm_5SZIbqsM2Kp9n1KnwnbY."></video> 154 </div> 155 <div> 156 <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">彈出</button> 157 </div> 158 <div class="modal fade" id="myModal" role="dialog"> 159 <div class="modal-dialog modal-lg" aria-hidden="true"> 160 <div class="modal-content"> 161 <div class="modal-header"> 162 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 163 <h4 class="modal-title">Modal Title</h4> 164 </div> 165 <div class="modal-body"> 166 <p>One fine body…</p> 167 </div> 168 <div class="modal-footer"> 169 <button type="button" class="btn btn-default" data-dismiss="modal">YES</button> 170 </div> 171 </div> 172 </div> 173 </div> 174 <div class="container container-fixed" > 175 <form class="form-group"> 176 <div class="input-group"> 177 <label for="name" class="label-primary">Name</label> 178 <input type="text" id="name"/> 179 </div> 180 <div class="input-group"> 181 <label for="pwd" class="label-primary">Password</label> 182 <input type="password" id="pwd"/> 183 </div> 184 <div class="input-group"> 185 <label for="email" class="label-primary">Email</label> 186 <input type="email" id="email"/> 187 </div> 188 </form> 189 </div> 190 <div class="btn-toolbar text-center"> 191 <div class="btn-group"> 192 <button type="button" class="btn-default"><span class="glyphicon glyphicon-backward"></span></button> 193 <button type="button" class="btn-default"><span class="glyphicon glyphicon-forward"></span> </button> 194 </div> 195 <div class="btn-group"> 196 <button class="btn-default" type="button"><span class="glyphicon glyphicon-stop"></span></button> 197 <button class="btn-default" type="button"><span class="glyphicon glyphicon-pause"></span></button> 198 </div> 199 </div> 200 <script type="text/javascript" src="js/jquery.min.js"></script> 201 <script type="text/javascript" src="js/bootstrap.min.js"></script> 202 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script> 203 </body> 204 </html>
接下來是毛坯頁面前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<title></title>
</head>
<body>
<!--頂部菜單-->
<div class="nav navbar-fixed-top" id="topmenu" style="background-color: #CCCCCC">
<div class="row">
<div class="col-md-2 col-xs-4 ">
<a href="#"><img src="美聯英語在線VIP-resource/icon-weibo.png" alt=""/>微博</a>
<a href="美聯英語在線VIP-resource"><img src="美聯英語在線VIP-resource/icon-wechat.png">微信</a>
</div>
<div class="col-md-2 col-xs-4 ">
400-777-8828
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-2 col-xs-4 "><a href="#">在線諮詢</a></div>
<div class="col-md-4 col-xs-6 col-md-offset-2">
<span class="col-xs-3">
<a class="btn btn-primary" href="#">登陸</a>
</span>
<span class="col-xs-3">
<a class="btn btn-danger" href="#">免費註冊</a>
</span>
</div>
</div>
</div>
<!--導航條-->
<div class="container-fluid" id="navbar">
<nav class="nav navbar-default">
<div class="nav navbar-header">
<div class="navbar-brand"><a href="#"><img src="美聯英語在線VIP-resource/logo_07.png"></a></div>
</div>
<div class="collapse navbar-collapse navbar-right ">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">課程介紹</a></li>
<li><a href="#">全球師資</a></li>
<li><a href="#">託福雅思</a></li>
<li><a href="#">美粉之家</a></li>
<li><a href="#">在線購買</a></li>
<li><a href="#">免費講堂</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">更多欄目<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">預定體驗</a></li>
<li><a href="#">英語膠囊</a></li>
<li><a href="#">精彩動態</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<!--幻燈片-->
<div id="carousel-show" class="carousel slide">
<!--原點導航-->
<ol class="carousel-indicators">
<li data-target="#carousel-show" data-slide-to="0" class="active"></li>
<li data-target="#carousel-show" data-slide-to="1"></li>
<li data-target="#carousel-show" data-slide-to="2"></li>
<li data-target="#carousel-show" data-slide-to="3"></li>
</ol>
<!--圖片內容-->
<div class="carousel-inner">
<div class="item active">
<img src="美聯英語在線VIP-resource/bnshow1.png" alt="" class="center-block"/>
<div class="carousel-caption">
<!--浮動在圖片上的內容-->
</div>
</div>
<div class="item">
<img src="美聯英語在線VIP-resource/bnshow2.jpg" alt="" class="center-block"/>
<div class="carousel-caption">
<blockquote>
<p>語言，是認知世界的工具！小美，是認知世界的夥伴！</p>
</blockquote>
</div>
</div>
<div class="item">
<img src="美聯英語在線VIP-resource/bnshow3.jpg" alt="" class="center-block"/>
<div class="carousel-caption">
<!--浮動在圖片上的內容-->
</div>
</div>
<div class="item">
<img src="美聯英語在線VIP-resource/bnshow4.jpg" alt="" class="center-block"/>
<div class="carousel-caption">
<!--浮動在圖片上的內容-->
</div>
</div>
</div>
<!--左右按鈕-->
<a class="left carousel-control" href="#carousel-show" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-show" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--內容頁-->
<div id="content" class="container">
<div class="row">
<img src="美聯英語在線VIP-resource/page2-title.png" alt="" class="center-block" style="padding: 70px"/>
</div>
<div class="row">
<div class="col-sm-3 col-xs-6"><img src="美聯英語在線VIP-resource/page2-01.jpg" alt="" class="img-rounded img-responsive" /></div>
<div class="col-sm-3 col-xs-6"style="margin: 0px auto"><img src="美聯英語在線VIP-resource/page2-02.jpg" alt="" class="img-rounded img-responsive" /></div>
<div class="col-sm-3 col-xs-6"style="margin: 0px auto"><img src="美聯英語在線VIP-resource/page2-03.png" alt="" class="img-rounded img-responsive" /></div>
<div class="col-sm-3 col-xs-6"style="margin: 0px auto"><img src="美聯英語在線VIP-resource/page2-04.jpg" alt="" class="img-rounded img-responsive" /></div>
</div>
<div class="row">
<div class="col-sm-3 col-xs-6"><img src="美聯英語在線VIP-resource/page2-05.jpg" alt="" class="img-rounded img-responsive"/></div>
<div class="col-sm-3 col-xs-6"><img src="美聯英語在線VIP-resource/page2-06.png" alt="" class="img-rounded img-responsive"/></div>
<div class="col-sm-3 col-xs-6"><img src="美聯英語在線VIP-resource/page2-07.jpg" alt="" class="img-rounded img-responsive"/></div>
<div class="col-sm-3 col-xs-6"><img src="美聯英語在線VIP-resource/page2-08.jpg" alt="" class="img-rounded img-responsive"/></div>
</div>
</div>
<!--視頻內容部分-->
<div class="container" style="margin-top: 50px;background-color: #FFF68F">
<div class="row" style="margin-top: 30px">
<img class="center-block img-responsive" src="美聯英語在線VIP-resource/page3-title.png" alt=""/>
</div>
<div class="row" style="margin-top: 20px">
<div class="media">
<div class="media-left media-middle">
<a href="#"><img class="media-object" style="zoom: 0.7" src="美聯英語在線VIP-resource/page3-01.jpg" alt=""/></a>
</div>
<div class="media-body">
<ul>
<li><h4>課程名稱：Shopping malls have everything</h4></li>
<li><h4>課程級別：L4</h4></li>
<li><h4>課程主題：平常生活</h4></li>
</ul>
</div>
<div class="media-right">
<a href="#"><img src="美聯英語在線VIP-resource/video_play_btn.png"></a>
</div>
</div>
</div>
<div class="row" style="margin-top: 20px">
<div class="media">
<div class="media-left media-middle">
<a href="#"><img class="media-object" style="zoom: 0.7" src="美聯英語在線VIP-resource/page3-01.jpg" alt=""/></a>
</div>
<div class="media-body">
<ul>
<li><h4>課程名稱：Shopping malls have everything</h4></li>
<li><h4>課程級別：L4</h4></li>
<li><h4>課程主題：平常生活</h4></li>
</ul>
</div>
<div class="media-right">
<a href="#"><img src="美聯英語在線VIP-resource/video_play_btn.png"></a>
</div>
</div>
</div>
<div class="row" style="margin-top: 20px">
<div class="media">
<div class="media-left media-middle">
<a href="#"><img class="media-object" style="zoom: 0.7" src="美聯英語在線VIP-resource/page3-01.jpg" alt=""/></a>
</div>
<div class="media-body">
<ul>
<li><h4>課程名稱：Shopping malls have everything</h4></li>
<li><h4>課程級別：L4</h4></li>
<li><h4>課程主題：平常生活</h4></li>
</ul>
</div>
<div class="media-right">
<a href="#"><img src="美聯英語在線VIP-resource/video_play_btn.png"></a>
</div>
</div>
</div>
<div class="row" style="margin:30px auto">
<div class="text-center">
<a class="btn btn-primary" href="#" >查看更多</a>
</div>
</div>
</div>
<!--teacher content-->
<div class="container">
<div class="row" style="margin-top: 30px">
<img src="美聯英語在線VIP-resource/page4-title.png" alt="" class="center-block img-responsive"/>
</div>
<div class="row" style="margin-top: 20px">
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
能夠chrome的控制檯中選擇不一樣的設備型號，看看響應式佈局在不一樣尺寸的屏幕中如何依然保持良好的可讀性，這也是bootstrap的強大之一java
剛開始學bootstrap，對於其強大特性，還需深挖啊！！！jquery
相關文章
- 1. 前端框架——BootStrap學習
- 2. 前端學習 之 Bootstrap（二）
- 3. 前端學習 之 Bootstrap （一）
- 4. 前端學習之Bootstrap學習
- 5. 前端學習-1
- 6. Bootstrap學習1
- 7. Bootstrap學習(1)
- 8. 前端學習——bootstrap，順手複習前端基本問題
- 9. Web前端學習筆記：Bootstrap框架
- 10. Web前端框架學習—Bootstrap
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章