@manhnguyenv

Welcome to my blog!

Bootstrap & Bootbox

July 9, 2018 22:48

Bootbox (edit)

https://github.com/makeusabrew/bootbox/

http://bootboxjs.com

Các ví dụ

http://bootboxjs.com/examples.html

https://www.jquery-az.com/bootstrap-alert-with-5-online-demos/

https://www.mindstick.com/Articles/1563/use-of-bootbox-js-in-bootstrap-framework

Confirm Dialog

https://www.jquery-az.com/javascript/demo.php?ex=151.1_4

jQuery Form Validation (HAY HAY HAY)

https://www.jquery-az.com/jquery-form-validation-with-bootstrap-4-examples/

https://www.jquery-az.com/jquery/demo.php?ex=89.0_4

https://www.jquery-az.com/jquery/demo.php?ex=89.0_3

https://www.jquery-az.com/jquery/demo.php?ex=89.0_2

https://www.jquery-az.com/jquery/demo.php?ex=89.0_1

MetisMenu (HAY HAY HAY)

http://mm.onokumus.com

https://github.com/onokumus/metisMenu

https://www.jquery-az.com/boots/demo.php?ex=41.0_1

Free themes

https://www.jquery-az.com/free-themes/

Awesome Bootstrap 3 Sidebar Navigation

https://codepen.io/j_holtslander/pen/XmpMEp

https://www.jquery-az.com/boots/demo.php?ex=68.0_1

https://www.jquery-az.com/bootstrap-sidebar-navigation-component-live-demo/

Bootstrap Select

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

Bootstrap Table

bootstrap-table.min.js

Ví dụ có radio button: https://www.jquery-az.com/boots/demo.php?ex=19.0_6

Ví dụ có checkbox: https://www.jquery-az.com/boots/demo.php?ex=19.0_7

Bootstrap Responsive Table (HAY)

https://www.jquery-az.com/jquery/demo.php?ex=67.0_1

https://www.jquery-az.com/jquery/js/responsive-table/js.js

Bootstrap Tabs

https://www.jquery-az.com/bootstrap-tabs-with-default-and-customized-css-4-online-demos/

https://www.jquery-az.com/boots/demo.php?ex=46.0_2

BOOTSTRAP 3 Tutorials

HTML TABLE

https://www.jquery-az.com/bootstrap-table-with-6-demos-and-free-code/

HTML INPUT TYPE RADIO

https://www.jquery-az.com/boots/demo.php?ex=5.0_4

https://www.jquery-az.com/boots/demo.php?ex=5.0_2 (inline)

https://www.jquery-az.com/boots/demo.php?ex=34.0_7 (switch | toggle)

HTML INPUT TYPE CHECKBOX

https://www.jquery-az.com/checkbox-and-radio-button-as-bootstrap-switches-7-demos/

https://www.jquery-az.com/how-to-create-and-style-html-checkbox-with-pure-css-and-a-plug-in/

https://www.jquery-az.com/jquery/demo.php?ex=44.0_1 (checkbox switch)

https://www.jquery-az.com/wwh/demo.php?ex=23.0_4

<script>
$(document).ready(function(){
    $("#demochecked").on("change", function(){
        $("#chkshowhide").toggle(this.checked);
    });
});
</script>

<div class="divcls"><input type="checkbox" name="mycheckbox" checked id="demochecked"/>Show/Hide HTML Table</div>
<table class="demotbl" id="chkshowhide">...</table>

HTML INPUT TYPE SELECT OPTION

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

https://www.jquery-az.com/bootstrap-select-5-beautiful-styles/

Bootstrap Input Type File

https://www.jquery-az.com/bootstrap-jquery-input-type-file-upload-buttons-and-script/

Bootstrap Button with icon

Using icons in buttons of Bootstrap

https://www.jquery-az.com/bootstrap-button-9-demos-of-custom-color-size-dropdown-navbar-and-more/

Bootstrap based loading button with icon

https://www.jquery-az.com/creating-bootstrap-based-loading-buttons-with-four-examples/

Image preview

https://www.jquery-az.com/bootstrap-jquery-image-upload-preview-plug-in/

Dropdown Checkboxes

https://www.jquery-az.com/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery/

https://www.jquery-az.com/turn-a-bootstrap-dropdown-into-multi-select-button-by-jquery-dropdown-checkboxes/

https://www.jquery-az.com/jquery/demo.php?ex=152.0_1

https://www.jquery-az.com/jquery/js/dropdownCheckboxes/dropdownCheckboxes.min.js

Treeview with checkboxes

Treeview with checkboxes

https://www.jquery-az.com/jquery-treeview-with-checkboxes-2-examples-with-bootstrap/

HTML TEXT

jQuery Plugin To Auto Expand/Collapse Content Based On Screen Size - autoexpend

ina.autoexpand.js

https://www.jqueryscript.net/text/jQuery-Plugin-To-Auto-Expand-Collapse-Content-Based-On-Screen-Size-autoexpend.html

https://www.jquery-az.com/a-responsive-text-auto-expend-plug-in-by-using-jquerybootstrap/

HTML TEXTAREA

Textarea auto-expand

Automatically grow and shrink textareas with the content as you type.

https://github.com/ultimatedelman/autogrow

 

Bootstrap 4

January 23, 2018 14:29

Bootstrap 4 

<!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/

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<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>

Categories

Recent posts