bootstrap表單內聯單選(Radio)按鈕混用彈出框

因為開發案子的關係，有需要用到內聯單選，但又需要提示文字說明功能，提示文字說明功能的話是可以考慮用彈出框來收合，但單用像bootstrap內聯單選樣式的樣式又會覺得在手機上面會因為斷行或是面積區塊不明顯，畫面上會亂而不整齊，思考一下原本是想要用bootstrap JavaScript 插件中的 Checkbox / Radio在加上bootstrap按鈕組來將說明另外處理成按鈕組成一個群組，但手機上每個按鈕都要在多掛個說明，就覺得會雞肋(台語叫定戴)，最後討論後就決定在試寫看看可不可行，果其然給我成功了，可以參考混用演示…

body { margin: 55px 5%; }

.s1, .s2, .mix { 
	margin-bottom: 20px ;
	p { margin-bottom: 3px;  font-size: 120%; }
}

.mix { 
	a { padding:5px 10px; width: 100%; display:inline-block; text-decoration:none; color:#333;}
		
	.btn-group { 
				
		label.btn { 
			font-size:15px; 
			background: #eee; 
			min-width:120px;  /* 保護彈出框不因為太小而整個區塊變小 */
			margin: 0px 0px 5px; font-size: 16px;  padding: 0px; 
			float:none;
			
			&.focus, &:focus, &:hover { 
			color:#333; /* 彈出框內文字樣式，不加會變白字 */ }
		} /*/label.btn*/
		
		label.active { 
			a { 
			background: #333; color:#fff; 
			/* 原本因為字白色加入字色彩 */ 
			border: none;
			}
		} /*/label.active*/
		
		& > .btn:first-child:not(:last-child):not(.dropdown-toggle), 
		& > .btn:last-child:not(:first-child),
   		& > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle){ 
			border-radius: 0px;
      			border: 1px #333 solid;
			/* a標籤感應區塊，泛圍設為最外圍 */
		}
    
		.popover:focus, 
		.in:focus, 
		.focus:focus, 
		label.btn { 
			outline: 0px; 
			/*fix popover感應區外框線*/
		} 	    
	} /*/.btn-group > .btn-group*/
	
} /*/.mix*/

body { margin: 55px 5%; }

.s1, .s2, .mix {

margin-bottom: 20px ;

p { margin-bottom: 3px; font-size: 120%; }

}

.mix {

a { padding:5px 10px; width: 100%; display:inline-block; text-decoration:none; color:#333;}

.btn-group {

label.btn {

font-size:15px;

background: #eee;

min-width:120px; /* 保護彈出框不因為太小而整個區塊變小 */

margin: 0px 0px 5px; font-size: 16px; padding: 0px;

float:none;

&.focus, &:focus, &:hover {

color:#333; /* 彈出框內文字樣式，不加會變白字 */ }

} /*/label.btn*/

label.active {

a {

background: #333; color:#fff;

/* 原本因為字白色加入字色彩 */

border: none;

}

} /*/label.active*/

& > .btn:first-child:not(:last-child):not(.dropdown-toggle),

& > .btn:last-child:not(:first-child),

& > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle){

border-radius: 0px;

border: 1px #333 solid;

/* a標籤感應區塊，泛圍設為最外圍 */

}

.popover:focus,

.in:focus,

.focus:focus,

label.btn {

outline: 0px;

/*fix popover感應區外框線*/

}

} /*/.btn-group > .btn-group*/

} /*/.mix*/

備註

– .popover .fade .in就算加了 z-index: 999;點按彈出框後滑鼠滑入另外的按鈕還是會使得按鈕壓在彈出框上面。
bootstrap表單內聯單選(Radio)按鈕混用彈出框-2

– .popover 感應區外框線 .popover:focus .in:focus .focus:focus label.btn 使用 outline: 0px;
bootstrap表單內聯單選(Radio)按鈕混用彈出框-1

– 手機裝置一定要使用 tabindex="0" 與 role="button" ，不然點按時會沒有作用。Bootstrap 點擊並讓彈出框消失說明

標籤雲

備註