發表文章

目前顯示的是有「Bootstrap」標籤的文章

BootStrap 輪播 Carousel

一個輪播通常有三個部件 1. 輪播的圖片 2. 圖片計數器 3. 控制器 <!-- 這是輪播的主要外層 --> <div id="slidershow" class="carousel"> <!-- 設定圖片輪播的順序 -->     <ol class="carousel-indicators">          <li class="active" data-target="#slidershow" data-slide-to="0">1</li>         <li data-target="#slidershow" data-slide-to="1">2</li>         <li data-target="#slidershow" data-slide-to="2">3</li>         ...     </ol>      <!-- 設定輪播圖片 -->     <div class="carousel-inner">         <div class="item active">             <a href="##"><img src="#" alt=""></a>                <!-- 圖片對應標題和描述內容 -->             <div class="carousel-caption">           ...

html carouseltable 幻燈片

暫定 尚未寫註解 <div id="carouseltable01" class="carousel slide col-lg-12" data-ride="carousel">     <div class="carousel-inner">          //active 代表這張顯示的意思         <div class="item active">              <div class="pic">                 <iframe width="33%" height="100%" src="https://www.youtube.com/embed/live_stream?channel=UC6TH1QqLoC-SMFPp2AasuaA&autoplay=0&mute=0"                         title="YouTube video player" frameborder="0">                 </iframe>                 <iframe width="33%" height="100%" src="https://www.youtube.com/embed/live_stream?channel=UC6TH1QqLoC-SMFPp2AasuaA&autoplay=0&mute=0"                   ...

BootStrap 相關以及 date相關

圖片
日曆  calendar jQuery 和 Bootstrap 4 相關引用文件 <link rel="stylesheet" href="bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="css/jquery.bootstrap.year.calendar.css"> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="js/jquery.bootstrap.year.calendar.js"></script> html結構 <div class="container"> <div class="calendar"></div> </div> 初始化之後即可使用 $(function(){   $('.calendar').calendar(); }); 其他配置參數以及事件請參考  http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201803075007.html datepicker 相關引用文件 <script src="../Scp/bootstrap-datepicker.js" type="text/javascript"></script> <link href="../Styles/datepicker.css" rel="stylesheet" type="text/css" /> ht...