Javaコンビネーションコラム

列の組み合わせ

列の組み合わせの簡単な理解は、列をマージする数を変更することです（原則：列の総数は12を超えることはできず、12を超えると、自動的に次の行に切り替わります）。これは、テーブルのcolspan属性にいくらか似ています。

<div class="container">
    <div class="row">
        <div class="col-md-4">4列</div>
        <div class="col-md-8">8列</div>
    </div>
    <div class="row">
        <div class="col-md-2">2列</div>
        <div class="col-md-10">10列</div>
    </div>
</div>

列オフセット

2つの隣接する列を近づけたくないが、マージンやその他の技術的手段を使用したくない場合。このとき、列オフセット機能を使用して実現できます。列オフセットの使用も非常に簡単です。列要素にクラス名「col-md-offset-*」（アスタリスクはオフセットする列の組み合わせの数を表します）を追加するだけで、このクラス名の列は次のようになります。右にオフセットします。たとえば、column要素に「col-md-offset-8」を追加すると、列が8列の幅だけ右に移動することを意味します（列とオフセット列の総数が12を超えないようにしてください。超えない場合、列は壊れます|折り返します表示）。

<div class="container">
    <div class="row">
        <div class="col-md-1">1列</div>
        <div class="col-md-1">2列</div>
        <div class="col-md-1 col-md-offset-8">11列</div>
        <div class="col-md-1">12列</div>
    </div>
</div>

列の並べ替え

列の並べ替えは、実際には列の方向を変更すること、つまり、左右のフローティングを変更し、フローティング距離を設定することです。Bootstrapフレームワークのグリッドシステムでは、クラス名col-md-push-およびcol-md-pull-が追加されます（アスタリスクは移動された列の組み合わせの数を表します）。前方に引いて後方に押します。

<div class="container">
    <div class="row">
        <div class="col-md-1 col-md-push-10">1列</div>
        <div class="col-md-1 col-md-pull-1">2列</div>    
    </div>
</div>

列のネスト

Bootstrapフレームワークのグリッドシステムは、列のネストもサポートしています。1つ以上の行コンテナーを列に追加してから、この行コンテナーに列を挿入できます。

<div class="container">
    <div class="row">
        <div class="col-md-2">
            我的里面嵌套了一个网格
            <div class="row">
                <div class="col-md-9">9</div>
                <div class="col-md-3">3</div>
            </div>
        </div>
        <div class="col-md-10">我的里面嵌套了一个网格
            <div class="row">
                <div class="col-md-10">10</div>
                <div class="col-md-2">2</div>
            </div>
        </div>              
    </div>
</div>

共通のスタイル

組版

題名

Bootstrapは通常のHTMLページと同じです。タイトルの定義は<h1>から<h6>までのタグを使用することですが、Bootstrapはデフォルトのスタイルをカバーし、それを使用してすべてのブラウザーで同じ効果を表示します。非見出し要素と見出しが同じスタイルを使用するようにするために、.h1から.h6までの6つのクラス名も具体的に定義されています。同時に、その後に小さなサブタイトル<small> </ small>の行を続けるか、.smallを使用できます。

<h1>h1. Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1<span class="small">副标题</span></div>

段落

段落は、タイプ設定のもう1つの重要な要素です。.leadを使用してコンテンツを強調します（その役割は、テキストサイズを大きくし、テキストを太字にし、それに応じて行の高さとマージンを処理することです。次のタグを使用して、テキストを目立たせることができます。

<small>：小さいフォント

<b> <strong>：太字

<i> <em>：斜体

<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>

強調する

ここでは強調クラス名と呼ばれるクラス名のセットを定義します。これらの強調クラスは色で強調されています。手順は次のとおりです。

.text-muted：ヒント、ライトグレーを使用（＃999）

    .text-primary：主要，使用蓝色（#428bca）

    .text-success：成功，使用浅绿色(#3c763d)

    .text-info：通知信息，使用浅蓝色（#31708f）

    .text-warning：警告，使用黄色（#8a6d3b）

    .text-danger：危险，使用褐色（#a94442）

<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>

アライメント効果

CSSでは、text-alignは、テキストの配置スタイルを設定するためによく使用されます。

主に4つのスタイルがあります：

左揃え、値は左です。

中央揃え、値は中央です。

右揃え、値は正しいです。

両端でジャスティファイします。値はジャスティファイです。

操作を簡素化し、使用を容易にするために、Bootstrapは、次の4つのクラス名を定義することにより、テキストの配置スタイルを制御します：.text-left：左配置。text-center：中央配置。text-right：右配置。text-justify：両端整列。

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份</p>

リスト

HTMLドキュメントには、3つの主要なリスト構造があります。

順序付けられていないリスト（<ul> <li>…</ li> </ ul>）

注文リスト（<ol> <li>…</ li> </ ol>）

定义列表（<dl> <dt>…</ dt> <dd>…</ dd> </ dl>）

ポイントリストに移動

class = "list-unstyled"

<ul class="list-unstyled">
    <li>无序项目列表一</li>
    <li>无序项目列表二</li>
</ul>

インラインリスト

class = "list-inline"、垂直リストを水平リストに置き換え、箇条書き（番号）を削除して水平表示を維持します。水平ナビゲーションを行うためにインラインリストが生まれたとも言えます。

<ul class="list-inline">
    <li>首页</li>
    <li>java学院</li>
    <li>在线课堂</li>
</ul>

定義リスト

元のファンデーションにいくつかのスタイルを追加し、style class = "dl-horizo​​ntal"を使用して水平方向の定義リストを作成します。タイトルの幅が160pxを超えると、3つの楕円が表示されます。

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表是一种样式表语言</dd>
</dl>
<dl class="dl-horizontal">
    <dt>HTML 超文本标记语言</dt>
    <dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>          
    <dt>测试标题不能超过160px的宽度,否则2个点</dt>
    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
</dl>

コード

一般的に、個人のブログでコードのスタイルを表示するために頻繁に使用されます。Bootstrapで提供されるコーディングスタイルは主に3つあります。

（1）<code> </ code>を使用して、1行のインラインコードを表示します

（2）<pre> </ pre>を使用して、複数行のコードを表示します

スタイル：事前スクロール可能（高さ、最大高さの高さは固定、340px、スクロールバーよりも大きい）

（3）<kbd> </ kbd>を使用して、ショートカットキーなどのユーザー入力コードを表示します

1行のインラインコード

<code>this is a simple code</code>

ホットキー

<p>使用<kbd>ctrl+s</kbd>保存</p>

複数行のブロックコード

<!-- 代码会保留原本的格式，包括空格和换行 -->
<pre>
public class HelloWorld {
    public static void main(String[] args){
        System.out.println("helloworld...");
    }
}
</pre>
<!-- 
    显示html标签的代码需要适应字符实体  
    小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代 
-->
<pre>
    &lt;ul&gt;
        &lt;li&gt;测试实体符&lt;/li&gt;
    &lt;/ul&gt;
</pre>
<!-- 当高度超过，会存在滚动条 -->
<pre class="pre-scrollable">
    <ol>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
    </ol>
</pre>

####