Bootstrap – Max的程式語言筆記

左側分類欄位組合右側收合

max-stackoverflow — Tue, 07 May 2024 07:33:30 +0000

在使用 clipchamp 時看到這一個功能，覺得很有趣。

比較簡單的解法，是使用 sidebar + collapse 就可以做到，範例程式：
https://getbootstrap.com/docs/5.3/examples/sidebars/

clipchame 的這個做法的優點是讓分類可以保持在左側sidebar 裡。

實作的方式是，sidebar 使用 tab 來實作，收合使用。 collapse, 參考看看 bootstrap 範例：
https://getbootstrap.com/docs/5.3/components/collapse/

一般 collapse 是上下收合，這個是左右收。

一般 tab 是上下的版面，這個是左右版面。

實際上用的到html程式碼：

css:

div.ifilter_chart {
    display: flex;
    height: 100%;	
}

.ifitler_chart_left_side_bar{
    display: flex;
    /*
    // why remark this become height: 100% 
    height: 100%; */
    position: relative;
    z-index: 5;	
}

.ifilter_chart_left_nav {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 64px;
    border-inline-end: 1px solid rgb(230, 230, 230);
}

.ifilter_chart_left_nav_grid {
    flex-grow: 1;
    align-self: stretch;
    position: relative;
    overflow: hidden;
}

.ifilter_chart_left_nav_item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0px;
    /* overflow-y: scroll; */
}

.ifilter_chart_left_nav_btn.active {
    opacity: 1;
    color: var(--primary) !important;
    background: var(--rgba-primary-1);
    font-weight: 600;
    box-shadow: none;    
}
.ifilter_chart_left_nav_btn {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    color: #737B8B;
    line-height: 1.1;
    padding: 4px;
    width: 64px;
    height: 64px;
    font-weight: 400;
    cursor: pointer;
    /* transition: color 100ms ease-in-out 0s, background 100ms ease-in-out 0s; */
}

.ifilter_chart_left_nav_item_text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
    
.ifilter_chart_left_sidebar {
	position: relative;
    height: 100%;
}

.ifilter_chart_left_sidebar_grid {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
}

.ifilter_chart_left_sidebar_media {
    background-color: rgb(255, 255, 255);
    overflow: hidden overlay;
    flex-grow: 1;
}

