前端技術Bootstrap的hello world

時間 2019-11-17

標籤前端技術 bootstrap hello world 欄目 Bootstarp 简体版

原文原文鏈接

前端技術Bootstrap的hello world 2014-10-07 13:37 by 蟲師, 4258 閱讀, 6 評論, 收藏, 編輯css

----對於用戶來講，界面就是程序自己。那麼一個漂亮的web必定是你繼續使用這個應用的前題。html

這一節咱們來一塊兒寫個Bootstrap的hello wrold。前端

Bootstrapweb

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。bootstrap

如何使用Bootstrap？瀏覽器

Bootstrap的使用通常有兩種方法。一種是引用在線的Bootstrap的樣式，一種是將Bootstrap下載到本地進行引用。框架

引用在線樣式：ide

引用在線樣式的好處就是不用本地安裝Bootstrap，也是不用考慮引用時的路徑問題。缺點是擔憂性能問題，一旦在線樣式掛了，那麼本身的網站頁面樣式也就亂掉了。svg

http://v3.bootcss.com/getting-started/#download佈局

Bootstrap中文網爲 Bootstrap 專門構建了本身的免費 CDN 加速服務。

使用方法很是簡單：複製代碼

<!DOCTYPE html>

<html lang="en"> <head> <meta charset="utf-8"> <title>Hello Bootstrap</title>  <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>hello Bootstrap<h1> </body> </html>

複製代碼

使用本地的Bootstrap

下載Bootstrap到本地進行解壓，解壓完成，你將獲得一個Bootstrap目錄，結構以下：複製代碼

bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff

複製代碼

本地調用以下：複製代碼

<!DOCTYPE html>

複製代碼

咱們多加了一個背景色效果以下：

下面利用Bootstrap的樣式編寫一個網站出來。

添加導航行欄和登陸框

複製代碼

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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> <a class="navbar-brand" href="#">測試</a> <a class="navbar-brand" href="#">開發</a> </div> <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div> </div> </nav>

複製代碼

瀏覽器效果以下：

添加一篇文章

複製代碼

<div class="jumbotron">
  <div id='content' class='row-fluid'>
    <h2>Hello, world!</h2>
    <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-lg" role="button">閱讀全文 &raquo;</a></p>
  </div>
</div>

複製代碼

瀏覽器效果以下：

添加底部介紹與友情連接

複製代碼

<div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>About</h4> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> </div> <div class="sidebar-module"> <h4>Elsewhere</h4> <ol class="list-unstyled"> <li><a href="#">博客園</a></li> <li><a href="#">開源中國</a></li> <li><a href="#">infoq</a></li> </ol> </div> </div>

複製代碼

最終效果以下：

完整代碼：複製代碼

<!DOCTYPE html>

<html lang="en"> <head> <meta charset="utf-8"> <title>Hello Bootstrap</title>  <link href="./bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"> <style type='text/css'> body { background-color: #CCC; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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> <a class="navbar-brand" href="#">測試</a> <a class="navbar-brand" href="#">開發</a> </div> <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div> </div> </nav>

<div class="jumbotron">
  <div id='content' class='row-fluid'>
    <h2>Hello, world!</h2>
    <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-lg" role="button">閱讀全文 &raquo;</a></p>
  </div>
</div>


<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
      <div class="sidebar-module sidebar-module-inset">
        <h4>About</h4>
        <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
      </div>
      <div class="sidebar-module">
        <h4>Elsewhere</h4>
        <ol class="list-unstyled">
          <li><a href="#">博客園</a></li>
          <li><a href="#">開源中國</a></li>
          <li><a href="#">infoq</a></li>
        </ol>
      </div>
</div>

</body>

</html>

複製代碼

樣式的繼承

你必定很好奇，這些樣式是怎麼玩的？如何你細心的就會留意到div 標籤的class屬性。

經過class的屬性值去繼承Bootstrap的樣式定義，那麼就達到了某種樣式效果。複製代碼

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>自定義樣式</title>  <style> .divcss5-right{width:320px; height:120px;border:1px solid #F00;float:right} </style> </head> <body>  <div class="divcss5-right"> <h4>友情連接：</h4> <ol class="list-unstyled"> <li><a href="#">博客園</a></li> <li><a href="#">開源中國</a></li> <li><a href="#">infoq</a></li> </ol> </div> </body> </html>

複製代碼

玩前端就是要不斷的修改裏面的屬性或信息，而後看瀏覽器上的展現效果。