[45일] bootstrap (2)

[45일] bootstrap (2) - button

ewok 2022. 9. 29. 15:57

아래 페이지에 다양한 버튼들이 나와있다.

https://www.w3schools.com/bootstrap/bootstrap_buttons.asp

Bootstrap Buttons

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_button.html</title>
    <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>
    <h2>button style</h2>
    <button type="button" class="btn">Basic</button>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
    <hr>

    <a href="#" class="btn btn-info" role="button">Link Button</a>
    <button type="button" class="btn btn-info">Button</button>
    <input type="button" class="btn btn-info" value="Input Button">
    <input type="submit" class="btn btn-info" value="Submit Button">

    <h2>Button size</h2>
    <button type="button" class="btn btn-primary btn-lg">Large</button>
    <button type="button" class="btn btn-primary">Normal</button>
    <button type="button" class="btn btn-primary btn-sm">Small</button>
    <button type="button" class="btn btn-primary btn-xs">XSmall</button>

    <div class="container">
        <h2>Block Level Buttons</h2>
        <button type="button" class="btn btn-primary btn-block">Button 1</button>
        <button type="button" class="btn btn-default btn-block">Button 2</button>
      
        <h2>Large Block Level Buttons</h2>
        <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
        <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>
      
        <h2>Small Block Level Buttons</h2>
        <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
        <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
    </div>

    <h2>Button States</h2>
    <button type="button" class="btn btn-primary">Primary Button</button>
    <button type="button" class="btn btn-primary active">Active Primary</button>
    <button type="button" class="btn btn-primary disabled">Disabled Primary</button>

</body>
</html>