bootstrap基础知识

来源：互联网发布：untitled软件汉化版编辑：程序博客网时间：2024/04/30 18:50

1、如何实现响应式？CSS3-Media Query最简单的实现方式；借助原生JAvascript；成本较高。第三方开源框架；一般使用第一种方式。2、CSS3-Media Query常见属性device-width,device-height屏幕宽高；orientation设备方向；resolution设备分辨率；3、一个简单的案列@media screen and (min-width:480px){ body{ background:blue;}}css对应的cssbody{ background:#900; }注意： media=”only screen and (max-width:480px)”/>是小于4.8像素时候调用外联css，此处的max-width:480px不要习惯性加“；”号。4、Bootstrap写非常少的代码就可以实现适用不同屏幕大小；移动优先框架。使用时命名一定注意，不要和原有的bootstrap里面命名重复。在head里面首先加入这些，进行区域搭建5、了解一些常用的组件6、实现一个实例(1)对bootstrap有的组件进行修改即可进行直接修改就可以使用。找到组件导航条，将提供的代码粘贴过去即可。即可实现导航栏，(2)使用列表组组件实现列表显示，把提供大代码进行粘贴。然后利用栅格化工具。

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

（3）对界面进行介绍也有相关的组件，叫大屏幕介绍，可以直接粘贴复制过来。进行一定的改进即可。

点击

Hello, world!

**医疗，让你更精彩！

Learn more

              <div class="row"><!--按行排列-->                 <div class="col-6 col-sm-6 col-lg-4"><!--对于低分辨率和高分辨率使用是一样的-->                     <h2>headline</h2>                     <p>**医疗，让你更精彩！</p>                     <a class="btn btn-default">view detail</a>                 </div>                 <div class="col-6 col-sm-6 col-lg-4"><!--对于低分辨率和高分辨率使用是一样的-->                     <h2>headline</h2>                     <p>**医疗，让你更精彩！</p>                     <a class="btn btn-default">view detail</a>                 </div>                 <div class="col-6 col-sm-6 col-lg-4"><!--对于低分辨率和高分辨率使用是一样的-->                     <h2>headline</h2>                     <p>**医疗，让你更精彩！</p>                     <a class="btn btn-default">view detail</a>                 </div>                 <div class="col-6 col-sm-6 col-lg-4"><!--对于低分辨率和高分辨率使用是一样的-->                     <h2>headline</h2>                     <p>**医疗，让你更精彩！</p>                     <a class="btn btn-default">view detail</a>                 </div>                 <div class="col-6 col-sm-6 col-lg-4"><!--对于低分辨率和高分辨率使用是一样的-->                     <h2>headline</h2>                     <p>**医疗，让你更精彩！</p>                     <a class="btn btn-default">view detail</a>                 </div>                 <div class="col-6 col-sm-6 col-lg-4"><!--对于低分辨率和高分辨率使用是一样的-->                     <h2>headline</h2>                     <p>**医疗，让你更精彩！</p>                     <a class="btn btn-default">view detail</a>                 </div>              </div>![最终的效果图](http://img.blog.csdn.net/20161013162204770)

0 0