BootStrap应用

时间：2024-05-06 07:01:10 来源：学到牛牛

1、BootStrap的安装和使用

1.1 BootStrap介绍

BootStrap中文网。

BootStrap是一套现成的CSS样式集合，这是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。

适合快速的出一个网页。

1.2 BootStrap特点

a.简洁、直观、强悍的前端开发框架，HTML、CSS、JS工具集，让Web开发更快速、简单。

b.基于HTML5、CSS3的BootStrap，具有大量的诱人特性；友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。

c.BootStrap 基于JQuery，如果想使用JQuery插件就需要引入JQuery；如果只是使用CSS样式，可以不引入。

d.BootStrap响应式布局设计，让一个网站可以兼容不同分辨率的设备，给用户提供更好的视觉使用体验。

e.丰富的组件。

1.3 下载

a.下载BootStrap：https://v3.bootcss.com/getting-started/#download

下载生产版本、开发版本都可以。

b.下载JQuery.js：https://jquery.com

1.4 使用

引用BootStrap核心样式。

引用JS；由于 BootStrap是基于JQuery，所以在引用BootStrap前，需要先引用JQuery。

2、布局容器和栅格网格系统

2.1 布局容器

a. .container类用于固定宽度并支持响应式布局的容器（两边留白）。

...

</div>

b. .container-fluid类用于100%宽度，占据全部视口的军容器。

...

</div>

需要注意.container与.container-fluid类不能同时使用。所有的标签内容都是基于.container与.container-fluid标签中编写。

2.2 栅格网格系统

a.栅格 BootStrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。BootStrap框架中的网格系统就是将容器平分成12份。

注意：网格系统必须使用到CSS

响应式网页开发，首先应该有布局（.container），然后在布局中有行（.row），行是布局的唯一子级。在行中有列，列会根据当前布局的大小划分为最多定义12列（包含：xs超小屏、sm小屏、md中屏、lg大屏），md列用的较多。

行（.row）需要放在容器（.container）中，以便为其赋予合适的对方方式和内距。

在行（.row）中可以添加列（.column），只有列才可以作为行容器的直接子元素，但列数之和不能超过平分的总列数（12列），如果大于12，则自动换到下一行

示例：

</div>

示例：根据不同屏幕，设置不同的列数。col-md-中屏幕为4：8分屏，col-xs-小屏幕为1：9分幕。

</div>

注意：栅格网格系统中列组合的列总和数可以少于12，等于12，但不能大于12，否则会自动换到一行。

b.列偏移

如果我们不希望相邻两个列紧靠在一起，但又不想使用margin或者其他的技术手段来实现，这个时候就可以使用列偏移（offset）功能来实现。只需要在列元素上添加类名“col-md-offset-*”（*是偏移的列组合数），那么具有这个类名的列就会向右偏移。例如：你在列元素上添加col-md-offset-8，表示该列向右移动8个列的宽度（注意：要保证列与偏移的总数不超过12，不然会换行显示）。

示例：

</div>

c.列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中，是通过添加类名col-md-push.*和col-md-pull.*（*表示移动列组合数），往前pull，往后push。

</div>

d.列嵌套

BootStrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或多个行（row）容器，然后在这个行容器中插入列。

示例：

</dir>

</dir>

</div>

</div>

3、常用样式

3.1 排版

3.1.1 标题

BootStrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>，只不过BootStrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名，同时在标题标签中，内容后面可以紧跟着一行小的副标题<small></small>或使用.small。

示例：

<div class="h1">DIV标题1</div>

<div class="h2">DIV标题2</div>

<div class="h3">DIV标题3</div>

3.1.2 副标题

使用可使用small标签来实现，也可以使用BootStrap样式中的.small类名来实现。

示例：

<div class="h1">BootStrap样式标题1<span class="small">BootStrap样式副标题</span></div>

<div class="h2">BootStrap样式标题2<span class="small">BootStrap样式副标题</span></div>

<div class="h3">BootStrap样式标题3<span class="small">BootStrap样式副标题</span></div>

3.1.3 段落

段落是排版中另一个重要元素之一，通过.lead来突出强调内容，其作用就是增加大文本字号，加粗文本，而且对行距和margin也做相应的处理。

段落中可以借助small（小号字）、b（加粗）和i（斜体）等标签现实重点突出

示例：

<p>段落作用就是增加大文本字号，加粗文本，而且对行距和margin也做相应的处理。</p>

<hr />

段落作用就是增加大文本字号，<small>加粗文本，而且对行距和margin也做相应的处理。</small>

</p>

3.1.4 强调

定义了一套，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具体说明如下。

.text-nuted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅银色（#3c763d）

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d2b）

.text-danger：危险，使用褪色（#a94442）

示例：

3.1.5 对齐效果

在CSS中常常使用text-align来实现文本的对齐风格的设置。

其中主要有四种风格。

a.左对齐，取值left;

b.居中对齐，取值center；

c.右对齐，取值right；

d.两端对齐，取值justify。

为了简化操作，方便使用，BootStrap通过定义四个类名来控制文本的对齐风格：.text-left（左对齐）、.text-center（居中对齐）、.text-right（右对齐）和.text-fustify（两端对齐）。

