4.1 HTMLとBootstrap cssエッセンス

38364 ワード
ブックストリーム
1、HTML
2、Bootstrapを理解する
HTML要素は、ブラウザに、コンテンツをどのように表示するかについての情報を提供しないときに、どのようなタイプのコンテンツを表現するかを教えます.コンテンツの表示方法はCSSが提供する.
本書には、AngularJSの特性とBootstrapのスタイルを表示するのに十分な情報しか含まれていません.基本bootstrapの特性を示すには、angularjsフォルダの下にbootstrapを新規作成します.html 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Bootstrap Examples</title> 
<link href="bootstrap.css" rel="stylesheet" /> 
<link href="bootstrap-theme.css" rel="stylesheet" /> 
</head> 
<body> 
<div class="panel"> 
<h3 class="panel-heading">Button Styles</h3> 
<button class="btn">Basic Button</button> 
<button class="btn btn-primary">Primary</button> 
<button class="btn btn-success">Success</button> 
<button class="btn btn-warning">Warning</button> 
<button class="btn btn-info">Info</button> 
<button class="btn btn-danger">Danger</button> 
</div> 
<div class="well"> 
<h3 class="panel-heading">Button Sizes</h3> 
<button class="btn btn-large btn-success">Large Success</button> 
<button class="btn btn-warning">Standard Warning</button> 
<button class="btn btn-small btn-danger">Small Danger</button> 
</div> 
<div class="well"> 
<h3 class="panel-heading">Block Buttons</h3> 
<button class="btn btn-block btn-large btn-success">Large Block Success</button> 
<button class="btn btn-block btn-warning">Standard Block Warning</button> 
<button class="btn btn-block btn-small btn-info">Small Block Info</button> 
</div> 
</body> 
</html>
2.1、基本的なBootstrap classesを適用する
Bootstrapスタイルは、classプロパティで適用されます.
<div class="panel">
著者らはclassの属性をpanelとし,Bootstrapによって定義された複数のCSS classesのうちの1つである.ここには3つの基本スタイルclassesがあります.
Bootstrap Class
Description
panel
フィレットボーダーのpanel.パネルにはヘッドとfooterがあります
panel-heading
パネルのheadingを作成する
btn
buttonを作成
well
Inset効果を使用して要素を整理する
ヒント:すべてのBootstrapスタイルでclassプロパティを使用する必要はありません.h 1-h 6フォント、スタイルを自動的に適用します.
2.1.1、スタイルコンテキストの修正
Bootstrapはstyle context classesのセットを定義した.これらのclassesは基本的なBootstrapスタイルclass,hyphen,primary,success,waring,info,dangerと組み合わせて使用される.
<button class="btn btn-primary">Primary</button>
コンテキストclassesは、button要素にbtnもbtn-primary classesもあるため、基本classに適用する必要があります.コンテキストclassを使用する必要はありません.彼らはオプションです.
2.1.2、寸法修正
sizeを使用してclassを変更することで、要素を変更できます.彼らは基本的なclass名、hyphen、lg、smなどと一緒に使っています.
<button class="btn btn-lgbtn-success">Large Success</button>
btn-block classを適用してbuttonを作成することができます.使用可能な垂直空間充填があります.
<button class="btn btn-blockbtn-lg btn-success">Large Block Success</button>
2.2、TableのスタイルにBootstrapを使う
Bootstrap Class
description
table
table要素とその内容のスタイルを生成
table-striped
alternate-rowの適用
table-bordered
すべての行と列に枠線を適用
table-hover
マウスhovers overがテーブルの行にある場合、異なるスタイルが表示されます.
table-condensed
tableのスペースを減らして、よりコンパクトなレイアウトを作成します.
これらのclassesはすべてtable要素に直接適用されます.
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Bootstrap Examples</title> 
<link href="bootstrap.css" rel="stylesheet" /> 
<link href="bootstrap-theme.css" rel="stylesheet" /> 
</head> 
<body> 
<div class="panel"> 
<h3 class="panel-heading">Standard Table with Context</h3> 
<table class="table"> 
<thead> 
<tr><th>Country</th><th>Capital City</th></tr> 
</thead> 
<tr class="success"><td>United Kingdom</td><td>London</td></tr> 
<tr class="danger"><td>France</td><td>Paris</td></tr> 
<tr><td>Spain</td><td class="warning">Madrid</td></tr> 
</table> 
</div> 
<div class="panel"> 
<h3 class="panel-heading">Striped, Bordered and Highlighted Table</h3> 
<table class="table table-striped table-bordered table-hover"> 
<thead> 
<tr><th>Country</th><th>Capital City</th></tr> 
</thead> 
<tr><td>United Kingdom</td><td>London</td></tr> 
<tr><td>France</td><td>Paris</td></tr> 
<tr><td>Spain</td><td>Madrid</td></tr> 
</table> 
</div> 
</body> 
</html>
2.2.1、適切なTable構造を確保する
著者らはthead要素を用いたことに注意してください.ブラウザはtable要素の下の最初のtr要素をtheadに与えます.
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Bootstrap Examples</title> 
<link href="bootstrap.css" rel="stylesheet" /> 
<link href="bootstrap-theme.css" rel="stylesheet" /> 
</head> 
<body> 
<div class="panel"> 
<h3 class="panel-heading">Striped, Bordered and Highlighted Table</h3> 
<table class="table table-striped table-bordered table-hover"> 
<tr><th>Country</th><th>Capital City</th></tr> 
<tr><td>United Kingdom</td><td>London</td></tr> 
<tr><td>France</td><td>Paris</td></tr> 
<tr><td>Spain</td><td>Madrid</td></tr> 
</table> 
</div> 
</body> 
</html>
この例にはthead要素がありません.これは、header rowが追加ブラウザによってtbody要素に自動的に作成されることを意味します.
2.3.Bootstrapを使用してフォームを作成する
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Bootstrap Examples</title> 
<link href="bootstrap.css" rel="stylesheet" /> 
<link href="bootstrap-theme.css" rel="stylesheet" /> 
</head> 
<body> 
<div class="panel"> 
<h3 class="panel-header"> 
Form Elements 
</h3> 
Figure 4-5. The effect of combining header and body rows in a table 
CHAPTer 4 ■HTML And BooTSTrAPCSS PrIMer 
68 
<div class="form-group"> 
<label>Name:</label> 
<input name="name" class="form-control" /> 
</div> 
<div class="form-group"> 
<label>Email:</label> 
<input name="email" class="form-control" /> 
</div> 
<div class="radio"> 
<label> 
<input type="radio" name="junkmail" value="yes" checked /> 
Yes, send me endless junk mail 
</label> 
</div> 
<div class="radio"> 
<label> 
<input type="radio" name="junkmail" value="no" /> 
No, I never want to hear from you again 
</label> 
</div> 
<div class="checkbox"> 
<label> 
<input type="checkbox" /> 
I agree to the terms and conditions. 
</label> 
</div> 
<input type="button" class="btn btn-primary" value="Subscribe" /> 
</div> 
</body> 
</html>
基本的なフォームスタイルは、labelとinputを含むdiv要素にform-group classを使用することによって適用されます.
<div class="form-group"> 
<label>Email:</label> 
<input name="email" class="form-control" /> 
</div>
Bootstrapスタイル、labelはinput要素の上に表示され、input要素は100%水平の空きスペースを持っています.
ヒント:label要素は記述テキストを含むために使用され、input要素は他のタイプのinput要素とは異なる構造を持っています.
2.4.Bootstrapを使用してGridsを作成する
Bootstrapが提供するスタイルclassesは、異なる種類のgridレイアウトを作成し、応答レイアウトに使用することができます.
Bootstrap Examples

