bootstrapのグリッドシステムにおけるclassの概念について

Question

最近プログラミング学習を始めた初学者なのですが、bootstrapを用いてレスポンシブデザインを作成する際のclassの概念がよくわかりません。
そもそも、基本的にHTMLにおけるclass属性というのは、自分とテキストエディタがどのdivなのかを識別するためだけに付けるただの名前のようなものだという認識でいいのでしょうか？
そんなただの名前にlinkを用いてbootstrapを読み込むとclass属性の中にcolm-md-4のように書くだけで、もともとただの名前でしかなかったclass属性に機能を与えることができる、という認識でいいのでしょうか？

Answer 1

質問者さんの認識でざっくりとは合っていますよ！

まず基礎的なこととして
html内に記入するclass は、html内のタグに同じ特徴がある事を指定したいときにつける名前です。

<div class=“fruits”>りんご</div>
<div class=“fruits”>みかん</div>

<div>果物って美味しいですよね。</div>

上記では、果物名の部分を「fruits」と指定しています。当然これだけでは見た目上は何も変化はありません。
一方でcssでは、htmlに装飾を与えることができ、クラス名を指定してデザインを設定できます。

.fruits{ /*fruits というクラス名を持つ要素*/
 color:red; /*文字色を赤にする*/
}

このcssを先程のhtmlに適用すると、「りんご」と「みかん」の部分だけ、文字が赤くなります。
つまり、htmlのクラス名は、cssのデザインを適用する際の目印のような役割を担います。

ここからが応用ですが、
「bootstrapを利用する」とは、乱暴に言ってしまえばあらかじめデザイン設定が記載されたcssファイルを利用する事です。

bootstrapを使う時には、bootstrapの各種ファイル（cssも含まれます）をhtmlに読み込み、決められたclass名をタグに指定します。
すると、bootstrapのcssであらかじめ指定されたデザインが自分のページに適用されます。
ページ製作者はわざわざ複雑なcssを書かなくて良いので楽ですね。
bootstrapに限らず、世の中には作り込まれたcssデザインパッケージがいくつかあります。それらを使う際にも、指定されたclass名やid名をhtmlに実装していきます。

しかし、そんな中でもbootstrapのcssデザインはレスポンシブデザインに対応しているので、非常に楽に高度なデザインができ、人気があります。

Answer 2

bootstrapのCSSファイル内にクラス名に対してスタイルが設定されているので、要素にクラス属性を設定することでそれが適用されるということです。

例えば、要素に class="col-md-4" と設定してブラウザの検証ツールで調べてみると、下記のようなスタイルが設定されているのが分かります。

@media (min-width: 768px)
.col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

CSSを覚えなくても、クラス属性がどのようなレイアウトやスタイルかも覚えておけば簡単に統一されたデザインのサイトができるという利点があります。
仕様に沿ったデザイン・レイアウトは簡単にできますが、自由度はそのぶん制限されます。