ホームページ > ウェブフロントエンド > htmlチュートリアル > BootStap勉強記(つづく)_html/css_WEB-ITnose

BootStap勉強記(つづく)_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:20:22
オリジナル
982 人が閲覧しました

モバイルデバイスファースト:

開発した Web サイトをモバイルデバイスに適したものにし、適切な描画とタッチスクリーンのスケーリングを保証するには、次のように Web ページの先頭にビューポート ミート タグを追加する必要があります。

<metaname="viewport"content="width=device-width, initial-scale=1.0">
ログイン後にコピー
<strong> 响应式图像:</strong>
ログイン後にコピー
 通过对图像添加class="img-responsive"可以让图像对响应式布局设计的更好;
ログイン後にコピー
 <strong>伪元素</strong>
ログイン後にコピー
http://www.w3school.com.cn/css/css_pseudo_elements.asp
ログイン後にコピー
 Bootstrap3 css有一个申请响应的媒体查询,在不同的媒体查询阈值范围内都为container设置了max-width,用以匹配网格系统.
ログイン後にコピー
  @media (min-width: 768px) {   .container {      width: 750px;  }
ログイン後にコピー
<strong> 网格系统</strong>
ログイン後にコピー
提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
ログイン後にコピー
    行必须放置在 <strong>.container</strong> class 内,以便获得适当的对齐(alignment)和内边距(padding);
ログイン後にコピー
    使用行来创建列的水平组;
ログイン後にコピー
    内容应该放置在列内,且唯有列可以是行的直接子元素;
ログイン後にコピー
    预定义的网格类,比如 <strong>.row</strong> 和 <strong>.col-xs-4</strong>,可用于快速创建网格布局。其中如果有多行,那么每行都要有.row
ログイン後にコピー
<strong>个人总结:如果同时定义了col-sm-* col-md-* col-lg-*,那么如果有匹配的就会采用匹配的列模式,如果窗口应用了col-lg-*,此时删除col-lg-*,那么窗口布局就会采用col-md-*。</strong>
ログイン後にコピー

col-md-offset-* は列の左マージン (マージン) を * 列ずつ増やすことができます

.col を使用します。 -MD- Push-*.col-md-pull-* クラスの組み込みグリッド列の順序は、列の並べ替えを実装するために使用されます。.col-md-push-* を持つ列は左にプッシュされます。 .col-md-pull-* を持つもの HTML 内の順序に関係なく、右に押します

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート