BS4 : Custom Form Style

Post by Goborijung at 2020-09-17 13:47:09 | ID: 809

<?php
	/* Page Setup */
	$tblHight = 210;
?>

<style>
	body{ font-size: 14px; }
	table{ font-size: 12px; }
	.table-responsive { overflow-y: auto; height: <?=$tblHight?>px; }
	.table-responsive thead th {
		position: sticky;
		top: 0;
		background-color: blue;
		color:white;
	}
	.table td {
    padding: 2 2px;
	}
	.table th { padding: .25rem; }
	.form-control-sm{ height: calc(1em + .2rem + 2px);  }
	.input-group-sm>.form-control:not(textarea) {
		height: calc(1.3em + .5rem + 2px);
	}
	td { white-space: nowrap; }
</style>

BS4 : Dropdowns Outhers

Post by Goborijung at 2021-03-15 10:18:36 | ID: 24

<li class="divider"></li>  // ใช้เป็นเส้นกั้นแถว
<li class="dropdown-header">Dropdown header 1</li> // แสดงส่วนหัวของแต่ละหมวด
<li class="disabled"><a href="#">CSS</a></li> // ปิดการทำงานแถว
<li class="active"><a href="#">HTML</a></li> // แสดงสถานะเลือกอยู่

BS4 : Fixed Header Top , table fixed header top , header top

Post by Goborijung at 2021-01-19 10:23:02 | ID: 980

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>
	.table-responsive { overflow-y: auto; height: 425px; }
	.table-responsive thead th {
		position: sticky;
		top: 0;
		background-color: blue;
	}
	td { white-space: nowrap; }
</style>

<div class='table-responsive'>
	<table class='table table-bordered table-striped table-hover'>
		
		<thead style='background-color:blue;'>
			<tr>
				<?php
			 		// HeaderDetails
					$arrHeaderDetail = array('#','CreatedDate','Code');
					foreach($arrHeaderDetail as $val){ echo "<th>".$val."</th>"; }
				?>
			</tr>
		</thead>

		<tbody id='myTable'>
			<tr>
				<td class='text-center bg-dark text-white'> col1 </td>
				<td class='text-center bg-dark text-white'> col2 </td>
				<td class='text-center bg-dark text-white'> col3 </td>
			</tr>
		</tbody>

	</table>
</div><!-- End Table Responsive -->

BS4 : Flex

Post by Goborijung at 2020-06-17 15:49:15 | ID: 623

https://www.w3schools.com/bootstrap4/bootstrap_flex.asp

bs4 : Hidden-xs

Post by Goborijung at 2021-03-15 10:20:07 | ID: 529

d-none d-sm-block

BS4 : NAV

Post by Goborijung at 2021-03-15 10:16:33 | ID: 514

NAv - Collaps
NAV - Dropdown Menu
NAV - From
NAV - Sticky

BS4 : การใช้ col-offset ของ Bootstraps

Post by Goborijung at 2021-03-15 10:19:33 | ID: 22

เช่น Full columns = 12
เราต้องการแค่ 8 columns ก็จะได้ 12-8 = 4
ก็จะเหลือ 4 columns ที่ไม่ได้ใช้ ให้เอาไปหารด้วย 2
จะได้ 4/2 = 2 ก็จะเขียนได้ดังนี้ <div class="col-md-8 col-md-offset-2"></div>โอเคร...จบนะ!

BS4 : การใช้ col + offset bs4

Post by Goborijung at 2020-06-08 10:52:02 | ID: 421

การใช้ col + offset bs4

Example

// ซ้ายว่าง 3 | ตรงกลาง 6 | ขวาว่าง 3
col-sm-6 offset-sm-3

// ซ้ายว่าง 6 | ขวา 6
col-sm-6 ml-sm-auto

// ซ้าย 6 | ขวาว่าง 6
col-sm-6 mr-sm-auto

Font Awesome Icon

Post by Goborijung at 2018-12-24 13:12:55 | ID: 25

>> Font Awesome 5
https://www.w3schools.com/icons/fontawesome5_intro.asp

https://fontawesome.com/v4.7.0/icons/
https://www.w3schools.com/icons/fontawesome_icons_brand.asp
http://khan.github.io/Font-Awesome/icons/

Font Awesome Icon แนะนำ

Post by Goborijung at 2018-12-24 13:19:07 | ID: 26

 fa-times  fa-pencil  fa-check  fa-eye  fa-registered  fa-search  fa-flag  fa-info  fa-trash  fa-trash-o  fa-lock
 fa-unlock  fa-unlock-alt  fa-user  fa-user-plus  fa-wrench  fa-bookmark  fa-lightbulb-o