Grid Layout

1
1
2
2
6
3
4
5
6
6
11
1
12

2.4.1、Table VS Grids
Tableはフラットなデータに用いられ、gridでコンテンツをレイアウトするのによく用いられる.一般的に、gridのコンテンツにCSSレイアウトを使用する必要があります.tableは現在のコンテンツを分離する原則に反しているからです.CSS 3はgridレイアウトを含むが、主流ブラウザでは実装されていない.最も良いオプションは、BootstrapのようなCSSフレームワークを使用することです.
著者自身のプロジェクトでは,クライアントとweb appがCSSフレームワークを受け入れないため,最新のCSS 3レイアウトをサポートしない場合がある.この場合,著者らはtable要素を用いてgridレイアウトを作成する.
2.4.2
Bootstrap gridレイアウトシステムは、使いやすいです.div要素にrow classを適用して、カラムを指定できます.彼はdiv要素に含まれるコンテンツのgridレイアウトを構成します.
col-xsを使用して、カラムのサブ要素がどのくらいのカラムを占めるかを指定できます.
Bootstrapはrowの要素にスタイルを適用しないので、著者らはstyle要素を使用してカスタムCSSスタイルを作成し、背景色、行間の間隔を設定し、枠線を追加します.

2.4.3応答Gridsの作成
応答式Gridsは、ブラウザウィンドウのサイズに基づいてレイアウトを調整します.応答式gridsは、主にモバイルデバイスとデスクトップデバイスが同じコンテンツを表示することを許可し、より良い画面の空き容量がある.レスポンスgridを作成するには、cellsごとのcol-*classを次の表のclassesで置き換えます.
Bootstrap Class
Description
Col-sm-*
画面幅が768ピクセルより大きい場合、Grid cellは水平に表示されます
Col-md-*
スクリーン幅が940ピクセルより大きい場合、Grid cellは水平に表示されます
Col-lg-*
スクリーン幅が1170ピクセルより大きい場合、Grid cellは水平に表示されます
スクリーン幅がclassでサポートされている幅より低い場合、grid rowのcellは水平ではなく垂直に配置されます.
Bootstrap Examples

Grid Layout

3
4
5
6
6
11
1

私はcol-sm-*を使って、前のcol-xs*を置き換えます.ブラウザフォームの幅が768ピクセルより大きい場合、水平に並べ、小さい場合は垂直に並べます.
ヒント:著者がmeta要素を追加したことに注意してください.この要素は、モバイルデバイスブラウザに、実際のサイズでコンテンツを表示するように伝えます.meta要素がなければ、多くのモバイルデバイスブラウザがズーム形式でデスクトップ版のページを表示し、ユーザーは詳細を見るために拡大する必要があります.簡単に言えば、モバイルデバイスがアクセスしている場合は、meta要素を追加する必要があります.著者のThe Definitive Guide to HTML 5という本を見て、詳しい説明があります.
 
 
C#における汎用制約(where)は何ですか?
ASPを解読する.NET 5&MVC 6シリーズチュートリアル(10):ControllerとAction