.ifilter_chart_left_sidebar_section {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.ifilter_chart_left_sidebar_grid_container {
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.ifilter_chart_collapse_icon {
    position: absolute;
    top: calc(50% - 38px);
    height: 76px;
    width: 16px;
    color: rgb(39, 40, 54);
    transition: color 150ms ease-out 0s;
}
.ifilter_sidebar_button {
    position: absolute;
    top: calc(50% - 38px);
    transition: color 150ms ease-out 0s;	
}

.ifilter_chart_collapse_icon {
    left: 100%;
}
.ifilter_chart_collapse_icon_svg:not(.collapsed) {
    transform: rotate(90deg);
}
.ifilter_chart_collapse_icon_svg.collapsed {
    transform: rotate(270deg);
}

.ifilter_chart_collapse_icon_svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -6px;
    margin-top: -6px;
}

.ifilter_chart_collapse_button {
    text-align: inherit;
    padding: 0px;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}

.ifilter_chart_canvas {
	width: 100%;
	text-align: -webkit-center;
	padding-top: 3rem;
    margin-left: 20px;
}

javascript:

var collapseElementList = [].slice.call(document.querySelectorAll('.ifilter_chart_left_nav_btn'));
collapseElementList.map(function (collapseEl) {
	collapseEl.addEventListener("click", function(event){
        let targetElement = event.target || event.srcElement;
        //console.log(targetElement);
        if(targetElement.tagName=="I" || targetElement.tagName=="DIV") {
        	targetElement = targetElement.parentNode;
            //console.log(targetElement);
        }
    	
        let btn_href = targetElement.getAttribute("href");
    	let btn_selector = "";
    	let collapse_id = "";
    	if(btn_href=="#ifilter_tab_bar_config" || btn_href=="#ifilter_tab_bar_filter") {
    		collapse_id = "collapse_bar_sidebar";
    		btn_selector = 'button[data-bs-target="#'+ collapse_id +'"]';
    	}
    	const sidebar_btn = document.querySelector(btn_selector);
    	if(sidebar_btn) {
    		//console.log(sidebar_btn.getAttribute("class"));
    		if(sidebar_btn.getAttribute("class").indexOf("collapsed") > -1) {
    			const bsCollapse = new bootstrap.Collapse(document.querySelector('#'+collapse_id));
    			bsCollapse.toggle();
    		}
    	}
    });
});


var collapseElementList = [].slice.call(document.querySelectorAll('.ifilter_chart_left_sidebar_grid'));
collapseElementList.map(function (collapseEl) {
	// hide.bs.collapse
	const element_selector = "button[data-bs-target=\"#"+ collapseEl.getAttribute("id") +"\"] svg.ifilter_chart_collapse_icon_svg";
	collapseEl.addEventListener("hidden.bs.collapse", function(event){
		$(element_selector).addClass("collapsed");
	});

	// show.bs.collapse
	collapseEl.addEventListener("shown.bs.collapse", function(event){
		$(element_selector).removeClass("collapsed");
	});
});

說明：你的使用情況可能比我簡單很多，我因為有多個圖表要共用 css, 所以程式碼會複雜一點點。

讓三欄式網格式的圖片自動縮小

max-stackoverflow — Mon, 05 Feb 2024 02:24:52 +0000

在套用bootstrap 時, 不小心把 img tag 放到 card 裡, 大多數的情況下, image 是以原圖方式顯示, 縮小的話, 需要自定寬度, 如果設定絕對的寬度, 就需要自義左右造成的空白間隙.

比較方便的做法, 是直接填滿某一個網格, 然後再格子裡設定間距, 做出來的執行效果:

中間神奇的關鍵是 row-cols-md-3, 滿神奇的, 加了這個class , 圖片就自動縮到格子裡, 後面加 g-3 是要讓邊邊不要直接摸到圖片的線條。

bootstrape validation 使用心得

max-stackoverflow — Tue, 26 Sep 2023 09:23:59 +0000

為什麼要使用 validation, 因為這個使用上很直覺, 可以直接跟user講那一個欄位分別是合法,還有各自的錯誤訊息, 也不會因讓畫面有奇怪的彈跳, 使用的效果相較於彈出式的alert/dialog/modal 而言, 比較推薦使用.

在 input tag, 並不是使用 onchange 來觸發每一個輸入的字元, onchange 是在離開input 輸入框時, 才會觸發, 每打一個字, 使用的是事件是 oninput.

在 input 的 parent 加入 .was-validated 就可以觸發讓輸入框有打勾與”必填”的視覺上的效果. 如果是要類似的 ajax 的使用方法, 必需在”完成檢查” 並且沒有錯誤, 才 addClass, 反之要 removeClasss, 就可以有上面的效果.

但是, 如果是要在輸入框有值, 且要顯示為錯誤, 請手動讓正確的 form-control 加入 class .is-valid 有錯的 form-control 加入 .is-invalid .

官方的說明:
https://getbootstrap.com/docs/5.3/forms/validation/

bootstrap 的 tab 開啟特定分頁

max-stackoverflow — Thu, 21 Sep 2023 08:42:41 +0000

由於圖層們在切來切去時, 會保留上一次使用者存取的狀態, 或是由於使用者還沒使用過 tab, 希望tab 在指定的分頁被開啟.

如果是用button 來切換 tab:

可以服用下列的程式來觸發：

function switch_ifilter_tab_to(css_query_string){
  const triggerEl = document.querySelector(css_query_string);
  if(triggerEl!=null) {
    const tabTrigger = new bootstrap.Tab(triggerEl)
    tabTrigger.show();
  }
}
switch_ifilter_tab_to("button[href='#ifilter_tab_bar_filter']");

使用方法:

const css_query_string = '#your_tab_main_id a[href="#your_tab_href"]';
const triggerEl = document.querySelector(css_query_string);
if(triggerEl!=null) {
	const tabTrigger = new bootstrap.Tab(triggerEl)
	tabTrigger.show();
	//bootstrap.Tab.getInstance(triggerEl).show();
}

說明：

your_tab_main_id 是放 tab button id,
your_tab_href 是放 tab div id

tab 的 navigation bar Example Html:

id="reportTab" role="tablist">
    
        href="#report_tab_processing" onclick="open_report_processing();"> Processing 
    
    
         Completed 
    
    
         Failed

參考上面黑體字部份, 只要這2個就可以完成 Triger.

Example Js:

const css_query_string = '#reportTab a[href="#report_tab_'+ report_type +'"]';
const triggerEl = document.querySelector(css_query_string);
if(triggerEl!=null) {
	const tabTrigger = new bootstrap.Tab(triggerEl)
	tabTrigger.show();
}

官方說明文件:
https://getbootstrap.com/docs/5.3/components/navs-tabs/

Left align and right align within div in Bootstrap

max-stackoverflow — Tue, 18 Jul 2023 10:04:52 +0000

想把下面的按鈕們搬到右邊, 但都失敗, 成功後的執行畫面:

解法:
https://getbootstrap.com/docs/5.0/utilities/flex/


  Flex item
  Flex item
  Flex item

直接下 justify-content-end , 沒有效果,

使用 text-right 也失敗:
https://getbootstrap.com/docs/4.0/utilities/text/

Right aligned text on all viewport sizes.

Bootstrap Tabs Example

max-stackoverflow — Tue, 18 Apr 2023 07:41:44 +0000

最近有一個需求, 想做成 wizard 風格的操作界面, 首先是在 google 下 keyword:

bootstrap tabs template

使用下面的範例來修改:
https://colorlib.com/etc/bwiz/colorlib-wizard-30/index.html

實做的結果:

Step 1:

Step 2:

Step 3:

使用的 html:

下方的按鈕們:

使用的 css:

 .form-register .steps {
    margin-bottom: 33px;
    margin-top: 40px
}

.form-register .steps ul {
    display: flex;
    display: -webkit-flex;
    list-style: none;
    padding-left: 0;
    justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center
}

.form-register .steps li,.form-register .steps li.current {
    outline: none;
    -o-outline: none;
    -ms-outline: none;
    -moz-outline: none;
    -webkit-outline: none
}

.form-register .steps li div {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #ccc;
    margin-right: 143px;
    position: relative;
    outline: none
}

.form-register .steps li div::before {
    position: absolute;
    content: "";
    background: #e5e5e5;
    width: 143px;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 100%
}

.form-register .steps li.last div {
    margin-right: 0
}

.form-register .steps li.last div::before {
    content: none
}

.form-register .steps li.current div
,.form-register .steps li.current div:active
,.form-register .steps li.done div::before
,.form-register .steps li.done div
,.form-register .steps li.done div:active {
    background: #3760e5
}

.form-register .steps li .current-info {
    display: none
}

.form-register .steps li .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    font-family: montserrat,sans-serif
}

使用到的 javascript:

這段用來控制按鍵和區塊在切換時的顯示.

function switch_tab_step(table_name, active_at, tab_count) {
	for(let i=1; i<=tab_count; i++){
		$("#"+ table_name +"_nav_"+i).removeClass("current");
		$("#"+ table_name +"_nav_"+i).removeClass("done");
		
		if(i





next 與 previous 的控制:



function your_table_next_1() {
	switch_tab_step('your_table',2,3);
}

function your_table_previous_1() {
	switch_tab_step('your_table',1,3);
}

function your_table_next_2() {
	switch_tab_step('your_table',3,3);
	
	// final step
    // your code here...
}

function your_table_previous_2() {
	switch_tab_step('your_table',2,3);
}







大致上, 這樣就可以做出 wizard 效果.



bootstrap sidebar menut items too long to wrap
max-stackoverflow — Wed, 08 Mar 2023 09:09:15 +0000

如果是選有 icon 的顯示方式, 預設會 wrap 到 icon 下方, 例如:











解法:







.nav-item .nav-link { 
     display: flex;
 }



完整範例:




  
    After school program
    337
  








資料來源:
https://github.com/coreui/coreui-free-bootstrap-admin-template/issues/478



jquery check textbox empty
max-stackoverflow — Wed, 22 Feb 2023 02:09:53 +0000

我有一個登入用的 form, 用 bootstrap 做的, 希望可以檢查 account 欄位是否有填值.



if (inp.val().length > 0) {
    // do something
}




if you want anything more complicated, consider regex or use the validation plugin which takes care of this for you.



在檢查到登入失敗, 或無填值, 有二種處理方式, 一個是彈 modal dialog, 一個是用 danger text, 如果不是太重大的提醒, 應該使用 danger text, 使用方法:



your message here.



我的登入 script:



  let do_signin_flag = true;
  $("#fail-message").html("");
  if($("#account").val().length==0){
    $("#fail-message").html("Account is required.");
    $("#account").focus();
    do_signin_flag=false;
  }







我使用的範例:
https://getbootstrap.com/docs/5.3/examples/sign-in/











How to Set the Value of Input Text Box using jQuery



範例:







how to reset css to default settings
max-stackoverflow — Sun, 25 Mar 2018 12:01:18 +0000
當 css 變的複雜的時候，會繼承到很多奇怪的 css 設定值，造成無法達成預設的效果，我遇到的情況是：
max-width: 100%
但套用這個設定值會讓圖片變小，我想修改成顯示原圖大小，並置右，解法如下：

.carousel .item img {
 float: right;
 max-width: initial;
}

這裡的 carousel 是直接修改 bootstrap 的 sample code.



How to Display Selected Item in Bootstrap Button Dropdown Title
max-stackoverflow — Tue, 27 Feb 2018 08:28:01 +0000
bootstrap 範行：
 class="btn-group">
     class="btn">Please Select From List
     class="btn dropdown-toggle" data-toggle="dropdown">
         class="caret">
    
     class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
        tabindex="-1" href="#">Item I
        tabindex="-1" href="#">Item II
        tabindex="-1" href="#">Item III
        class="divider">
        tabindex="-1" href="#">Other
    


bootstrap v3.3 官方教學：

https://getbootstrap.com/docs/3.3/components/#dropdowns
問題是，下拉式 button ，希望點選了 menu item 可以把選擇的項目，更新回顯用的元件的標題裡，官方提供的不會更新button 的title. 解法如下：

As far as i understood your issue is that you want to change the text of the button with the clicking linked text, if so you can try this one: http://jsbin.com/owuyix/4/edit
 $(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

As per your comment:
this doesn’t work for me when I have lists item 
 populated through ajax call.
so you have to delegate the event to the closest static parent with .on() jQuery method:
 $(function(){

    $(".dropdown-menu").on('click', 'li a', function(){
      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());
   });

});
Here event is delegated to static parent $(".dropdown-menu"), although you can delegate the event to the $(document) too because it is always available.


我服用的 html:

 
 
  
 Android
 iOS
 

 
我服用的 javascript:
$(function(){
 $(".dropdown-menu").on('click', 'li a', function(){
 $(".btn:first-child").html($(this).text()+' ');
 });
});

如果有多組 dropdown list 我是使用：
html:

 
 
  
 Android
 iOS
 

 
javascript:
$(function(){
 $("#dropdownMenu2Item").on('click', 'li a', function(){
 var selText = $(this).text();
 $("#dropdownMenu2:first-child").html(selText+' ');
 });
});
$(function(){
 $("#dropdownMenu1Item").on('click', 'li a', function(){
 var selText = $(this).text();
 $("#dropdownMenu1:first-child").html(selText+' ');
 });
});
 
相關範例：

https://www.bootply.com/64302