Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of Bootstrap 3 Dropdown Methods</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style type="text/css"> .container{position:relative; height:600px;} .bs-example{ position:absolute; top: 0px; right:10px; } .footer{background-color:grey; width:100%; height:80px; position:absolute; top:600px; } form{ } a{color:white;} </style> </head> <body class="container"> <div class="footer"> <div class="bs-example"> <div class="dropup"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <form action="send.php" method="post" class="dropdown-menu" > <label for="email">Váš e-mail:</label> <p> <input name="email" id="email" type="text"> </p> <label for="dotaz">Dotaz:</label> <p> <textarea name="dotaz" id="dotaz" cols="22" rows="3"></textarea> </p> <input type="submit" value="Odeslat"> </form> </div> </div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
form.dropdown-menu { left: auto; /* left má pri smere písania textu zľava doprava váčšiu prioritu, treba nastaviť pôvodnú hodnotu */ right: 0; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>