Depot43-Unterlagen

HTML Elemente

            
            

<!doctype html>
<html lang="de">
<head>
    <meta charset=utf-8>
    <title>Bootstrap CDN</title>

    <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.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    
    </style>

</head>
<body>

	<div class="alert alert-success">
		<strong>Success! (Erfolg)</strong> Zeigt eine positive Aktion an.
	</div>

	<div class="alert alert-info">
		<strong>Info! (Zur Information)</strong> Zeigt eine informative Aktion an.
	</div>

	<div class="alert alert-warning">
		<strong>Warning! (Warnmeldung)</strong> Zeigt eine Warnung an, die beachtet werden sollte.
	</div>

	<div class="alert alert-danger">
		<strong>Danger! (Gefahr)</strong> Zeigt eine Aktion an, die gefährlich sein könnte.
	</div> 

</body>
</html>


 

            

Anregung: Erstelle eine neue CSS-Regel für die Klasse .alert , verändere Grösse

.alert {
max-width:300px;
}

und Position der Alert-Fenster

.alert-success {
position:absolute;
right:200px;top:30px;
}