设计响应式网站-Bootstrap(1)

最新推荐文章于 2023-11-07 15:12:00 发布

Lower_Lamb

最新推荐文章于 2023-11-07 15:12:00 发布

阅读量719

点赞数

CC 4.0 BY-SA版权

文章标签：默认网格系统响应式设计文档结构 Bootstrap

本文链接：https://blog.youkuaiyun.com/a1260157543/article/details/48529859

Bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Bootstrap框架的起源及其核心特性，详细解释了Bootstrap如何实现响应式网页设计，包括其网格系统的工作原理以及响应式媒体查询的应用。

1.Bootstra介绍

2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁;要素排版利落大方。

网站相关链接（请点击）：Bootstrap中文文档

2.Bootstra的文档结构

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png

3.默认网格系统

系统会自动分为最多12列。如下图分类：

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

4.什么是响应式设计？

响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后再智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。

需要添加的内容:

<span style="font-size:18px;"><span class="tag" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 136);"><meta</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 0);"> </span><span class="atn" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 0, 102);">name</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 102, 0);">=</span><span class="atv" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 136, 0);">"viewport"</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 0);"> </span><span class="atn" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 0, 102);">content</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 102, 0);">=</span><span class="atv" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 136, 0);">"width=device-width, initial-scale=1.0"</span><span class="tag" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 136);">></span></span>

<span style="font-size:18px;"><span class="tag" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 136);"><link</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 0);"> </span><span class="atn" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 0, 102);">href</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 102, 0);">=</span><span class="atv" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 136, 0);">"assets/css/bootstrap-responsive.css"</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 0);"> </span><span class="atn" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 0, 102);">rel</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; color: rgb(102, 102, 0);">=</span><span class="atv" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 136, 0);">"stylesheet"</span><span class="tag" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 136);">></span></span>