bootstrap基础知识

最新推荐文章于 2025-01-24 14:13:45 发布

原创最新推荐文章于 2025-01-24 14:13:45 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

html5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了实现响应式设计的基本方法，重点讲解了CSS3 Media Queries的使用，并通过实际案例展示了如何利用Bootstrap快速构建适用于不同屏幕尺寸的网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 对应的css body{ 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>![最终的效果图](https://img-blog.youkuaiyun.com/20161013162204770)