簡單的bootstarp項目實例
阿新 • • 發佈:2018-07-17
primary 華麗 包括 程序員 res 提交 教育 搜索 idt
===========index.html==============
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <!-- 作者:offline 時間:2018-07-16 描述:導航欄模塊 --> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">切換導航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">藍橋學院</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li> <a href="#">首頁</a> </li> <li> <a href="#">論壇</a> </li> <li> <a href="#">前端開發</a> </li> <li> <a href="#">最新課程</a> </li> <li> <a href="#">移動APP</a> </li> <li> <a href="#">聯系我們</a> </li> </ul> </div> </div> </nav> <!-- 作者:offline 時間:2018-07-16 描述:home模塊 --> <section class="home"> <div class="lvjing"> <div class="container"> <div class="row"> <div class="col-md-1"></div> <div class="col-md-10"> <h1>bootstrap實戰課程等你來戰!</h1> <p>本套課程適用於:1.WEB開發人員;2.網站維護人員、管理人員</p> <p>培訓技能的目標:使用bootstrap框架快速構建響應式網頁,顛覆傳統WEB前端!</p> <img src="img/php.jpg" /> </div> <div class="col-md-1"></div> </div> </div> </div> </section> <!-- 作者:offline 時間:2018-07-16 描述:bbs模塊 --> <section class="bbs"> <div class="container"> <div class="row"> <div class="col-md-4"> <a> <img src="img/a.png" /> <h4>Android開發</h2> <p>djvnfdhvnxkffvn</p> </a> </div> <div class="col-md-4"> <a> <img src="img/b.png"/> <h4>Android開發</h2> <p>djvnfdhvnxkffvn</p> </a> </div> <div class="col-md-4"> <a> <img src="img/i.png"/> <h4>Android開發</h2> <p>djvnfdhvnxkffvn</p> </a> </div> </div> </div> </section> <!-- 作者:offline 時間:2018-07-16 描述:html5_imgR --> <section class="html5-R"> <div class="container"> <div class="row"> <div class="col-md-6"> <h2>HTML5前端開發</h2> <p>一線資深前端開發工程師傾情打造!助你完成普通程序員到優秀工程師的華麗升級!</p> <p> <span class="glyphicon glyphicon-grain"></span> 使用HTML5與CSS3技術輕松實現設備自適應展示。 </p> <p> <span class="glyphicon glyphicon-grain"></span> 清晰明了的語義代碼結構,更高的可讀性、更利於頁面維護的。 </p> </div> <div class="col-md-6"> <img src="img/html5.jpg"/> </div> </div> </div> </section> <!-- 作者:offline 時間:2018-07-16 描述:bootstrap區域 --> <section class="bootsrap"> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="img/Bootstrap.jpg"/> </div> <div class="col-md-6"> <h2>bootstrap實戰視頻教程</h2> <p>Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用於開發響應式布局、移動設備優先的 WEB 項目!</p> <p> <span class="glyphicon glyphicon-grain"></span> 你的網站和應用能在 Bootstrap 的幫助下通過同一份代碼快速、有效適配手機、平板、PC 設備。 </p> <p> <span class="glyphicon glyphicon-grain"></span> Bootstrap 提供了全面、美觀的文檔。你能在這裏找到關於 HTML 元素、HTML 和 CSS 組件、jQuery 插件方面的所有詳細文檔。 </p> </div> </div> </div> </section> <!-- 作者:offline 時間:2018-07-16 描述:new learn --> <section class="learns"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>新課程</h2> </div> </div> <div class="row"> <div class="col-md-3"> <img src="img/swift.jpg"/> <span> <button class="btn btn-default btn-lg">加入學習</button> </span> </div> <div class="col-md-3"> <img src="img/swift.jpg"/> <span> <button class="btn btn-default btn-lg">加入學習</button> </span> </div> <div class="col-md-3"> <img src="img/swift.jpg"/> <span> <button class="btn btn-default btn-lg">加入學習</button> </span> </div> <div class="col-md-3"> <img src="img/swift.jpg"/> <span> <button class="btn btn-default btn-lg">加入學習</button> </span> </div> </div> <div class="row"> <div class="col-md-3"> <img src="img/swift.jpg"/> <span> <button class="btn btn-default btn-lg">加入學習</button> </span> </div> <div class="col-md-3"> <img src="img/swift.jpg"/> <span> <button class="btn btn-default btn-lg">加入學習</button> </span> </div> <div class="col-md-3"> <img src="img/swift.jpg"/> <span> <button class="btn btn-default btn-lg">加入學習</button> </span> </div> <div class="col-md-3"> <img src="img/swift.jpg"/> <span> <button class="btn btn-default btn-lg">加入學習</button> </span> </div> </div> </div> </section> <!-- 作者:offline 時間:2018-07-16 描述:app下載區域 --> <section class="load"> <div class="container"> <div class="row"> <div class="col-md-6"> <h2>藍橋學院移動APP下載</h2> <p> 全新UI交互,與新網站數據同步,更加豐富的課程,開啟精彩無限,語音搜索課程,喊出你想要的課程,一件收藏,方便自己重復學習,離線下載課程,在哪兒都能開! </p> <button class="btn btn-primary"> <span class="glyphicon glyphicon-download-alt"></span> iPhone版 </button> <button class="btn btn-primary"> <span class="glyphicon glyphicon-download-alt"></span> Android版 </button> </div> <div class="col-md-6"> <img src="img/app-banner.jpg"/> </div> </div> </div> </section> <!-- 作者:offline 時間:2018-07-16 描述:contact聯系區域 --> <section class="contact"> <div class="lvjing"> <div class="container"> <div class="row"> <div class="col-md-6"> <h2> <span class="glyphicon glyphicon-send"></span> 聯系小藍 </h2> <p> 國信藍橋教育科技(北京)股份有限公司是一家泛互聯網公司,致力於以競賽、創業、培訓和招聘多種形式,線上線下相結合連接高校和社會,推動教育改革、人才成長和社會進步。公司總部位於北京,並在北京亦莊、中關村和廣東東莞等地設置分支機構。 </p> <address> <p> <span class="glyphicon glyphicon-home"></span> 地址:北京市大興區大族廣場T2棟10層 </p> <p> <span class="glyphicon glyphicon-phone-alt"></span> 聯系電話:4006-588-662 </p> <p> <span class="glyphicon glyphicon-envelope"></span> 郵箱:[email protected] </p> </address> </div> <div class="col-md-6"> <form class="form-horizontal" role="form"> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" id="firstname" placeholder="您的姓名"> </div> <div class="col-md-6"> <input type="text" class="form-control" id="lastname" placeholder="您的郵箱"> </div> </div> <div class="row"> <div class="col-md-12"> <input type="text" class="form-control" id="firstname" placeholder="標題"> </div> </div> <div class="row"> <div class="col-md-12"> <textarea class="form-control" rows="3" placeholder="留言"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">提交</button> </div> </div> </form> </div> </div> </div> </div> </section> <!-- 作者:offline 時間:2018-07-16 描述:底部區域 --> <footer> <div class="container"> <div class="row"> <div class="col-md-12"> <p> Copyright ? 2012-2015 www.lanqian.org 蜀ICP備13014270號-4 </p> </div> </div> </div> </footer> </body> <script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </html>
該項目css樣式
.navbar-brand { float: left; height: 50px; padding: 15px 15px; font-size: 25px; line-height: 20px; } .navbar-default .navbar-brand { color: cadetblue; padding-left: 100px; font-weight: bold; } .container-fluid { padding-right: 100px; padding-left: 15px; margin-right: auto; margin-left: auto; } .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 50px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; } .home{ text-align: center; background: url(../img/home-bg.jpg); width: 100%; height: 700px; background-size: cover; } .home .lvjing{ background: rgba(0,0,0,0.4); width: 100%; height: 100%; } .home h1{ padding-bottom: 20px; color: white; } .home p{ padding: 5px; color: white; } .bbs{ margin-top: 50px; padding: 80px,0px; text-align: center; } .bbs a{ text-decoration: none; color: black; } .bbs .col-md-4:hover{ background-color: gainsboro; } .html5-R .container{ margin-top: 50px; padding-top: 60px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; background-color: gainsboro; } p span.glyphicon.glyphicon-grain{ background: #4ada95; border-radius: 60%; width: 40px; height: 40px; text-align: center; margin-right: 20px; color: #fff; line-height: unset; } .bootsrap .container{ padding-top: 50px; padding-bottom: 40px; padding-right: 40px; padding-left: 0px; } .learns h2{ text-align: center; margin-bottom: 20px; } .learns button{ margin-top: 20px; margin-bottom: 20px; margin-left: 80px; padding-left: 20px; padding-right: 20px; border-color: gold; } .load .container{ margin-top: 50px; margin-bottom: 50px; } .load h2{ margin-bottom: 40px; } .load p{ margin-bottom: 20px; } .load .btn.btn-primary{ background-color: cadetblue; } .contact{ background:url(../img/contact-bg.png); background-size: cover; height: 300px; } .contact .container{ padding-top: 50px; margin-bottom: 50px; } .contact .lvjing{ background: rgba(0,0,0,0.6); width: 100%; height: 100%; } .contact h2{ color: white; } .contact p{ color: white; } .contact .form-horizontal .row{ margin-bottom: 20px; } .contact .form-group .btn.btn-default{ background-color: cadetblue; padding-left: 150px; padding-right: 150px; } footer{ text-align: center; margin-top: 30px; }
還需插入的組件包括(網上都有)
bootstrap.min.css
bootstrap.min.js
jquery-3.2.1.js
最後效果圖
簡單的bootstarp項目實例