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>

<textarea rows="3"></textarea>
<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 】






Checkboxes and radios

ソースコード【 HTML 】

<label class="checkbox">
<input type="checkbox" value="">
Option one is this and that―be sure to include why it's great
</label>
 
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that―be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>


ブラウザで表示【 Chrome 】







Selects

ソースコード【 HTML 】

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
 
<select multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>


ブラウザで表示【 Chrome 】






Control sizing

ソースコード【 HTML 】

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">


ブラウザで表示【 Chrome 】