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">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<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>
  </ul>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>

</body>
</html>
bs : Forms (Form แบบต่างๆ)

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

https://www.w3schools.com/bootstrap/bootstrap_forms.asp
BS : Create 5 Columns

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" 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>
  </div>
</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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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>
  </ul>
</div>
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: https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp
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....
</div>

<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....
</div>
123>>>
Programming

Framework

Library

Lernnings

เครื่องมือพัฒนาเว็บ

Computer Network

Computer Security

การออกแบบและพัฒนาเว็บไซต์

Download Tools

Download SourceCode

Operating System

Webs Hacking

copyAllright © 2016 soundmk.com