Bootstrap學習筆記——初學者

時間 2019-11-10

原文原文鏈接

Bootstrap是基於HTML5和CSS3開發的，來自 Twitter，是目前最受歡迎的前端框架。css

經過一個簡單的登陸界面，來了解一下Bootstrap（參考http://www.williamghelfi.com/blog/2013/08/04/bootstrap-in-practice-a-landing-page/）html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
     <title>A landing Page</title>
     <meta name="viewport" content="width=device-width,initial-scale=1"/>
     <!--爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤。-->
     <link href="css/bootstrap.min.css" rel="stylesheet"/>
     <style>
       html{
           background:  url(img/1140376.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;/*Webkit*/
            -moz-background-size: cover;/*Ｍozilla*/
            -o-background-size: cover;/*Presto*/
            background-size: cover;/*W3c標準*/
           
       }
       body{
           padding-top:20px;
           background: transparent;/*將body的背景設置爲透明的*/
       }
       .panel{
           background: rgba(255, 255, 255, 0.9);/*支持CSS3的瀏覽器，最後一項規定了不透明度*/
       }
       .margin-base-vertical{
           margin:40px 0;
       }
     </style>
  </head>
  
 <body>
  <div class="container"><!--Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器-->
     <div class="row"><!--柵格系統-->
        <div class="col-md-5 col-md-offset-3 panel"><!--柵格類col-md-4設置列的寬度，col-md-offset-4設置列偏移-->
        
           <h2>I Need Your Information</h2>
           <p class="text-success">Someone told me long ago there's a <mark>calm</mark> before the storm. I know, <em>It's been comin</em> for some time.</p>
           <!--Marked text--><!--斜體-->
           <p class="lead">I want to know,<abbr title="attribute"> have</abbr> you ever seen the rain?</p><!--使段落突出顯示/基本縮率語-->
           <p>When it's over, <del>so they say</del>, it'll <u>rain a sunny day</u>. I know,<strong>Shinin</strong> down like water.</p><!--刪除、下劃線、加劇-->
           <p  class="bg-danger">This Just a try</p>
         <form class="margin-base-vertical">
              <div class="form-group">
                <label for="exampleInputEmail">Email Address</label>
                <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter Email">
               </div>
               <div class="form-group">
                <label for="InputPassword">Password</label>
                <input type="password" class="form-control" id="InputPassword" placeholder="Password">
               </div>
              <div class="form-group">
                <label for="exampleInputFile">File Input</label>
                <input type="file" id="exampleInputFile"/>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox">
                  Check me out </label>
              </div>
              <button type="submit" class="btn btn-success btn-lg">Sumbmit</button>
          </form>
          <blockquote><!--經過賦予 .blockquote-reverse 類能夠讓引用呈現內容右對齊的效果。-->
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              <!--來源的名稱能夠包裹進 <cite>標籤中。-->
          </blockquote>
        </div>
      </div>
    </div>
  </body> 

</html>

效果圖以下前端

一、Bootstrap須要將頁面設置成html5類型html5

二、佈局容器web

（1）.container 類用於固定寬度並支持響應式佈局的容器。bootstrap

（2）.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。（流式佈局容器）瀏覽器

三、柵格系統前端框架

柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局。框架

「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
經過「行（row）」在水平方向建立一組「列（column）」。
你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。

四、每行結尾加 能夠保留原有的格式佈局

五、有輔助的情景文本顏色

...
...
...
...
...
...

六、情景背景色

... ... ...

... ...