14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

时间:2021-06-27 22:40:57

1、什么是响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的。

简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

响应式网络设计 ( RWD / AWD)的出现,目的是为移动设备提供更好的体验,并且整合从桌面到手机的各种屏幕尺寸和分辨率,用技术来使网页适应从小到大(现在到超大)的不同分辨率的屏幕。

2、bootstrap简介

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

是基于LESS的一套前端工具库,意图非常明显,想以一个项目,整合Compass,Blueprint,h5bp的目标功能,成为web前端的一站式解决方案。

* 一套完整的基础css模块,但不如compass丰富和强大
* 一套预定义样式表,包括一个格子布局系统,和blueprint提供的差不多,只是设计风格不一样
* 一组基于Jquery的js交互插件,这是Bootstrap真正强大的地方,也是她严格意义上可以取代Blueprint的原因所在,这些非常不错的小插件,包括对话框,下拉导航等等,不但功能完善,而且十分精致,正在成为众多jquery项目的默认设计标准。

14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
bootStrap之全局CSS样式
一、概述
1、移动设备优先
基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统;
Bootstrap 是移动设备优先的
通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2、布局容器
bootStrap为页面内容和栅格系统提供了一个布局容器:container,提供了两种,但是不能相互嵌套:
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
3、栅格类
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
类的前缀: col-xs-(手机) col-sm(平板) col-md(桌面显示器) col-lg(大桌面显示器)
14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
3.1 水平排列
 <div class="container" style="background-color: #e6e6e6;color: #ff0000;">
<div class="row">
<div class="col-lg-4">hello 大 </div>
<div class="col-md-4">hello 中 </div>
<div class="col-sm-4">hello 小 </div>
<div class="col-xs-4">hello 超小 </div>
</div> <div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div> <div class="container-fluid">
<div class="row">
<div class="col-lg-4">4</div>
<div class="col-lg-8"> 8 </div>
</div>

14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

3.2 是否不希望在小屏幕设备上所有列都堆叠在一起?
 <h1>你好,世界!</h1>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8" style="background-color: #e6e6e6;">手机全屏 平板一半 桌面8/12</div>
<div class="col-xs-6 col-md-4 " style="background-color: #1b6d85;">手机一半 桌面4/12</div>
</div>
</div>

下图为最小状态:

14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
下图为桌面状态:
14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
4、排版
 <div >
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2> <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
</div>
14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
通过lead类可以让段落突出显示:
   <div >
You can use the mark tag to <mark>highlight 高亮</mark> text.
<hr/>
<del>被删除 This line of text is meant to be treated as deleted text.</del>
<hr/>
<s>无用This line of text is meant to be treated as no longer accurate.</s>
<hr/>
<ins>额外插入的文本This line of text is meant to be treated as an addition to the document.</ins>
<hr/>
<u>带下划线的文本This line of text will render as underlined</u>
<hr/>
<small>小号文本his line of text is meant to be treated as fine print.</small>
<hr/>
<strong>强调一段endered as bold text</strong>
<hr/>
<em> 斜体 rendered as italicized text</em>
<hr/>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p> <hr/>
改变大小写
<p class="text-capitalize">
<p class="text-lowercase">全部小写 Lowercased text.</p>
<p class="text-uppercase">全部大写 Uppercased text.</p>
<p class="text-capitalize">首字母大写 capitalized text.</p> <hr/>
缩略语
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
<hr/>
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address> <hr/>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address> <hr/>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
</div>
14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
 引用:
 <div class="container">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote> <blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> <blockquote class="blockquote-reverse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</blockquote>
</div>

14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

     无序列表
<ul>
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
<li>hello4</li>
<li>hello5</li>
</ul> 水平列表
<ul class="list-inline">
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
<li>hello4</li>
<li>hello5</li>
</ul> 有序列表
<ol >
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
<li>hello4</li>
<li>hello5</li>
</ol> 无格式
<ol class="list-unstyled">
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
<li>hello4</li>
<li>hello5</li>
</ol>

14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

     <dl>
<dt>张忠磊</dt>
<dd>世界上最牛逼的人</dd> <dt>张忠磊</dt>
<dd>世界上最牛逼的人</dd> <dt>张忠磊</dt>
<dd>世界上最牛逼的人</dd> <dt>张忠磊</dt>
<dd>世界上最牛逼的人</dd> </dl> <dl class="dl-horizontal">
<dt>张忠磊</dt>
<dd>世界上最牛逼的人</dd> <dt>张忠磊</dt>
<dd>世界上最牛逼的人</dd> <dt>张忠磊</dt>
<dd>世界上最牛逼的人</dd> <dt>张忠磊</dt>
<dd>世界上最牛逼的人</dd> </dl>

14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

4、代码

  通过 code 标签包裹内联样式的代码片段
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<hr/>
通过 kbd 标签标记用户通过键盘输入的内容。=
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> <hr/>
多行代码可以使用 pre 标签。为了正确的展示代码,注意将尖括号做转义处理。
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre> <hr/>
通过 var 标签标记变量
<var>y</var> = <var>m</var><var>x</var> + <var>b</var> <hr/>
通过 samp 标签来标记程序输出的内容。
<samp>This text is meant to be treated as sample output from a computer program.</samp>

14、响应式布局和BootStrap 全局CSS样式知识点总结-part1