示例：

div {

width: 200px;

height: 80px;

border: 1px solid red;

}

</style>

<div>

Django 是一个由 Python 编写的一个开放源代码的 Web 应用框架。

</div>

Django 是一个由 Python 编写的一个开放源代码的 Web 应用框架。

</div>

3.1.6 列表

在HTML文档中，列表结构主要有两种。

无序列表：<ul><li>...</li></ul>

有序列表：<ol><li>...</li></ol>

BootStarp中提供多种类样式用来装饰列表。

a.去点列表

使用.list-unstyled来实现对列表去点效果。

示例：

<ul>

<li>Python</li>

<li>Scala</li>

</ul>

<li>Python</li>

<li>Scala</li>

</ul>

b.内联列表

使用.list-inline把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示，也可以说内联列表就是为制作水平导航而生。

示例：

<ul>

<li>Python</li>

<li>Scala</li>

</ul>

<li>Python</li>

<li>Scala</li>

</ul>

3.1.7 代码风格

一般在个人博客上使用的较为频繁，用于显代码的风格，在BootStrap主要提供了三种代码风格：

a.使用<code></code>来显示单行内联代码。

b.使用<pre></pre>来显示多行代码。<pre></pre>标签可以显示多行代码，代码会保留原本的格式，包括空格和回车。

样式：pre-scrollable（设置滚动条，固定高度为340px，超过时滚动条）。

c.使用<kdb></kdb>来显示用户输入代码，如快捷键。

示例：将单行内容以代码风格行显示

<code>

This is a simple code

</code>

示例：显示快捷键

<code>

在Windows中使用<kbd>Ctrl</kbd> + <kbd>C</kbd>快捷键复制文件

</code>

示例：显示多行代码

<pre>

from django.db import models

class Student(models.Model):

name = models.CharField(max_length=10) # 创建字符串，长度为10

age = models.IntegerField() # 创建整型

height = models.FloatField() # 创建浮点型

studentStatus = models.BooleanField(default=True) # 创建布尔类型，默认值为True

</pre>

示例：多行代码行数过长，可以使用.pre-scrollable类设置滚动条。

def is_absolute(self):

"""True if the path is absolute (has both a root and, if applicable,

a drive)."""

if not self._root:

return False

return not self._flavour.has_drv or bool(self._drv)

def is_reserved(self):

"""Return True if the path contains one of the special names reserved

by the system, if any."""

return self._flavour.is_reserved(self._parts)

def match(self, path_pattern):

if drv or root:

if len(pat_parts) != len(parts):

return False

pat_parts = pat_parts[1:]

elif len(pat_parts) > len(parts):

return False

for part, pat in zip(reversed(parts), reversed(pat_parts)):

if not fnmatch.fnmatchcase(part, pat):

return False

return True

</pre>

3.1.8 表格

a.table标签（表格）样式

BootStrap为表格提供了1种基础样式和4种附加样式，以及1个支持响应式的表格。在使用BootStrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。

1）基础样式

.table：基础表格

2）附加样式

.table-striped：斑马线表格

.table-bordered：带边框的表格

.table-hover：鼠标悬念高亮的表格

.table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小

b.tr、th、td标签样式

tr、th、td标签提供了五种不同类名，每种类名控制了行的不同背景颜色。具体说明如下。

.active：将悬停的颜色应用在行或者单元格上

.success：表示成功的操作

.info：表示信息变化的操作

.warning：表示一个警告的操作

.danger：表示一个危险的操作

示例：

</tr>

<tr>

</tr>

<tr>

<td>软件开发工程师</td>

</tr>

<tr>

</tr>

</table>

3.1.9 表单

表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通，表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、文本域和按钮等。

.form-control：它是表单元素的样式；还可以控件表单的大小，.input-lg（较大）、.imput-sm（较小）。

a.文本框、下拉框、文本域

示例：

<br />

<option>请选择城市</option>

</select>

<br />

<br />

<br />

</div>

<br />

<option>请选择城市</option>

</select>

<br />

</div>

<br />

b.复选框checkbox

BootStrap中提供.checkbox类实现垂直复选框显示；提供.checkbox-inline类现实水平复选框显示。

示例：

<input type="checkbox" /> 游戏

<input type="checkbox" /> 学习

<hr />

<div>

<label>

<input type="checkbox" />游戏

</label>

</div>

<label>

<input type="checkbox" />学习

</label>

</div>

<hr />

<div>

<input type="checkbox" />游戏

</label>

<input type="checkbox" />学习

</label>

</div>

c.按钮

BootStrap提供button（按钮）标签的基础样式.btn，除此之外还提供附加样式。

.btn-primary：重要按钮

.btn-info：信息按钮

.btn-success：成功按钮

.btn-warning：警告按钮

.btn-danger：危险揿钮

.btn-link：链接按钮

.btn-default：普通按钮

示例：

<hr />

<hr />

<span class="btn btn-success">span按钮</span>

<div class="btn btn-warning">div按钮</div>

<hr />

<hr />