Bootstrapの認識-20140513
2564 ワード
会社の2つの比較的大きなプロジェクトを通じて、Bootstrapのフレームワークに触れさせてもらいました.今、Bootstrapというフレームワークについてお話しします.
まず、私は絶対にBootstrapフレームワークはとても良い応答式のフレームワークで、特に移動端にとって、私たちのフロントエンドが解決するのに役立つ多くの、スタイル上の問題、特殊なスタイルが必要な問題です.
次はBootstrapフレームワークの導入が必要なパッケージです
以下はサポートされている遊覧機です
Chrome(Mac、Windows、iOS、Android)
Safari(MacとiOS版のみ対応、Windows版はほぼ死んでいます)
Firefox (Mac、Windows)
Internet Explorer
Opera (Mac、Windows)
Internet Explorer 8と9
IE互換モード
BootstrapはIEの互換モードをサポートしていません.IEブラウザで最新のレンダリングモードを実行するには、このタグをページに追加することをお勧めします.
ここではBootstrapを使うにはhtml 5に加入しなければならない
ここではモバイルデバイスに追加する必要があります
適切な描画とタッチスクリーンのスケールを確保するには、にviewportメタデータラベルを追加する必要があります.
モバイルデバイスブラウザでviewport metaラベルにuser-scalable=noを追加することでスケール機能を無効にできます
次に応答式とは、画面幅を変えて現在のページスタイルを変更する応答式です.
これはcssで書かれたフォーマットです
次に、応答式と適応式の違いについてお話ししたいと思います.ここは私自身の理解です.
まず応答式の概念は私が上に書いたcssスタイルで、異なる画面の大きさに対して、先端に必要な前後スタイルのスタイルを書く派の並び順で、画面が一定に小さいとき、2つのものの同僚に同じ平行線に見せることができないとき、現れて、ユーザーに先に体験させる必要がある何かの後で何を体験させて、効果が出てくるのは1行の様子を変えることかもしれません.しかし中には先着順も存在するため、これは先端と視覚などの部門との交渉が必要であり、応答式は主に決裂するという問題がある.
では、適応とは何でしょうか.実は適応はパーセンテージのcssスタイルです.パーセンテージのスタイル構造はどの画面でも正常に展示できるので、どんなに大きくても小さくても、すべて需要の必要に応じて展示することができます.それは小さすぎても大きすぎても、ユーザーに悪い体験効果をもたらします.
だからこの2つの効果は需要の需要によって柔軟な交換を行う必要があります.適応本人は変化があまり大きくないところに適していると思います.例えば、アップルの携帯電話の端末では、6が出ても2つのスタイルで、あまり変化はありません.それでは、応答式本人はアンドロイドの上に適していると思います.アンドロイドの選択が多いので、異なる需要と使用効果があります.従って、相対的に適応すると、応答式はより的確であり、適応はより大きな包容性を有する.
まず、私は絶対にBootstrapフレームワークはとても良い応答式のフレームワークで、特に移動端にとって、私たちのフロントエンドが解決するのに役立つ多くの、スタイル上の問題、特殊なスタイルが必要な問題です.
次はBootstrapフレームワークの導入が必要なパッケージです
// css css
bootstrap.css
bootstrap.min.css
// js
bootstrap.js
bootstrap.min.js
以下はサポートされている遊覧機です
Chrome(Mac、Windows、iOS、Android)
Safari(MacとiOS版のみ対応、Windows版はほぼ死んでいます)
Firefox (Mac、Windows)
Internet Explorer
Opera (Mac、Windows)
Internet Explorer 8と9
IE互換モード
BootstrapはIEの互換モードをサポートしていません.IEブラウザで最新のレンダリングモードを実行するには、このタグをページに追加することをお勧めします.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
ここではBootstrapを使うにはhtml 5に加入しなければならない
<!DOCTYPE html>
<html lang="zh-cn">
...
</html>
ここではモバイルデバイスに追加する必要があります
適切な描画とタッチスクリーンのスケールを確保するには、にviewportメタデータラベルを追加する必要があります.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
モバイルデバイスブラウザでviewport metaラベルにuser-scalable=noを追加することでスケール機能を無効にできます
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
次に応答式とは、画面幅を変えて現在のページスタイルを変更する応答式です.
これはcssで書かれたフォーマットです
@media(min-width:1200px){
...... 1200 ， 1199 1199
}
@media(max-width:1200px){
...... 1200 ，1-1200 1201
}
@media(min-width:1px)and@media(min-width:1200px){
...... 1 1200
}
次に、応答式と適応式の違いについてお話ししたいと思います.ここは私自身の理解です.
まず応答式の概念は私が上に書いたcssスタイルで、異なる画面の大きさに対して、先端に必要な前後スタイルのスタイルを書く派の並び順で、画面が一定に小さいとき、2つのものの同僚に同じ平行線に見せることができないとき、現れて、ユーザーに先に体験させる必要がある何かの後で何を体験させて、効果が出てくるのは1行の様子を変えることかもしれません.しかし中には先着順も存在するため、これは先端と視覚などの部門との交渉が必要であり、応答式は主に決裂するという問題がある.
では、適応とは何でしょうか.実は適応はパーセンテージのcssスタイルです.パーセンテージのスタイル構造はどの画面でも正常に展示できるので、どんなに大きくても小さくても、すべて需要の必要に応じて展示することができます.それは小さすぎても大きすぎても、ユーザーに悪い体験効果をもたらします.
だからこの2つの効果は需要の需要によって柔軟な交換を行う必要があります.適応本人は変化があまり大きくないところに適していると思います.例えば、アップルの携帯電話の端末では、6が出ても2つのスタイルで、あまり変化はありません.それでは、応答式本人はアンドロイドの上に適していると思います.アンドロイドの選択が多いので、異なる需要と使用効果があります.従って、相対的に適応すると、応答式はより的確であり、適応はより大きな包容性を有する.