Jex’s Note

Bootstrap

版面

本身左右會留一些空間

<div class="container">
  ...
</div>

全版, full width container, spanning the entire width of your viewport

<div class="container-fluid">
  ...
</div>

引入時, 不要把 row 寫在 partial 裡

partial

<div class="col-md-12">
    ...
</div>

否則即使用 container-flud 包起來也可能發生版面超過

<div class="container-fluid">
  <div class="margin-top-50">
    <%= render ... partial view ... %>
  </div>
</div>

Modal

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Panel

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Panel content
    </div>
</div>

popover

基本用法

HTML :

<span class="badge popover-hint" data-content="獲得評價次數">15</span>

JS :

$('.popover-hint').popover({
  trigger: 'hover',
  placement: 'auto',                // hint 出現的位置
  container: 'body'                 // 讓 popover 調整為適合內文的寬度
});

Custom

HTML:

// 讓取消事件可以取到 test-id, 進而觸發 close
<a href=\"javascript: void(0);\" class=\"close\" data-test-id=\"{$row['id']}\">&times;</a>

// test-id 為了可以 close
<button id='test-{$row['id']}' class='btn btn-success btn-xs' title='Demo popover' data-toggle='popover'>See more</button>
<div class='popover-content hide'>$content</div>

// content 不一定要用 js 產生, 可以直接寫在 html 裡
<li data-toggle='popover' title='Demo title' data-content='Demo content' data-html='true'>

CSS:

.popover {
    z-index: 9999;      // 避免被排在其他的下面
    position: fixed;   //避免被 限制大小的 diev 切掉
    font-size: 12px;
    line-height: 16px;
}

click + close 事件 :

// 基本資料及更多資料
$('[data-toggle="popover"]').popover({
    html: true,
    trigger: 'click',           // or 'hover'
    placement: 'top',
    content: function () {
        return $(this).next('.popover-content').html();
    }
}).on('shown.bs.popover', function(e) {
    var $pop_content = $(this).next();
    $pop_content.find('.close').click(function(){
        $('#test-' + $(this).data('test-id')).click();      // 再點一下就會關閉, 所以再觸發一次
    });
});

hover :

$('[data-toggle="popover"]').popover({
    html: true,
    trigger: 'hover',
    placement: 'auto',
    content: function () {
        return $(this).next('.popover-content').html();
    }
});

hover 到 popup 不要消失 :

$('[data-toggle="popover"]').popover({
    html: true,
    trigger: 'manual',
    placement: 'right',
    content: function () {
        return $(this).next('.popover-content').html();
    }
}).on("mouseenter", function () {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function () {
        $(_this).popover('hide');
    });
}).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 300);
});

Datepicker

安裝

gem 'bootstrap-datepicker-rails', '~> 1.4.0'

application.scss

*= require bootstrap-datepicker3
@import "bootstrap-sprockets";
@import "bootstrap";

application.js

Load 所有 locales
//= require bootstrap-datepicker

或單獨引入主程式及要的語言
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.zh-TW.js

bundle install 完記得重啟 rails

Example

HTML :

<input class="form-control" type="text" id="date-from">

JS :

$('#date-from').datepicker({
  format: 'yyyy/mm/dd'
});

Switch

Install

gem "bootstrap-switch-rails", '~> 3.3.3'

application.scss

*= require bootstrap3-switch
@import "bootstrap-sprockets";
@import "bootstrap";

application.js

//= require bootstrap-switch

bundle install 完記得重啟 rails

Example

HTML :

<input type="checkbox" id="switch" <%= @enabled %>>

JS :

$.fn.bootstrapSwitch.defaults.size = 'mini';
$('#switch').bootstrapSwitch();
$('#switch').on('switchChange.bootstrapSwitch', function (event, state) {
    console.log(this); // DOM element
    console.log(event); // jQuery event
    console.log(state); // true | false
});

file upload

HTML :

<span id="file-upload" class="btn btn-default btn-file">
  選擇檔案 <%= f.file_field :original_file %>
</span>
<span id="file-name"><span>

CSS :

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

JS :

// 上傳檔案 - 從 path 中取得檔名
$(document).on('change', '.btn-file :file', function() {
    var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, label]);
});

// 上傳檔案 - 將檔名顯示出來
$('#file-upload :file').on('fileselect', function(event, numFiles, label) {
  console.log(numFiles);
  console.log(label);
  $('#file-name').html(label);
});

dropdown

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

好用的第三方

dropdown

<select class="selectpicker show-tick">
  <option>item1</option>
  <option>item2</option>
  <option>item3</option>
</select>

$('.selectpicker').selectpicker();

datepicker

<input type="text" class="datepicker"/>

$('.datepicker').datepicker({
  format: 'yyyy-mm-dd',
  autoclose: true
});

ref

Comments