Bootstrap & Bootbox

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 4</title>
    <style>
        html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
        *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
...
</body>
</html>

Bootstrap 4 - Forms

Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

https://v4-alpha.getbootstrap.com/components/forms/

Bootstrap 4 - Modal

https://v4-alpha.getbootstrap.com/components/modal/

Bootstrap 4 - DropDowns

https://v4-alpha.getbootstrap.com/components/dropdowns/

Bootstrap Select

<div class="selectWrapper">
    <select>
        <option>Lorem</option>
        <option>Parturient</option>
        <option>Euismod</option>
    </select>
</div>

.selectWrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid #bbb;
    border-radius: 2px;
    background:#FFFFFF url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%2300AEA9%22%2F%3E%3C%2Fsvg%3E') right 13px center no-repeat;
}

    .selectWrapper select {
        padding: 12px 40px 12px 20px;
        font-size: 18px;
        line-height: 18px;
        width: 100%;
        border: none;
        box-shadow: none;
        background: transparent;
        background-image: none;
        -webkit-appearance: none;
        outline: none;
        cursor: pointer;
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: ellipsis;
    }

Bootstrap-Select

Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements.

https://silviomoreto.github.io/bootstrap-select/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

Bootstrap 3

<!DOCTYPE html>
<html>
    <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <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.2.1/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
             <h2>Dropdowns</h2>
             <p>The .dropdown class is used to indicate a dropdown menu.</p>
             <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
             <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p> 
             <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>
        </div>
    </body>
</html>

Tags: Bootstrap 4
Categories: Bootstrap 4
comment

@manhng

Bootstrap & Bootbox

Bootbox (edit)

Các ví dụ

jQuery Form Validation (HAY HAY HAY)

MetisMenu (HAY HAY HAY)

Free themes

Awesome Bootstrap 3 Sidebar Navigation

Bootstrap Select

Bootstrap Table

Bootstrap Responsive Table (HAY)

Bootstrap Tabs

BOOTSTRAP 3 Tutorials

Bootstrap 3 Tutorials

HTML TABLE

HTML INPUT TYPE RADIO

HTML INPUT TYPE CHECKBOX

HTML INPUT TYPE SELECT OPTION

Bootstrap Input Type File

Bootstrap Button with icon

Bootstrap based loading button with icon

Image preview

Dropdown Checkboxes

Treeview with checkboxes

Treeview with checkboxes

HTML TEXT

HTML TEXTAREA

Bootstrap 4

Bootstrap 4

Bootstrap 4 - Forms

Bootstrap 4 - Modal

Bootstrap 4 - DropDowns

Bootstrap Select

Bootstrap-Select

Bootstrap 3

Recent posts

@manhng

Bootstrap & Bootbox

Bootbox (edit)

Các ví dụ

jQuery Form Validation (HAY HAY HAY)

MetisMenu (HAY HAY HAY)

Free themes

Awesome Bootstrap 3 Sidebar Navigation

Bootstrap Select

Bootstrap Table

Bootstrap Responsive Table (HAY)

Bootstrap Tabs

BOOTSTRAP 3 Tutorials

Bootstrap 3 Tutorials

HTML TABLE

HTML INPUT TYPE RADIO

HTML INPUT TYPE CHECKBOX

HTML INPUT TYPE SELECT OPTION

Bootstrap Input Type File

Bootstrap Button with icon

Bootstrap based loading button with icon

Image preview

Dropdown Checkboxes

Treeview with checkboxes

Treeview with checkboxes

HTML TEXT

HTML TEXTAREA

Bootstrap 4

Bootstrap 4

Bootstrap 4 - Forms

Bootstrap 4 - Modal

Bootstrap 4 - DropDowns

Bootstrap Select

Bootstrap-Select

Bootstrap 3

Categories

Recent posts

Popular tags