Kurs_Less_Bootstrap/bootstrapbsp/buttons.html at master · qotsa2002/Kurs_Less_Bootstrap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap Buttons und Farben</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
    <div class="container">
        <h1>Buttons und Farben</h1>
        <p>Betrachten wir die Buttons...</p>
        <p><button class="btn btn-default">Ein Default-Button</button> <button class="btn btn-primary text-uppercase">Ein Primary-Button</button></p>
        <p><button class="btn btn-info">Ein Info-Button</button> <button class="btn btn-success">Ein Success-Button</button></p>
        <p><button class="btn btn-warning">Ein Warning-Button</button> <button class="btn btn-danger">Ein Danger-Button</button></p>             <p><input type="button" class="btn btn-default" value="Input-Button">
            <a href="#" class="btn">Link als Btn-Button</a>
            <a href="#" class="btn btn-default">Link als Default-Button</a>
        </p>
        <p>
            <button class="btn btn-primary">Ein Primary-Button</button>
            <button class="btn btn-primary btn-sm">Ein SM-Primary-Button</button>
            <button class="btn btn-primary btn-lg">Ein LG-Primary-Button</button>
        </p>
        <p class="bg-danger">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum adipisci eveniet corporis libero pariatur eum.</p>
        <p class="bg-success text-success">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum adipisci eveniet corporis libero pariatur eum.</p>
        <p class="text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum adipisci eveniet corporis libero pariatur eum.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum adipisci eveniet corporis libero pariatur eum.</p>
        <p class="text-uppercase">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum adipisci eveniet corporis libero pariatur eum.</p>
    </div>
</body>
</html>