欢迎来到军工软件开发人才培养基地——学到牛牛

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核心样式。

<link href="css/bootstrap.min.css" rel="stylesheet">

 

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

<script src="js/jquery-3.4.1.js"></script>

<script src="js/bootstrap.min.js"></script>

 

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

2.1 布局容器

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

<div class="container">

...

</div>

 

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

<div class="container-fluid">

...

</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 class="container">

<div class="row">

<div class="col-md-4">4列</div>

<div class="col-md-8">8列</div>

</div>

</div>

 

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

<div class="container" style="background-color: yellow;">

<div class="row">

<div class="col-md-4 col-xs-1">4列</div>

<div class="col-md-8 col-xs-9">8列</div>

</div>

</div>

 

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

 

 

b.列偏移

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

示例:

<div class="container">

<div class="row">

<div class="col-md-1" style="background-color: pink;">1</div>

<div class="col-md-1" style="background-color: yellow;">1</div>

<!--设置列向右偏移5列(col-md-offset-5)-->

<div class="col-md-1 col-md-offset-5" style="background-color: red;">1</div>

<div class="col-md-1" style="background-color: greenyellow;">1</div>

</div>

</div>

 

 

c.列排序

 

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

<div class="container">

<div class="row">

<div class="col-md-1" style="background-color: pink;">1</div>

<!--往后浮动4个列-->

<div class="col-md-1 col-md-push-4" style="background-color: yellow;">1</div>

<div class="col-md-1" style="background-color: red;">1</div>

<!--往前浮动2个列-->

<div class="col-md-1 col-md-pull-2" style="background-color: greenyellow;">1</div>

</div>

</div>

 

 

d.列嵌套

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

示例:

<div class="container">

<!--列嵌套-->

<div class="row">

<div class="col-md-6" style="background-color: yellow;">

<!--在列中嵌套新列,定义两行三列-->

<dir class="row">

<div class="col-md-2" style="border: 1px solid red;">1_1</div>

<div class="col-md-5" style="border: 1px solid red;">1_2</div>

<div class="col-md-5" style="border: 1px solid red;">1_3</div>

</dir>

<dir class="row">

<div class="col-md-2" style="border: 1px solid red;">2_1</div>

<div class="col-md-5" style="border: 1px solid red;">2_2</div>

<div class="col-md-5" style="border: 1px solid red;">2_3</div>

</dir>

</div>

<div class="col-md-6" style="background-color: greenyellow;">第2列</div>

</div>

</div>

 

3、常用样式

3.1 排版

3.1.1 标题

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

 

示例:

<!--HTML提供的标题效果-->

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

 

<!--使用BootStrap样式设置的标题效果-->

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

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

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

 

3.1.2 副标题

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

示例:

<!--HTML提供的标题效果-->

<h1>标题1<small>副标题</small></h1>

<h2>标题2<small>副标题</small></h2>

<h3>标题3<small>副标题</small></h3>

 

<!--使用BootStrap样式设置的标题效果-->

<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 />

<!--加BootStrap后的段落-->

<p class="lead">

段落作用就是增加大文本字号,<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)

示例:

<!--强调-->

<div class="text-muted">提示</div>

<div class="text-primary">主要</div>

<div class="text-success">成功</div>

<div class="text-info">通知信息</div>

<div class="text-warning">警告</div>

<div class="text-danger">危险</div>

 

3.1.5 对齐效果

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

其中主要有四种风格。

a.左对齐,取值left;

b.居中对齐,取值center;

c.右对齐,取值right;

d.两端对齐,取值justify。

 

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

 

示例:

<style type="text/css">

div {

width: 200px;

height: 80px;

border: 1px solid red;

}

</style>

 

<!--使用标签对齐-->

<div style="text-align: center;">测试内容</div>

<!--使用BootStrap样式对象-->

<div class="text-center">测试内容</div>

 

<!-- justify测试,justify是两端对齐  -->

<!--未对齐效果-->

<div>

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

</div>

<!--对齐效果-->

<div class="text-justify">

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>Java</li>

<li>C++</li>

<li>Scala</li>

</ul>

 

<!--添加BootStrap样式-->

<ul class="list-unstyled">

<li>Python</li>

<li>Java</li>

<li>C++</li>

<li>Scala</li>

</ul>

 

 

