応答レイアウト
ウェブ応答し、どのような1
2.レスポンシブウェブページには、いくつかのことを行う必要があります
| 1.レイアウト、レイアウトフロー（+フローティングデフォルト文書ストリーム）+柔軟なレイアウトグリッドレイアウト+ 2.容器のサイズ変更などのテキストと画像サイズ 3.メディアからの問い合わせ技術（CSS3） 増加のジオメトリのコードの複雑さ 複雑なページレイアウトは、適切な応答ではありません |
応答性のウェブサイトをテストする方法3。
①実際の機器を使用して
| 利点：本物 短所：高コスト、テスト作業の膨大な量 |
②サードパーティ製のシミュレーションソフトウェアのテストを使用
| 利点：簡単かつ迅速 短所：限られたテストの結果、さらに検証保留 |
③テストシミュレータは、クロムが来ます
| 利点：簡単 短所：テスト結果は非常に限られています |
4.準備応答レイアウト（フォーカス*******************************************************）
①電話アダプタ
| プロジェクトは、モバイル端末で実行するようにビューポートを設定する場合はビューポートが設けられており、 <メタ名=「ビューポート」コンテンツ= "幅=装置幅、 初期の規模= 1.0、最大規模= 1.0、ユーザースケーラブル= 0" > ビューポートの幅に等しい幅幅=装置幅設定手段 ビューポートの初期幅を提供し、初期スケール= 1.0、1.0代表をスケーリングすることはできません 最大規模= 1.0、ビューポートスケール1.0倍最大設定最大1 ユーザスケーラブル= 0は、ズームビューポート0を許可するかどうかを設定することが可能 ビューポート最も簡潔な言葉遣い <メタ名=「ビューポート」コンテンツ= "幅=装置幅、 初期の規模= 1" > |
②すべてのコンテンツ/テキスト/画像は、相対的なサイズ（可能な限り）、ほとんど使用の絶対値を使用します
フレキシブル流体レイアウト+③+レイアウトメディアクエリ（グリッドレイアウト）レイアウト完了応答
④メディアクエリ
| 応答CSS3メディアクエリは、必要な技術を行います メディア：メディア、ウェブ閲覧装置 設備：スクリーン（PC /パッド/電話） TV /印刷 お使いのブラウザページ機器（サイズ、向き、ハードウェア、解像度など）によっては、選択肢を持って、CSSスタイルの一部として行われ、他のCSSスタイルを無視します |
二.BootStrap
| ブートを使用する方法1. 2.グローバルCSS 3.组件+js插件 4.定制sass 5.boot项目 |
1.如何使用boot
| <link rel="stylesheet" href="bootstrap.css"/> |
2.全局css样式
| container 定宽容器，每种不同的分辨率下， 定义了写死的max-width 同时，有左右15px内边距，水平居中 container-fluid 变宽容器，根据不同分辨率的屏幕， 宽度永远是屏幕的100% boot支持4种屏幕 xl/lg/md/sm 不支持xs boot中1个rem是16px。 boot的css reset使用的是normalize.css方案 |
①按钮相关的class
| .btn 基本类 定义了行内块，字号，文本对齐，边框，过渡等 按钮颜色 .btn-danger 红色 .btn-success 绿色 .btn-warning 黄色 .btn-info 藏青 .btn-primary 蓝色 .btn-secondary 灰色 .btn-dark 深色 .btn-light 浅色 不同边框的按钮 . btn-outline-danger/warning/info...... 不同按钮大小 .btn-sm .btn-lg .btn-block . btn-link |
②图片相关
| .rounded 添加圆角 0.25rem .rounded-circle 圆形 .img-thumbnail 添加内边距和边框 .img-fluid 响应式图片，图片可以缩放， 但是最大不能超过原始大小 |
③文字相关的class
| .text-danger/warning/info.....文本颜色 .h1~.h6 文本字号和加粗 .text-uppercase/lowercase/capitalize 文本大小写，首字母大写 .text-left/right/center 文本对齐 .text-*-left/right/center *:sm/md/lg 媒体查询 .text-justify 两端对齐，注意，没有媒体查询 |
④列表相关
| ul .list-unstyled 去点，左内边距清0 .list-group 列表组 li .list-group-item 列表项 ，边框，首元素和尾元素的圆角 颜色 .list-group-item-danger/warning..... 激活项 .active 禁用项 .disabled |
⑤table相关的class
| .table 对table本身和table的后代布局 .table-bordered 为table本身和后代添加边框 .table-danger/warning/success...表格颜色 .table-hover 带悬停效果的表格 .table-striped 隔行变色 .table-responsive-* *：sm/md/lg/xl 响应式布局的表格，写在table的父元素上 |
3.辅助类
①边框
| .border-0 去掉边框 .border-top/right/bottom/left-0 去掉某一个方向的边框 基本类 .border 灰色实线边框 .border-top/right/bottom/left 单边的灰色实线边框 边框颜色 .border-danger/warning/success..... |
②浮动
| .float-left/right/none 响应式浮动 .float-*-left/right/none *:sm/md/lg/xl .clearfix 解决高度坍塌，写在父元素上 |
③显示
| .visible visibility:visible .invisible visibility:hidden; |
④背景颜色
| .bg-danger/warning/success.... |
⑤圆角
| .rounded/.rounded-0 .rounded-top/right/bottom/left 设置某个方向的两个圆角 |
⑥尺寸
| w-25/50/75/100 width:25%/50%/75/100% 其它宽度需要自己定义 h-25/50/75/100 同上 mw-100/mh-100 max-width:100%;max-height:100%; |
⑦内外边距
| m/mt/mr/mb/ml/mx/my-*-auto/0/1/2/3/4/5 外边距 0:0 1:0.25rem 2:0.5rem 3:1rem 4:1.5rem 5:3rem p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 内边距 *：sm/md/lg/xl 响应式的内外边距 |