2016年12月5日 星期一

bootstrap button source code sample



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        .row div {
            border: 1px solid #eee;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="firstName">First name</label>
                <input type="text" class="form-control" id="firstName">
            </div>
            <div class="form-group">
                <label for="lastName">Last name</label>
                <input type="text" class="form-control" id="lastName">
            </div>
            <div class="form-group">
                <label for="myFile">Upload</label>
                <input type="file" class="form-control-file" id="myFile">
            </div>
            <div class="form-group">
                <legend>Please select</legend>
                <div class="form-check-inline">
                    <label for="radio1">Yes</label>
                    <input type="radio" class="form-control-input" id="radio1" name="radios" value="Yes">
                </div>
                <div class="form-check-inline">
                    <label for="radio2">No</label>
                    <input type="radio" class="form-control-input" id="radio2" value="Yes" name="radios">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
            <div class="btn-group">
                <a href="#" class="btn btn-warning">1</a>
                <a href="#" class="btn btn-primary">2</a>
                <a href="#" class="btn btn-danger">3</a>
                <a href="#" class="btn btn-success">4</a>
            </div>
            <div class="btn btn-outline-info">Click me</div>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-primary active">
                    <input type="checkbox" checked>checkbox 1
                </label>
                <label class="btn btn-primary">
                    <input type="checkbox">checkbox 2
                </label>
                <label class="btn btn-primary">
                    <input type="checkbox">checkbox 3
                </label>
            </div>
        </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
</body>
</html>
=============================================================

Button Colors

      

Button Sizes

  

Active/Disabled Buttons

  

Button Groups



Button Classes

The classes below can be used to style any <a>, <button>, or <input> element:
ClassDescriptionExample
.btnAdds basic styling to any buttonTry it
.btn-defaultIndicates a default/standard buttonTry it
.btn-primaryProvides extra visual weight and identifies the primary action in a set of buttonsTry it
.btn-successIndicates a successful or positive actionTry it
.btn-infoContextual button for informational alert messagesTry it
.btn-warningIndicates caution should be taken with this actionTry it
.btn-dangerIndicates a dangerous or potentially negative actionTry it
.btn-linkMakes a button look like a link (will still have button behavior)Try it
.btn-lgMakes a large buttonTry it
.btn-smMakes a small buttonTry it
.btn-xsMakes an extra small buttonTry it
.btn-blockMakes a block-level button (spans the full width of the parent element)Try it
.activeMakes the button appear pressedTry it
.disabledMakes the button disabledTry it
.navbar-btnVertically aligns a button inside a navbar

Button Group Classes

The classes below can be used to style any <a>, <button>, or <input> element:
ClassDescriptionExample
.btn-groupGroups buttons together on a single lineTry it
.btn-group-justifiedMakes a group of buttons span the entire width of the screenTry it
.btn-group-lgLarge button group (makes all buttons in a button group larger - increased font-size and padding)Try it
.btn-group-smSmall button group (makes all buttons in a button group smaller)Try it
.btn-group-xsExtra small button group (makes all buttons in a button group extra small)Try it
.btn-group-verticalMakes a button group appear vertically stacked























沒有留言:

張貼留言