Bootstrap快速上手 --做品展現站點

時間 2019-11-12

標籤 bootstrap 快速上手展現站點欄目 Bootstarp 简体版

原文原文鏈接

　　本次咱們將採用Bootstrap來快速構建一個響應式的，支持多種設備的在線站點。css

1、設計目標html

站點具有功能：html5

1.帶有Logo的可摺疊的響應式導航條；jquery

2.重點展現四張做品的圖片傳送帶；ajax

3.單欄佈局中包含三塊內容，每塊內容都包含標題、短段落和吸引人點擊閱讀的大按鈕；chrome

4.頁腳包含社交媒體連接bootstrap

基本HTML樣式 1 <!DOCTYPE html> api

  2 
  3 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  4 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  5 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
  6 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
  7 
  8     <head>
　　　
 10         <meta charset="utf-8">
 11         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 12         <title></title>
 13         <meta name="description" content="">
 14         <meta name="viewport" content="width=device-width">
 15 
 16         <!-- Main Style Sheet -->
 17         <link rel="stylesheet" href="css/main.css">
 18         <!-- Modernizr -->
 19         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
 20         <!-- Respond.js for IE 8 or less only -->
 21         <!--[if (lt IE 9) & (!IEMobile)]>
 22             <script src="js/vendor/respond.min.js"></script>
 23         <![endif]-->
 24 
 25     </head>
 26     <body>
 27         <!--[if lte IE 7]>
 28             <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
 29         <![endif]-->
 30 
 31         <header role="banner">
 32             <nav role="navigation" class="navbar navbar-default">
 33               <div class="container">
 34                 <div class="navbar-header">
 35                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 36                     <span class="icon-bar"></span>
 37                     <span class="icon-bar"></span>
 38                     <span class="icon-bar"></span>
 39                   </button>
 40                   <a class="navbar-brand" href="index.html">Bootstrappin'</a>
 41                 </div>
 42                 <div class="navbar-collapse collapse">
 43                   <ul class="nav navbar-nav">
 44                     <li class="active"><a href="index.html">Home</a></li>
 45                     <li><a href="#">Portfolio</a></li>
 46                     <li><a href="#">Team</a></li>
 47                     <li><a href="#">Contact</a></li>
 48                   </ul>
 49                 </div><!--/.nav-collapse -->
 50               </div><!--/.container -->
 51             </nav>
 52         </header>
 53 
 54         <main role="main">
 55 
 56             <img src="img/okwu.jpg" alt="OKWU.edu Homepage">
 57             <img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage">
 58             <img src="img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation">
 59             <img src="img/emancipation.jpg" alt="Emancipation Stories">
 60 
 61             <h2>Welcome!</h2>
 62             <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 63             <p><a href="#">See our portfolio</a></p>
 64 
 65             <h2>Recent Updates</h2>
 66             <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 67             <p><a href="#">See what's new!</a></p>
 68 
 69             <h2>Our Team</h2>
 70             <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
 71             <p><a href="#">Meet the team!</a></p>
 72 
 73         </main>
 74 
 75         <footer role="contentinfo">
 76 
 77             <p><a href="index.html"><img src="img/logo.png" width="80" alt="Bootstrappin&#39;"></a></p>
 78 
 79             <ul class="social">
 80               <li><a href="#" title="Twitter Profile">Twitter</a></li>
 81               <li><a href="#" title="Facebook Page">Facebook</a></li>
 82               <li><a href="#" title="LinkedIn Profile">LinkedIn</a></li>
 83               <li><a href="#" title="Google+ Profile">Google+</a></li>
 84               <li><a href="#" title="GitHub Profile">GitHub</a></li>
 85             </ul>
 86 
 87         </footer>
 88 
 89         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 90         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
 91         <script src="js/plugins.js"></script>
 92         <script src="js/main.js"></script>
 93 
 94         <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
 95         <script>
 96             var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
 97             (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
 98             g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
 99             s.parentNode.insertBefore(g,s)}(document,'script'));
100         </script>
101 
102     </body>
103 </html>

　　這個基本的頁面包含導航條、主題內容、頁腳。目前沒有加入bootstrap樣式。app

2、Bootstrap 引入less

2.1 搭建傳送帶

（1）基本傳送帶

　　根據Bootstrap文檔上的傳送帶例子修改；

