Bootstrap框架

最新推荐文章于 2024-05-30 15:01:09 发布
最新推荐文章于 2024-05-30 15:01:09 发布
阅读量1k 收藏 8
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bulid_Evolto/article/details/99487617
版权

Bootstrap框架的概述和优点

目标

bootstrap的作用

什么是Bootstrap

Bootstrap一个前端的框架，提高前端的开发效率，制作出更加专业，漂亮的页面。基于html、css、js技术。

[外链图片转存失败(img-Zz2fpzOy-1565706473349)(/)]

bootstrap中文官网：http://www.bootcss.com

Bootstrap的优势
  1. 自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。能够自适应于台式机、平板电脑和手机。
  2. Bootstrap支持所有的主流浏览器。如：Internet Explorer、 Firefox、 Opera、 Google Chrome、Safari。
  3. 只要具备 HTML 和 CSS 的基础知识，就可以开始学习 Bootstrap。

[外链图片转存失败(img-iZY6gD4K-1565706473353)(/]

小结

bootstrap是什么？

前端开发框架,提高前端的开发效率,界面效果美观

什么是响应式设计(重点)

目标

了解什么是响应式设计

传统的网页

电脑上和手机上看到的是不同的页面

电脑上效果

https://www.taobao.com/

[外链图片转存失败(img-l8N4tdIA-1565706473353)(/)]

手机上效果

https://h5.m.taobao.com/

[外链图片转存失败(img-expbi8AI-1565706473353)(/)]

响应式设计网页

电脑和手机看到的是同一个页面，根据屏幕尺寸不同，网页自动有不同布局

https://www.apple.com/cn/

电脑上效果

[外链图片转存失败(img-Ll4zxotc-1565706473353)(/)]

手机上效果

[外链图片转存失败(img-naHAcD15-1565706473353)(/)]

响应式布局特点

同一个网页在不同的屏幕上,会自动适应,拥有不同的布局.

小结

说出响应式布局特点？

同一个网页在不同的屏幕上,会自动适应,拥有不同的布局.

Bootstrap的下载和介绍

目标

学习Bootstrap的下载和介绍

下载

http://www.bootcss.com，下载用于生产环境的Bootstrap

[外链图片转存失败(img-gR43067L-1565706473353)()]

Bootstrap包含的内容

[外链图片转存失败(img-4BtILBvC-1565706473353)(/)]

  1. 设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。

  2. 组件：无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

  3. JavaScript插件：jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。

目录结构

[外链图片转存失败(img-HiUvXCSH-1565706473353)(/)]

压缩版与标准版的介绍

[外链图片转存失败(img-VDUDLmIg-1565706473353)(/)]

功能上是一样的

  • 标准版：代码可读性比较好，通常用于开发。
  • 压缩版：文件小，通常用于工作环境。

小结

说说bootstrap中这几个目录的作用?

  1. css：存放Bootstrap提供的CSS样式
  2. fonts：存放Bootstrap提供的字体
  3. js：存放Bootstrap提供的JS代码

创建Bootstrap的模板(重点)

目标

学习创建bootstrap的模板

步骤
  1. 复制解压出来的三个文件夹到项目中：css，js， fonts
  2. 复制jquery框架：jquery-3.2.1.min.js复制到js目录下
  3. 复制文档中的："起步->基本模板"中代码到网页，修改网页的内容

此模板文件只要创建1次即可，以后可以重用

离线文档位置:day23\source\Bootstrap离线文档\v3.bootcss.com\index.htm

模板的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- 对IE浏览器的兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap模板</title>

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

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>

小结

创建bootstrap模板的步骤有哪几步？

  1. 复制bottstrap的css,js,fonts文件到到模块下
  2. 复制jquery-3.2.1.min.js到js文件夹下
  3. 复制文档中起步->基本模板的代码到html网页中,修改网络地址位本地地址

栅格系统的介绍

目标

学习Bootstrap的栅格系统和两种布局的容器

栅格系统的介绍

[外链图片转存失败(img-e83oIay0-1565706473353)(/)]

[外链图片转存失败(img-JWO2RFRJ-1565706473353)(/)]

表格

<table>
    <tr bgcolor="gray">
        <td>姓名</th>
        <td>电话</th>
        <td>地址</th>
    </tr>
</table>

[外链图片转存失败(img-gu6ytGK7-1565706473353)(/)]

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

[外链图片转存失败(img-iqnJPqV8-1565706473357)(/)]

Bootstrap 栅格系统的工作原理
<div class="container">
	<div class="row">
        <div class="col-md-4">
            1列占4格子
        </div>
        <div class="col-md-4">
            1列占4格子
        </div>
        <div class="col-md-4">
            1列占4格子
        </div>
    </div>
</div>
栅格的参数
超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 (≥992px)大屏幕 (≥1200px)
类前缀.col-xs-.col-sm-.col-md-.col-lg-
两种容器
两种容器的类样式名说明
container具有固定宽度的容器
container-fluid具有100%宽度的容器
案例效果

[外链图片转存失败(img-4zqrQiI8-1565706473357)(/)]

代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--对IE浏览器的兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap两种容器</title>

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

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <style>
        div {
            border: 1px solid red;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="container">
    container 固定宽度的容器
</div>

<div class="container-fluid">
    container-fluid 100%宽度
</div>
</body>
</html>
设备查询@media

通过不同的设备类型和条件定义样式表规则。设备查询让CSS可以更精确作用于不同的设备类型和同一设备的不同条件。设备查询的大部分特性都接受min和max用于表达“大于或等于”和“小于或等于”。打开文件：bootstrap.css，可以看到以下代码：

.container {
  padding-right: 15px;   右内边距
  padding-left: 15px;   左内边距
  margin-right: auto;   居中
  margin-left: auto;
}
@media (min-width: 768px) {  如果设备大于等于768，容器的宽度是750
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
  • 结论：所以容器container可以随着设备的宽度发生变化
栅格系统有关的类样式名
栅格系统描述类似于表格
.container固定宽度容器table
.container-fluid100%宽度的容器table
.row表示1行，1行最多12格tr
.col-xx-n xx表示1列，1列可以占多格
.col-sm-3 在小屏幕上这1列占3格
.col-lg-6 在大屏幕上这1列占6格		td

小结

  1. 说出栅格系统的两种容器？

    container: 固定宽度容器

    container-fluid: 100%宽度的容器

  2. 一行的类名？

    row

  3. col-md-4表示什么意思？

    这列在中等屏幕上占4个格子

演示：栅格系统的布局案例

目标

通过4个案例学习栅格系统的布局

示例1：基本结构,一列四个格子

[外链图片转存失败(img-xOFXinBh-1565706473357)(/1552206379296.png)]

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--设置网页编码为utf-8-->
    <meta charset="utf-8">
    <!--兼容ie-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口,虚拟的界面,适应手机-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>基本布局</title>

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

    <!--注意一定要先引入jQuery后引入bootstrap-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <style>
        .row div {
            border: 1px solid red;
            height: 100px;
        }
    </style>
</head>
<body>
<h1>基本布局</h1>

<div class="container">
    <!--一行-->
    <div class="row">
        <!--一列-->
        <div class="col-md-4">
            一列四个格子
        </div>

        <div class="col-md-4">
            一列四个格子
        </div>

        <div class="col-md-4">
            一列四个格子
        </div>
    </div>

    <!--一行-->
    <div class="row">
        <!--一列-->
        <div class="col-md-4">
            一列四个格子
        </div>

        <div class="col-md-4">
            一列四个格子
        </div>

        <div class="col-md-4">
            一列四个格子
        </div>
    </div>
</div>

</body>
</html>
示例2：一行超过12格

如果一行超出了12格，多出的格子会放在下面

[外链图片转存失败(img-asxZ82dj-1565706473357)(/)]

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--对IE浏览器的兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap栅格系统</title>

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

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <style>
        .row div {
            border: 1px solid red;
            height: 100px;
        }
    </style>
</head>
<body>
<!--容器-->
<div class="container">
    <!--表示1行-->
    <div class="row">
        <div class="col-md-4">
            1列占4格子
        </div>
        <div class="col-md-4">
            1列占4格子
        </div>
        <div class="col-md-4">
            1列占4格子
        </div>
        <div class="col-md-4">
            1列占4格子
        </div>
        <div class="col-md-4">
            1列占4格子
        </div>
    </div>
</div>
</body>
</html>
示例3：不同屏幕的适配

不同的设备上显示不同数量的列:中等屏幕占3格，小屏幕占4格，超小屏幕占6格

[外链图片转存失败(img-AzkQ1Msw-1565706473357)(/]

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   	<meta charset="utf-8">
    <!--对IE浏览器的兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap栅格系统</title>

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

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <style>
        .row div {
            border: 1px solid red;
            height: 100px;
        }
    </style>
</head>
<body>
<!--容器-->
<div class="container">
    <!--表示1行-->
    <div class="col-xs-6 col-sm-4 col-md-3">
        超小屏幕占6格，小屏幕占4格，中等屏幕占3格
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">

    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">

    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">

    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">

    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">

    </div>
</div>
</body>
</html>
示例4：显示和隐藏块

可以让某些列在指定的设备上显示或隐藏

在大屏幕上显示，在超小屏幕上隐藏

[外链图片转存失败(img-34FL2FzL-1565706473357)(/)]

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--设置网页编码为utf-8-->
    <meta charset="utf-8">
    <!--兼容ie-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口,虚拟的界面,适应手机-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>基本布局</title>

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

    <!--注意一定要先引入jQuery后引入bootstrap-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <style>
        .row div {
            border: 1px solid red;
            height: 100px;
        }
    </style>
</head>
<body>
<h1>在大屏幕上显示，在超小屏幕上隐藏</h1>

<div class="container">
    <!--一行-->
    <div class="row">
        <!--列-->
        <div class="col-md-4 visible-lg">
            一列占4个格子
            在大屏幕上显示
        </div>

        <div class="col-md-4">
            一列占4个格子
        </div>

        <div class="col-md-4 hidden-xs">
            一列占4个格子
            在超小屏幕上隐藏
        </div>
    </div>
</div>
</body>
</html>

小结

类样式名作用
.row表示一行
.col-xs-n表示这列在超小屏幕上占n个格子
.col-sm-n表示这列在小屏幕上占n个格子
.col-md-n表示这列在中等屏幕上占n个格子
.col-lg-n表示这列在大屏幕上占n个格子
.hidden-lg/md/sm/xs在某些屏幕上隐藏
.visible-lg/md/sm/xs在某些屏幕上显示

全局CSS样式：按钮

目标

学习使用Bootstrap中的按钮样式

效果

[外链图片转存失败(img-7dr3rWD0-1565706473357)(/)]

[外链图片转存失败(img-XbklMGUC-1565706473361)(/)]

代码
<div class="container">
    <h2>按钮</h2>
    <input type="button" value="普通按钮" class="btn btn-default">
    <button type="submit" class="btn btn-default">提交按钮</button>
    <a href="#" class="btn btn-default">我是链接</a>
    <h2>预定义按钮</h2>
    <input type="button" value="蓝色按钮" class="btn btn-primary">
    <input type="button" value="红色按钮" class="btn btn-danger">
    <input type="button" value="绿色按钮" class="btn btn-success">
</div>

小结

  1. 按钮使用哪个类：btn
  2. 标准按钮使用哪个类：btn-default
  3. 成功按钮使用哪个类：btn-success

全局CSS样式：图片

目标

学习Bootstrap响应式图片的使用

响应式图片

通过为图片添加.img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

图片形状
图⽚片形状类样式名
圆⻆角img-rounded
圆或椭圆img-circle
有边框img-thumbnail
效果

[外链图片转存失败(img-7XirAs9e-1565706473361)(/)]

代码
<h2>图片</h2>
<!--响应式图片-->
<img src="img/08.jpg" class="img-responsive">
<hr/>
<!--圆角-->
<img src="img/01.jpg" class="img-responsive img-rounded">
<!--圆或椭圆-->
<img src="img/02.jpg" class="img-responsive img-circle">
<!--有边框-->
<img src="img/03.jpg" class="img-responsive img-thumbnail">

小结

响应式图片设置哪个类名？

img-responsive： 占父控件100%大小，随着父控件缩放。

全局CSS样式：表单

目标

使用表单样式制作如图效果

[外链图片转存失败(img-o8tYPTJe-1565706473361)(/)]

表单
样式名作用
form-control、、 元素都将被默认设置宽度：width: 100%;
form-group将label元素和前面提到的控件包裹在一行中进行分组
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--对IE浏览器的兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>BootstrapFORM表单</title>

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

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
    <h2>添加联系人</h2>
    <form style="width: 500px">
        <!--.form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;-->
        <!--一组中包含label和input-->
        <div class="form-group">
            <label for="user">姓名:</label>
            <input type="text" id="user" class="form-control" placeholder="请输入姓名">
        </div>

        <div class="form-group">
            <label>性别:</label>
            <input type="radio" id="male" value="male" name="gender" checked="checked"/>
            <label for="male">男</label>
            <input type="radio" id="female" value="female" name="gender"/>
            <label for="female">女</label>
        </div>

        <div class="form-group">
            <label for="birthday">生日:</label>
            <input type="date" class="form-control" id="birthday"/>
        </div>

        <div class="form-group">
            <label for="edu">学历:</label>
            <select id="edu" class="form-control">
                <option>本科</option>
                <option>研究生</option>
            </select>
        </div>

        <div class="form-group text-center">
            <input type="button" class="btn btn-primary" value="注册"/>
            <input type="button" class="btn btn-success" value="取消"/>
            <input type="button" class="btn btn-warning" value="退出"/>
        </div>
    </form>
</div>
</body>
</html>

小结

  1. form-control的特点：可以让，input, textarea, select 元素和父控件100%宽

  2. form-group有什么用：表示一组，和其他组之间间距大一些

全局CSS样式：表格

目标

使用表格制作如图效果

[外链图片转存失败(img-zcxdPgRx-1565706473361)(/)]

表格的类样式

[外链图片转存失败(img-0GZ4hzhD-1565706473361)(/)]

不同行的颜色

[外链图片转存失败(img-8u320TPk-1565706473361)(/)]

[外链图片转存失败(img-pGfQCkVy-1565706473365)(/)]

[外链图片转存失败(img-3z4Ggcxt-1565706473365)()]

代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--对IE浏览器的兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap表格</title>

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

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
    <h3>七龙珠人物</h3>
    <table class="table table-striped table-bordered table-hover">
        <tr class="success">
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>1302</td>
            <td>贝吉塔</td>
            <td>男</td>
            <td>19509869504</td>
        </tr>
        <tr>
            <td>5940</td>
            <td class="danger">孙悟空</td>
            <td>男</td>
            <td>13938475687</td>
        </tr>
        <tr>
            <td>6841</td>
            <td class="warning">龟仙人</td>
            <td>男</td>
            <td>18501029504</td>
        </tr>
    </table>
</div>
</body>
</html>

小结

bootstrap中表格有哪些类样式？
table: 每行之间有一根水平分割线。这个表格是父控件的100%宽度
table-striped: 隔行变灰色
table-bordered: 表格添加外边框和内边框
table-hover: 鼠标以上变灰色

组件：字体图标

目标

[外链图片转存失败(img-ev43n3t9-1565706473365)(/)]

中国

A

代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--对IE浏览器的兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap字体图标</title>

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

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
<h2>字体图标</h2>
<!--字体图标使用span标签配上class显示,字体图标就是文字,可以设置字体-->
<span class="glyphicon glyphicon-star" style="font-size: 30px; color: red"></span>五角星
<span class="glyphicon glyphicon-zoom-in" style="font-size: 30px; color: blue"></span>放大镜
<span class="glyphicon glyphicon-trash" style="font-size: 30px; color: green"></span>回收站
</div>
</body>
</html>

小结

  1. 字体图标使用什么标签显示?

    span

  2. 每个图标下的文字是什么意思?

    就是这个图标的类样式

组件：导航条

目标

查询Bootstrap文档做出如下图所示的导航条

大屏幕

[外链图片转存失败(img-lazRzO4X-1565706473365)(/)]

小屏幕

[外链图片转存失败(img-170eC5BO-1565706473365)(/]

导航条

https://www.apple.com/cn/

什么是导航条：导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

组成
整个导航条就是一个nav标签，nav与div功能相同，它是一个语义标签。

[外链图片转存失败(img-7g2abSHq-1565706473365)(/)]

属性说明

[外链图片转存失败(img-hugeJuZ1-1565706473369)(/)]

代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--对IE浏览器的兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap导航条</title>

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

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

</head>

<div class="container">
    <!--nav功能与div完全一样，只是语义区别 -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- 1. 左边商标 -->
            <div class="navbar-header">
                <!--折叠后看到的按钮-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <!--折叠后看到的按钮样子-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--左边的商标-->
                <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-globe"></span>黑马旅游</a>
            </div>

            <!-- 2.链接，提交按钮，下拉菜单 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">周边游<span class="sr-only">(current)</span></a></li>
                    <li><a href="#">国内游</a></li>
                    <li><a href="#">港澳游</a></li>
                    <li><a href="#">境外游</a></li>

                    <!--下拉菜单-->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>

                <!--表单，提交按钮和文本框-->
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="请输入">
                    </div>
                    <button type="button" class="btn btn-default">搜索</button>
                </form>

            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
</body>
</html>

小结

导航条的作用是什么？

方便网页跳转到其他网页。

复制修改即可

组件：缩略图

目标

查询Bootstrap文档使用缩略图

缩略图介绍

[外链图片转存失败(img-rQ1uj6QL-1565706473369)(/)]

[外链图片转存失败(img-Ban4QLMx-1565706473369)(/)]

通过缩略图组件扩展 Bootstrap的栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。

缩略图的类样式

[外链图片转存失败(img-kkTuCBe0-1565706473369)(/)]

标准缩略图

[外链图片转存失败(img-Nn36Hjlz-1565706473369)(/)]

自定义缩略图

[外链图片转存失败(img-CRX3qt8b-1565706473369)()]

代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--设置字符集-->
    <meta charset="utf-8">
    <!--告诉浏览器使用H5的内核去解析-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
    设置视口：在浏览器中虚拟容器，可以在不同的设备上自适应的
    网页宽度：等于设备宽度
    初始缩放比：1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- 1. 修改bootstrap.css文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h2>缩略图</h2>
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <!--缩略图-->
            <a href="#" class="thumbnail">
                <img src="img/03.jpg">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <!--缩略图-->
            <a href="#" class="thumbnail">
                <img src="img/04.jpg">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <!--缩略图-->
            <a href="#" class="thumbnail">
                <img src="img/05.jpg">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <!--缩略图-->
            <a href="#" class="thumbnail">
                <img src="img/06.jpg">
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6 col-md-4">
            <!--缩略图-->
            <div class="thumbnail">
                <img src="img/07.jpg">
                <div class="caption">
                    <h3>海南双飞四天游</h3>
                    <p>一天到晚游泳的鱼</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a>
                        <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <!--缩略图-->
            <div class="thumbnail">
                <img src="img/07.jpg">
                <div class="caption">
                    <h3>海南双飞四天游</h3>
                    <p>一天到晚游泳的鱼</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a>
                        <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <!--缩略图-->
            <div class="thumbnail">
                <img src="img/07.jpg">
                <div class="caption">
                    <h3>海南双飞四天游</h3>
                    <p>一天到晚游泳的鱼</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a>
                        <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <!--缩略图-->
            <div class="thumbnail">
                <img src="img/07.jpg">
                <div class="caption">
                    <h3>海南双飞四天游</h3>
                    <p>一天到晚游泳的鱼</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a>
                        <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 2. 导入jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

小结

缩略图有哪两种？

  1. 简单的只有图片， 复制，修改图片的地址

  2. 自定义的，除了图片还有文字， 复制， 修改图片地址，修改内容

组件：分页组件

目标

查询Bootstrap学习分页组件

[外链图片转存失败(img-dbUtJhGN-1565706473369)()]

作用：为您的网站或应用提供带有展示页码的分页组件。

[外链图片转存失败(img-vY6luJXd-1565706473369)(/)]

小结

分页组件，复制，修改页数和左右按钮

JavaScript插件：模态框

目标

查询Bootstrap学习JavaScript插件：模态框

模态框概念

模态框（Modal）是覆盖在父窗体上的子窗体,是一个经常使用的组件。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动，一般用于提示信息，确认信息，表单,登录，注册等内容。模态框弹出时其他页面元素不可被选中。

相关属性

[外链图片转存失败(img-6khEC6Wp-1565706473369)(/)]

模态框案例

点击下面按钮，以模态框形式弹出下面添加联系人表单

[外链图片转存失败(img-icvmIVJ8-1565706473369)(/)]

[外链图片转存失败(img-WPYrOSsr-1565706473369)(/)]

data-target="#myModal"： 呼出指定id的模态框

小结

模态框的类样式是？.modal

按钮呼出模态框：

data-target="#myModal"呼出指定id的模态框

JavaScript插件：轮播图

目标

查询Bootstrap文档创建轮播图

轮播图介绍

Bootstrap的Javascript插件必须要使用到jQuery框架
这个组件用于轮播显示一组图片，类似于旋转木马，页面加载就自动运行，也可以通过点击左右的两个箭头向左或向右翻页。

类样式名

[外链图片转存失败(img-av3IyEi1-1565706473369)(/]

相关的属性

[外链图片转存失败(img-9KThZBjk-1565706473373)(/)]

代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--对IE浏览器的兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap模板</title>

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

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<h3>轮播图</h3>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000" style="width: 60%; margin: auto">
    <!-- 指示器,下边中间的小圆点 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

    <!-- 轮播器的图片 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="img/01.jpg" alt="...">
            <div class="carousel-caption">
                第一张
            </div>
        </div>
        <div class="item">
            <img src="img/02.jpg" alt="...">
            <div class="carousel-caption">
                第二张
            </div>
        </div>
        <div class="item">
            <img src="img/03.jpg" alt="...">
            <div class="carousel-caption">
                第三张
            </div>
        </div>
        <div class="item">
            <img src="img/04.jpg" alt="...">
            <div class="carousel-caption">
                第四张
            </div>
        </div>
    </div>

    <!-- 左右箭头 -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</body>
</html>

小结

轮播图三个组成部分：

  1. carousel-indicators: 小圆圈，指示器
  2. carousel-inner: 存放要轮流显示的图片
  3. carousel-control: 左右按钮
罪恶的拓海
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 框架
菜鸟心声：学的不仅是技术，更是梦想！
03-19 653
第02章-前端核心技术-Bootstrap框架 Bootstrap框架第02章-前端核心技术-Bootstrap框架Bootstrap 概述支持的浏览器Bootstrap 安装Bootstrap 基础边距显示隐藏其他Bootstrap 布局Bootstrap 按钮按钮组Bootstrap 导航面包屑导航（Breadcrumb）基础导航栏垂直菜单菜单铺满标签页导航（nav-tabs）面包屑导航 （nav-pills）Bootstrap 折叠Bootstrap 轮播图Bootstrap 表格Bootstrap分
Bootstrap的图片轮播示例代码
09-03
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文给大家分享Bootstrap的图片轮播示例代码，小伙伴们快来围观吧。
Bootstrap前端开发框架【使用教程】
DIUDIUjiang的博客
05-06 8015
Bootstrap 来自 Twitter(推特)，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 中文官网：http://www.bootcss.com/ 官网：http://getbootstrap.com/ 推荐使用：http://bootstrap.css88.com/ 框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框..
Bootstrap前端框架的整合与应用
2302_78109835的博客
10-31 587
下面以一个简单的网站为例，介绍如何使用Bootstrap实现网站的布局和功能。通过使用Bootstrap，我们可以快速实现这些功能，并且保证网站的兼容性和响应式布局。Bootstrap支持的浏览器包括Chrome、Firefox、Safari、Edge等主流浏览器。在当今的互联网开发领域，Bootstrap无疑是前端开发框架中的佼佼者。它以简单、灵活、美观的特点，赢得了广大开发者的喜爱。本文将详细介绍Bootstrap前端框架的整合和应用，帮助大家更好地理解和使用这个强大的工具。
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
最新发布
lbcbjtlhmjq的博客
05-30 868
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
前端之Bootstrap框架
qq_53842456的博客
11-07 8145
Bootstrap是一个开源的前端框架，用于快速构建响应式和移动设备优先的网站或应用程序。它包含了HTML、CSS和JavaScript的模板和工具集，使开发人员能够快速地创建具有一致性和现代外观的页面布局和UI组件。Bootstrap最初由Twitter的一些工程师创建，旨在简化Web开发的过程。它提供了一个广泛的预定义样式和组件库，可以轻松自定义和扩展，以满足各种需求。使用Bootstrap，开发人员可以更加专注于网站或应用程序的功能和逻辑，而不必从头开始编写CSS样式和设计页面布局。
BootStrap框架
m0_57851747的博客
12-06 646
BootStrap框架的使用，包含栅格系统，组件，插件，全局样式，定制等
bootstrap框架
07-14
Bootstrap框架是世界上最流行的前端开发框架之一，由Twitter的开发者们创建并开源。它是一个用于构建响应式布局和移动设备优先的Web项目的工具集。Bootstrap框架的核心特性包括易于使用的HTML、CSS和JavaScript组件...
23.0 Bootstrap 框架
10-04
8. **学习资源**："bootstrap框架1.eddx"和"23.0 Bootstrap 框架1.md"可能是教程文档或课程材料，提供了进一步的学习指导，帮助开发者了解如何有效地使用Bootstrap。 在实际开发中，理解并熟练运用Bootstrap可以...
Bootstrap系列之轮播图（Carousel）
老__L的博客
06-05 8255
一个幻灯片组件，用于循环浏览元素、图像或文本幻灯片，就像旋转木马一样。旋转木马是一个通过一系列内容循环的幻灯片，用CSS 3D转换和一点JavaScript构建。它可以处理一系列图像、文本或自定义标记。它还包括对previous/next控件和指示器的支持。在支持页面可见性API的浏览器中，当网页对用户不可见时，旋转木马将避免滑动(如当浏览器选项卡不活跃，浏览器窗口最小化，等等)。请注意，嵌套的旋转木马不受支持，而且旋转木马通常不符合无障碍标准。最后，如果您从源代码构建我们的JavaScript，它需要ut
bootstrap轮播图
qq_36943809的博客
12-18 201
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-gen...
模态框，弹出框
09-15
这是一个js文件，常见用法：$.dialog.alert('警告'),$.dialog.confirm('确认'),$.dialog.confirmDanger('删除'),$.dialog.prompt('提问'),$.dialog.tips('短暂提示')
利用Bootstrap实现轮播图
qq_52526079的博客
05-13 871
在实现轮播图的过程中引入的Bootstrap css文件和集成包时需要删除一下两个属性，否则会报错。
BootStrap 实现轮播图
christmassss的博客
01-15 1933
在下载好的文件夹中找到下面的文件，复制到自己的项目中并引入。复制下面的代码到我们的html页面中。添加自己的图片，就可以实现轮播图了。
bootstrap实现轮播图
qq_44981598的博客
09-15 824
【代码】bootstrap实现轮播图。
全面解析Bootstrap图片轮播效果
weixin_34375054的博客
05-05 315
http://www.jb51.net/article/75806.htm   一 . 结构分析 一个轮播图片主要包括三个部分： 　　☑ 轮播的图片 　　☑ 轮播图片的计数器 　　☑ 轮播图片的控制器 第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。 复制代码 代码如下...
Bootstrap学习笔记（2）Bootstrap样式
Andanc的博客
09-05 703
一.Bootstrap整体架构 Bootstrap来自Twitter，是目前最流行的前端框架。它是基于HTML、CSS、JavaScript的一个简洁、灵活地开源框架。从官网 http://getbootstrap.com下载最新版 解压缩后可以看到三大核心目录：css(样式)、js(脚本)、fonts(字体)，就是我们所需要的 Bootstrap 运行环境。其中需要进入到页面的是 bootst...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值