HTML5+CSS3【マルチデバイス】―Twitter Bootstrap０７

HTML5 授業



Forms



Default styles

ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Twitter Bootstrap の導入</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<form>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>


ブラウザで表示【 Chrome 】







Search form

ソースコード【 HTML 】

<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>


ブラウザで表示【 Chrome 】








Inline form

ソースコード【 HTML 】

<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>


ブラウザで表示【 Chrome 】







Horizontal form

ソースコード【 HTML 】

<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>


ブラウザで表示【 Chrome 】






Inputs

ソースコード【 HTML 】

<input type="text" placeholder="Text input">

ブラウザで表示【 Chrome 】