　　教程例子：　

<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>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </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>

#carousel

（2）強制傳送帶圖片全寬

　　因爲傳送帶中的圖片大小爲1600px，對於屏幕寬度超過1600px，那麼右側就會出現空隙。這是能夠強制圖片全寬，可能會帶來一些像素失真。作法：修改carousel.less 文件，中的

　　.carousel-inner{

　　　　....

　　　　>item{

　　　　>img,

　　　　>a>img{

　　　　...

　　　　min-width:100% ; // ADDED

　　　　}

（3）約束傳送帶的高度

　　在大型屏幕中傳送帶高度太高。這裏依據設計方案傳送帶的高度應該爲640px；

　　.carousel-inner{

　　　　....

　　　　>a>img{

　　　　...

　　　　max-height:640px ; // ADDED

　　　　}

　　注意：由於在.carousel-inner元素中有一條overflow : hidden, 而.item元素被限制了高度，因此在超太高度限制後其下面的部分會被隱藏。因而咱們能夠利用LESS的嵌套媒體查詢，再利用Bootstrap的中大斷點變量，分別調整屏幕寬度過寬時圖片的垂直定位，從而保證咱們的做品處於焦點位置：

　　>img,　　

　　> a > img{

　　　　@media(min-width:@screen-md-min){
　　　　margin-top:-40px;
　　　　}
　　　　@media(min-width:@screen-lg-min){
　　　　margin-top:-60px;
　　　　}

　　}

2.2 建立響應式分欄

　　咱們有時候但願頁面在大於等於平板的屏幕上以一行三欄的方式顯示，而在較窄的屏幕上則以一欄全寬顯示。

　　這就要根據bootstrap的移動優先響應式佈局。css / #grid 。 bootstrap採用的十二柵格系統，其基本類結構支持col-12 表示全寬， col-4表示三分之一寬...

　　Bootstrap利用媒體查詢和柵格系統實現了極強的適應力。小、中、大斷點： 768px、992px、1200px

　　修改三欄代碼：

<div class="container">
                <div class="col-sm-4"> 
                    <h2>Welcome!</h2>
                    <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
                    <p><a href="#">See our portfolio</a></p>
                </div>
                <div class="col-sm-4"> 
                    <h2>Recent Updates</h2>
                    <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
                    <p><a href="#">See what's new!</a></p>
                </div>
                <div class="col-sm-4"> 
                    <h2>Our Team</h2>
                    <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
                    <p><a href="#">Meet the team!</a></p>
                </div>
            </div>

Container

　　①其中container類用於約束內容的寬度，並使其在頁面中居中顯示；

　　②row類用於包裝三個欄，併爲欄間留出左右行邊距離；

　　③container類和row類都設定了清除，因此他們能夠包含浮動元素，同時也清除以前的浮動元素。

　　此外咱們但願響應式分欄和傳送帶的距離變大。因爲這是頁面的內容要增長額外的內邊距，因此咱們須要建立一個Less文件，用於保存這些以及其餘改動。

　　步驟：

　　①新建 _page-contents.less 文件

　　②編輯文件

//
// Page Contents
//
.page-contents{
    padding-top:40px;
    padding-bottom:40px;
}

_page-contents.less

　　③導入到__main.less文件中

　　④編譯__main.less文件，生成新的css文件

　　⑤在須要增長行間距的標籤的類中增長 page-contents

　　這裏還會遇到一個問題，就是分欄垂直排列的時候按鈕元素會與下一欄有重合。這時候咱們須要用到媒體查詢，讓他們垂直堆疊的時候相互之間會有點空隙。這裏使用CSS2的屬性選擇符來選擇類中包含col- 的全部元素，從而能讓同一組規則能夠應用與任何尺寸的分欄。解決方法：

.page-contents{

　　......

@media (max-width:@screen-xs-max){

[class*="col-"]{
clear:both;
padding-bottom:40px;
}
}
}

2.3 把連接變爲按鈕

　　只須要添加幾個關鍵類：

　　 http://v3.bootcss.com/css/#buttons

　　①btn 類用於將連接變爲按鈕樣式；

　　②btn-primary 類把按鈕設置爲主品牌顏色；

　　③pull-right 類把連接浮動到右側，使得其佔據更大的空間。

2.4 修飾頁腳

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。