Follow Fang!: Bootstrap

顯示具有 Bootstrap 標籤的文章。顯示所有文章

2020/03/07

Laravel 5.5 Install Bootstrap 4.4.1

首先移除原本的Bootstrap

npm uninstall --save-dev bootstrap-sass

接著安裝Bootstrap4以及popper.js

npm install bootstrap@4.4.1 popper.js --save-dev

Bootstrap Carousel

Carousel是一種圓形輸送帶，也可以稱為小朋友常在玩得旋轉木馬
木馬都在一個圓盤上，不斷地旋轉，有時序性的
木馬總是有不一樣的外表，圖片也不可能都是同一張的

不過包的時候，要注意，別把carousel-control包在carousel slide外面，否則會出現控制按鈕在外，圖片在中間的樣子呢XD

<!DOCTYPE html>

<html lang="en">
 <head>
  <meta charset="utf-8" />
  <title>Test</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="./js/bootstrap.js"></script>
  <link rel="stylesheet" href="./css/bootstrap.css">
 </head>
 <body>
  <div id="slider">
    <div id="carousel-example-generic" class="carousel slide">
    <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>
    </ol>
    <div class="carousel-inner">
     <div class="item active">
      <img src="http://www.wired.com/wiredenterprise/wp-content/uploads/2013/07/ff_googleinfrastructure_large.jpg" title="image1">
      <div class="carousel-caption">lable1</div>
     </div>
     <div class="item">
      <img src="http://rack.1.mshcdn.com/media/ZgkyMDEyLzEyLzA0L2M1L2dvb2ZpbmdvZmZvLmJURS5qcGcKcAl0aHVtYgk5NTB4NTM0IwplCWpwZw/fe2369e6/53a/goofing-off-on-a-google-doodle-how-downtime-helps-us-work-better-9e11a95d06.jpg" title="image2">
      <div class="carousel-caption">lable2</div>
     </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
     <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
     <span class="icon-next"></span>
    </a>
   </div>
  </div>
  <style type="text/css">
   #slider {
    width: 30%;
    height: 50%;
   }
  </style>
 </body>
</html>

參考資料：
http://getbootstrap.com/javascript/#carousel
http://repeat.tw/blog/post/22412400

2013/09/01

Bootstrap accordion

accordion效果就像手風琴一樣拉上拉下

在拉的時候，總會有一個地方會顯示出來
要記得，jquery要使用1.9以上的版本喔

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script src="./js/bootstrap.js"></script>
        <link rel="stylesheet" href="./css/bootstrap.css">
    </head>
    <body>
        <div class="panel-group" id="accordion">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  Collapsible Group Item #1
                </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
              <div class="panel-body">
                one
              </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                  Collapsible Group Item #2
                </a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
              <div class="panel-body">
                Two
              </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                  Collapsible Group Item #3
                </a>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
              <div class="panel-body">
                Three
              </div>
            </div>
        </div>
      </div>
    </body>
</html>

執行結果

參考資料：
http://getbootstrap.com/javascript/#collapse

圖片參考：
http://www.rolandus.com/products/details/1072

2013/07/30

HTML5 Bootstrap.js 初體驗

最近接了個案子，必須要用網頁開發

那不擅長網頁開發的我當然得開始積極的練功備戰了

不然到時候賠了時間，說不定又得賠錢Orz

話說HTML已經是我國小時有稍微摸過，小一剛拿到電腦開心的模樣XD

電腦公司蔡先生當初幫我們灌的是Office 97，裡面有FrontPage 97

那時後有幫我幼稚園最愛的鋼彈W建立了一個網站，那網站當然只是運行在自己電腦上用XD

當初電腦有IIS，只是我那時候不懂的東西太多了XD

尤其那個人氣計數器搞了很久…最後才發覺我沒有去用個變數去紀錄他XD

到了高中，為了班級網頁比賽，還把整台電腦搬去學校的蠢樣子XDDDDDDD

我都還記得，那時候我跟朋友找到了一款韓國出的編輯器？M開頭的(年代久遠，不可考究XD)

反正加入了一堆JS的語法…，到最後也沒拿出去比賽，畢竟版面太醜了XDDD

從此之後，就步入了VB和C++與Java的開發之路上了，再也沒有摸過HTML以及Javascript

雖然用的都是IDE輔助，不過我還是有自己去學一下啦XDDD

不過還是得持續學新技術，才能茁壯

不過我這次選用Bootstrap.js，其實也是我的好同學Kennedy當初說很好用，我就用下去啦XDDD

對了對了，Kennedy說他缺女友喔喔喔喔喔！他是高富帥，歡迎搭訕

廢話不多說了，剛開始進入正題了