b.内联列表

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

示例:

<!--未添加样式-->

<ul>

<li>Python</li>

<li>Java</li>

<li>C++</li>

<li>Scala</li>

</ul>

 

<!--添加BootStrap样式-->

<ul class="list-inline">

<li>Python</li>

<li>Java</li>

<li>C++</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类设置滚动条。

<pre class="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:表示一个危险的操作

 

示例:

<table class="table table-bordered table-striped table-hover table-condensed">

<tr class="success">

<th>序号</th>

<th>姓名</th>

<th>职务</th>

<th>工资</th>

</tr>

<tr>

<td>1</td>

<td>张三</td>

<td>部门经理</td>

<td>12000</td>

</tr>

<tr>

<td>2</td>

<td>李四</td>

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

<td>18000</td>

</tr>

<tr>

<td>3</td>

<td>王五</td>

<td>文员</td>

<td>3500</td>

</tr>

</table>

 

3.1.9 表单

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

.form-control:它是表单元素的样式;还可以控件表单的大小,.input-lg(较大)、.imput-sm(较小)。

 

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

 

示例:

<!--原生表单-->

<!--文本框-->

<input type="text" />

<br />

 

<!--下拉框-->

<select>

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

<option>成都</option>

<option>重庆</option>

<option>云南</option>

<option>北京</option>

</select>

<br />

 

<!--文本域-->

<textarea></textarea>

<br />

 

<!--添加BootStrap样式-->

<!--文本框-->

<!--使用.form-control来设置文本框样式,可以使用input-lg或input-sm来控制表单的宽度-->

<input type="text" class="form-control" />

<br />

<!--form-control是以窗口尺寸来显示,如果要缩短文本框尺寸,可以借助栅格来实现-->

<div class="row">

<div class="col-md-3">

<input type="text" class="form-control" /><br />

<input type="text" class="form-control input-lg" /><br />

<input type="text" class="form-control input-sm" /><br />

</div>

</div>

<br />

 

<!--下拉框-->

<div class="row">

<div class="col-md-2">

<select class="form-control">

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

<option>成都</option>

<option>重庆</option>

<option>云南</option>

<option>北京</option>

</select>

<br />

</div>

</div>

 

 

<!--文本域-->

<textarea class="form-control"></textarea>

<br />

 

b.复选框checkbox

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

 

示例:

<!--原生复选框-->

<input type="checkbox" /> 游戏

<input type="checkbox" /> 学习

<hr />

 

<!--BootStrap样式垂直复选框-->

<div>

<div class="checkbox">

<label>

<input type="checkbox" />游戏

</label>

</div>

<div class="checkbox">

<label>

<input type="checkbox" />学习

</label>

</div>

</div>

<hr />

 

<!--BootStrap样式水平复选框-->

<div>

<label class="checkbox-inline">

<input type="checkbox" />游戏

</label>

<label class="checkbox-inline">

<input type="checkbox" />学习

</label>

</div>

 

c.按钮

BootStrap提供button(按钮)标签的基础样式.btn,除此之外还提供附加样式。

.btn-primary:重要按钮

.btn-info:信息按钮

.btn-success:成功按钮

.btn-warning:警告按钮

.btn-danger:危险揿钮

.btn-link:链接按钮

.btn-default:普通按钮

 

示例:

<!--原生按钮-->

<button>按钮</button>

<input type="button" value="按钮" />

<hr />

 

<!--1、BootStrap样式按钮-->

<button class="btn btn-primary">按钮</button>

<button class="btn btn-info">按钮</button>

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

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

<button class="btn-danger">按钮</button>

<button class="btn-link">按钮</button>

<button class="btn-default">按钮</button>

<hr />

 

<!--2、通过按钮样式设置其他元素为按钮效果-->

<a class="btn btn-link" href="https://www.xuedaon.com">学到</a>

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

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

<hr />

 

<!--3、设置按钮的大小-->

<button class="btn btn-info">正常</button>

<button class="btn btn-info btn-lg">最大</button>

<button class="btn btn-info btn-sm">中等</button>

<button class="btn btn-info btn-xs">最小</button>

<hr />

 

<!--4、设置禁用按钮-->

<!--使用disabled属性禁用-->

<button class="btn btn-info" onclick="alert('你好')" disabled="disabled">弹框按钮</button>