sondmk header
Bootraps3 Web Framworks

Bootstrap : Tooltip Text , Title Text

Post by Goborijung at 2022-08-06 09:10:39 | ID: 1736

<!DOCTYPE html>
<html lang="en">
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>

<div class="container">
  <h3>Tooltip Example</h3>
  <p>The data-placement attribute specifies the tooltip position.</p>
  <ul class="list-inline">
    <li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>



bs : Forms (Form แบบต่างๆ)

Post by Goborijung at 2022-07-26 13:35:12 | ID: 1724

BS : Create 5 Columns

Post by Goborijung at 2021-07-09 23:16:22 | ID: 1277

<link rel="stylesheet" href="" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col col1">Column 1</div>
    <div class="col col2">Column 2</div>
    <div class="col col3">Column 3</div>
    <div class="col col4">Column 4</div>
    <div class="col col5">Column 5</div>

BS3 : CDN (Content Delivery Networks)

Post by Goborijung at 2021-03-15 10:18:05 | ID: 19

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>

BS3 : Dropdowns Menu

Post by Goborijung at 2021-03-15 10:17:50 | ID: 23

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>

BS4 : Img Center หรือ Image Center

Post by Goborijung at 2021-03-27 08:26:39 | ID: 690

>> Bootstrap 4

<img class="img-fluid d-block mx-auto" src="img-name.jpg">

>> Bootstrap 3

<img class="img-responsive center-block" src="img-name.jpg">

BS4 : .btn-xs

Post by Goborijung at 2021-05-22 09:04:45 | ID: 1216

// Add Class btn-xs to Bootstrap 4

.btn-group-xs>.btn, .btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }

BS4 : Button Full-Width (.btn-block)

Post by Goborijung at 2021-03-26 10:14:45 | ID: 1059

Button Full Width

<button class="btn btn-sm btn-primary btn-block"><i class="fa fa-shopping-cart"></i> Order</button> ref: Keyword : Block Level Buttons

BS4 : Vertical Align Middle , Vertical Align Center

Post by Goborijung at 2021-03-15 10:17:11 | ID: 369

// Bootstrap

<th class='align-middle'>No</th>

// CSS

/* ถ้าเขียนด้วย CSS */ vertical-align: middle;

BS4 : Collapse

Post by Goborijung at 2021-03-15 10:20:30 | ID: 160

<button type="button" data-toggle="collapse" data-target="#demo2">Collapsible</button>
<div id="demo2" class="collapse">
	Lorem ipsum dolor text....

<a href="#demo" class="text-left btn btn-sm btn-warning" data-toggle="collapse" style="width: 100%"><i class="fa fa-user"></i> Admin</a>
<div id="demo" class="collapse" style="border: dotted 1px #fff;">
	Lorem ipsum dolor text....






Download SourceCode

copyAllright © 2016