CSS 基础语法 、 尺寸与框模型 、 常用样式属性 、 Bootstrap起步 、 全局 CSS 样式和组件案例

最新推荐文章于 2023-12-13 22:38:59 发布
最新推荐文章于 2023-12-13 22:38:59 发布
阅读量550 收藏 2
点赞数
分类专栏： 第五阶段案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36345864/article/details/106107612
版权

Top

NSD Devweb DAY02

  1. 案例1：CSS 基础选择器
  2. 案例2：编写Bootstrap模板
  3. 案例3：使用全局 CSS 样式
  4. 案例4：使用常用组件
  5. 例4：使用常用插件

1 案例1：CSS 基础选择器

1.1 问题

【参见COOKBOOK】

  1. 使用 CSS 基础选择器为页面元素设置样式

1.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：通用选择器

通用选择器，显示为一个星号（*）

可以与任何元素匹配

常用于设置一些默认样式，比如设置整个文档的文本的默认字体和大小、颜色等

 
  1. <html>
  2. <head>
  3. <style>    
  4.     * {color : red;font-size : 9pt;font-family : "Times New Roman";}
  5. </style>        
  6. </head>
  7. <body>
  8.     <h1>我的第一个标题</h1>
  9.     <p>我的第一个段落</p>
  10.     <h2>我的第二个标题</h2>
  11. </body>
  12. </html>

实例演示如图-1所示：

图-1

步骤二：元素选择器

html 文档的元素就是选择器， 比如 <p>、<h1> 等

 
  1. <html>
  2. <head>
  3. <style>    
  4.     h1 {color : blue ;}
  5.     h2 {color : silver ;}
  6. </style>        
  7. </head>
  8. <body>
  9.     <h1>我的第一个标题</h1>
  10.     <p>我的第一个段落</p>
  11.     <h2>我的第二个标题</h2>
  12. </body>
  13. </html>

实例演示如图-2所示：

图-2

步骤三：类选择器

1)语法为：.className { color:red;}

类名称不能以数字开头

2)所有能够附带class属性的元素都可以使用此样式声明

将元素的 class属性的值设置为样式类名

 
  1. <html>
  2. <head>
  3. <style>    
  4. #样式表中声明一个样式类
  5. .myClass
  6. {
  7. background-color : Pink;
  8. font-size : 35pt;
  9. }
  10. </style>        
  11. </head>
  12. <body>
  13. #将元素的 class 属性的值设置为样式类的名称
  14.     <h1 class="myClass">我的第一个标题</h1>
  15.     <p class="myClass">我的第一个段落</p>
  16.     <h2>我的第二个标题</h2>
  17. </body>
  18. </html>

实例演示如图-3所示：

图-3

3)多类选择器

可以将多个类选择器应用于同一个元素

HTML 元素的 class 属性的值中可能包含一个词列表

各个词之间用空格分隔，每个词都是一个类选择器

 
  1. <html>
  2. <head>
  3. <style>    
  4. #样式表中声明一个样式类
  5. .important {
  6. font-weight : bold;
  7. }
  8. .warning {
  9. color : red;
  10. }
  11. </style>        
  12. </head>
  13. <body>
  14. #将元素的 class 属性的值设置为样式类的名称
  15.     <h1 class="important">我的第一个标题</h1>
  16.     <p class="warning">我的第一个段落</p>
  17.     <h2>我的第二个标题</h2>
  18. </body>
  19. </html>

实例演示如图-4所示：

图-4

4)分类选择器

可以将类选择器和元素选择器结合起来使用，实现对某种元素中不同样式的细分控制

5)语法为：元素选择器 .className { }

先声明一个元素选择器

然后使用一个点号（.）代表将使用类选择器

然后声明一个类的名称

最后使用一对大括号声明样式规则

6)将样式规则与附带 class 属性的某种元素匹配

元素的 class 属性的值为分类选择器中指定的样式类名

 
  1. <html>
  2. <head>
  3. <style>    
  4. #样式表中声明一个样式类
  5. p.important
  6. {
  7. color : red ;
  8. font-size : 20pt;
  9. border:1px solid black;
  10. }
  11. </style>        
  12. </head>
  13. <body>
  14. #将元素的 class 属性的值设置为样式类的名称
  15.     <h1 class="important">我的第一个标题</h1>
  16.     <p class="important">我的第一个段落</p>
  17.     <h2>我的第二个标题</h2>
  18. </body>
  19. </html>

注意：只有 <p> 元素使用样式，实例演示如图-5所示：

图-5

步骤四：id选择器

1)id 选择器以一种独立于文档元素的方式来指定样式

它仅作用于 id 属性的值

2)语法为：

选择器前面需要有一个 # 号

选择器本身则为文档中某个元素的 id 属性的值

 
  1. <html>
  2. <head>
  3. <style>    
  4. #定义一个 id 选择器
  5. #mostImportant
  6. {
  7. color:red;
  8. background:yellow;
  9. }
  10. </style>        
  11. </head>
  12. <body>
  13. 将元素的 id 属性的值设置为选择器的名称
  14. <h1 id="mostImportant">我的第一个标题</h1>
  15. <p>我的第一个段落</p>
  16. <h2>我的第二个标题</h2>
  17. </body>
  18. </html>

实例演示如图-6所示：

图-6

步骤五：群组选择器

选择器声明为以逗号隔开的选择器列表，将一些相同的规则作用于多个元素

 
  1. <html>
  2. <head>
  3. <style>    
  4. h2,p.important
  5. {
  6. color:green;
  7. font-size:20pt;
  8. border:1px solid red;
  9. }
  10. </style>        
  11. </head>
  12. <body>
  13. <h1>我的第一个标题</h1>
  14. <p class="important">我的第一个段落</p>
  15. <h2>我的第二个标题</h2>
  16. </body>
  17. </html>

实例演示如图-7所示：

图-7

步骤六：伪类选择器

1)伪类用于向某些选择器添加特殊的效果

2)使用冒号(:)作为结合符，结合符左边是其他选择器，右边是伪类

选择器 : 伪类选择器

3)链接伪类

: link ，适用于尚未访问的链接

: visited ，适用于访问过的链接

4)动态伪类，用于呈现用户操作

:hover，适用于鼠标悬停在 HTML 元素时

:active，适用于 HTML 元素被激活时

:focus，适用于 HTML 元素获取焦点时

 
  1. #定义伪类选择器
  2. a:link {
  3. color: black;
  4. font-size:15pt;
  5. }
  6. a:visited {
  7. color: pink;
  8. font-size:15pt;
  9. }
  10. a:hover {
  11. font-size : 20pt;
  12. }
  13. a:active {
  14. color : red;
  15. }

实例演示如图-8、图-9所示：

图-8

图-9

2 案例2：编写Bootstrap模板

2.1 问题

【参见COOKBOOK】

  1. 使用 BootStrap 模版创建页面

2.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：使用内联样式为<p>元素设置样式

目录说明：

1)css目录用于存放Bootstrap框架使用的样式文件：

bootstrap.css文件：Bootstrap框架的样式文件

bootstrap.min.css文件：Bootstrap框架的样式压缩文件

bootstrap-theme.css文件：Bootstrap框架的主题文件

2)fonts目录用于存放Bootstrap框架使用的字体文件：

3)js目录用于存放Bootstrap框架使用的核心javascript文件：

bootstrap.js文件：Bootstrap框架的核心javascript文件

bootstrap.min.js文件：Bootstrap框架的核心javascript压缩文件

 
  1. <!—声明 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7.      <!-- 上述meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ 元数据-->
  8. <title>my bootstrap test</title>
  9. <!-- Bootstrap 样式-->
  10. <link rel="stylesheet" href="static/css/bootstrap.min.css">
  11. </head>
  12. <body>
  13. <!—页面内容-->
  14. <div class="container">
  15. <p>
  16. press <kbd>ctrl + C</kbd> to break.
  17. </p>
  18. <a href="http://www.bootcss.com">bootstrap中文网</a>
  19. </div>
  20. <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery)，想要使用Bootstrap框架，必须要先引入jQuery文 件 -->
  21. <script src="static/js/jquery.min.js"></script>
  22. <!-- 加载 Bootstrap 的所有 JavaScript 插件-->
  23. <script src="static/js/bootstrap.min.js"></script>
  24. </body>
  25. </html>

步骤二：实例演示如图-10所示：

图-10

3 案例3：使用全局 CSS 样式

3.1 问题

【参见COOKBOOK】

  1. 使用全局 CSS 样式定义页面

3.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：HTML5 文档类型

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置

 
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. ...
  4. </html>

步骤二：移动设备优先

为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据元素

 
  1. <meta name="viewport" content="width=device-width, initial-scale=1">

步骤三：将Bootstrap模板补充完整

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>my bootstrap test</title>
  7. <link rel="stylesheet" href="static/css/bootstrap.min.css">
  8. </head>
  9. <body>
  10. ...
  11. ...
  12. <script src="static/js/jquery.min.js"></script>
  13. <script src="static/js/bootstrap.min.js"></script>
  14. </body>
  15. </html>

步骤四：了解CSS全局样式的设置

1)为 body 元素设置 background-color: #fff;body元素背景色设置为白色

2)使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数

3)为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

步骤五：布局容器

.container 类用于固定宽度并支持响应式布局的容器

 
  1. <div class="container">
  2. ...
  3. </div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

 
  1. <div class="container-fluid">
  2. ...
  3. </div>

步骤五：按钮

1)按钮预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮：

 
  1. <button type="button" class="btn btn-default">（默认样式）Default</button>
  2. <button type="button" class="btn btn-primary">（首选项）Primary</button>
  3. <button type="button" class="btn btn-success">（成功）Success</button>
  4. <button type="button" class="btn btn-info">（一般信息）Info</button>
  5. <button type="button" class="btn btn-warning">（警告）Warning</button>
  6. <button type="button" class="btn btn-danger">（危险）Danger</button>
  7. <!--链接按钮鼠标悬停才有下划线-->
  8. <button type="button" class="btn btn-link">（链接）Link</button>

实例演示如图-11所示：

图-11

2)按钮尺寸

使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮

 
  1. <p>
  2. <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  3. <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
  4. </p>
  5. <p>
  6. <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  7. <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
  8. </p>
  9. <p>
  10. <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  11. <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
  12. </p>
  13. <p>
  14. <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  15. <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
  16. </p>

实例演示如图-12所示：

图-12

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

 
  1. <button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
  2. <button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

实例演示如图-13所示：

图-13

步骤六：文本

1)对齐

 
  1. <!--设定文本左对齐-->
  2. <p class="text-left">Left aligned text.</p>
  3. <!--设定文本右对齐-->
  4. <p class="text-center">Center aligned text.</p>
  5. <!--设定文本居中对齐-->
  6. <p class="text-right">Right aligned text.</p>
  7. <!--设定文本对齐，段落超出屏幕部分文字自动换行-->
  8. <p class="text-justify">Justified text.</p>
  9. <!--段落超出屏幕部分不换行-->
  10. <p class="text-nowrap">No wrap text.</p>

2)大小写

 
  1. <!--小写（仅英文）-->
  2. <p class="text-lowercase">Lowercased text.</p>
  3. <!--文字大写（仅英文）-->
  4. <p class="text-uppercase">Uppercased text.</p>
  5. <!--首字母大写-->
  6. <p class="text-capitalize">Capitalized text.</p>

实例演示如图-14所示：

图-14

3)情境文本颜色

通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样

 
  1. <p class="text-muted">...</p>
  2. <p class="text-primary">...</p>
  3. <p class="text-success">...</p>
  4. <p class="text-info">...</p>
  5. <p class="text-warning">...</p>
  6. <p class="text-danger">...</p>

实例演示如图-15所示：

图-15

步骤七：列表

1)无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素

 
  1. <ul class="list-unstyled">
  2. <li>...</li>
  3. </ul>

实例演示如图-16所示：

图-16

2)内联列表

通过设置 display: inline-block，将所有元素放置于同一行。

 
  1. <ul class="list-inline">
  2. <li>...</li>
  3. </ul>

实例演示如图-17所示：

图-17

3)描述

带有描述的短语列表

 
  1. <dl>
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>

实例演示如图-18所示：

图-18

水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

 
  1. <dl class="dl-horizontal">
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>

实例演示如图-19所示：

图-19

步骤八：表单

1)基本表单

实现基本的表单样式

 
  1. <form action=“” role=“form”>
  2. <div class="form-group">
  3. <label>电子邮件：</label>
  4. <input type="email" class="form-control" placeholder="email地址">
  5. </div>
  6. <div class="form-group">
  7. <label>密码</label>
  8. <input type="password" class="form-control" placeholder="输入密码">
  9. </div>
  10. <input class=“btn btn-primary” type=“submit”value=“提交”>
  11. </form>

实例演示如图-20所示：

图-20

2)内联表单

让表单左对齐浮动，并表现为inline-block 内联块结构，为上面代码form元素增加类

 
  1. <form class="form-inline">

实例演示如图-21所示：

图-21

3)表单合组

前后增加片段

 
  1. <form action=“” role=“form”>
  2.         <div class="input-group">
  3.             <div class="input-group-addon">￥</div>
  4.             <input type="text" class="form-control">
  5.             <div class="input-group-addon">.00</div>
  6.         </div>
  7. </form>

实例演示如图-22所示：

图-22

4)水平排列

让表单内的元素保持水平排列

 
  1. <form class="form-horizontal">
  2.         <div class="form-group">
  3.             <label class="col-sm-2 control-label">电子邮件</label>
  4.             <div class="col-sm-10">
  5.                 <input type="email" class="form-control" placeholder="请输入您的电子邮件">
  6.             </div>
  7.         </div>
  8. </form>

注：这里用到了col-sm 栅格系统，后面章节会重点讲解，而control-label 表示和

父元素样式同步。

5)复选框和单选框

设置复选框，在一行

 
  1. <div class="checkbox">
  2.         <label>
  3.             <input type="checkbox">体育
  4.         </label>
  5. </div>
  6. <div class="checkbox">
  7.         <label>
  8.             <input type="checkbox">音乐
  9.         </label>
  10. </div>

设置禁用的复选框

 
  1. <div class="checkbox disabled">
  2.         <label>
  3.             <input type="checkbox" disabled>音乐
  4.         </label>
  5. </div>

设置内联一行显示的复选框

 
  1. <label class="checkbox-inline">
  2.         <input type="checkbox">体育
  3. </label>
  4. <label class="checkbox-inline disabled">
  5.         <input type="checkbox" disabled>音乐
  6. </label>

设置单选框

 
  1. <div class="radio disabled">
  2.         <label>
  3.             <input type="radio" name="sex" disabled>男
  4.         </label>

6)下拉列表

设置下拉列表

 
  1. <select class="form-control">
  2.         <option>1</option>
  3.         <option>2</option>
  4.         <option>3</option>
  5.         <option>4</option>
  6.         <option>5</option>
  7. </select>

4 案例4：使用常用组件

4.1 问题

【参见COOKBOOK】

  1. 使用常用组件为页面添加元素

4.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：字体图标

1)Bootstrap提供了一套专用于Web开发/移动开发常用的

一套图标字体——Glyphicons Halflings

基本样式类 glyphicon

其他修饰类

2)注意事项

引入 fonts 文件

不要和其他组件混合使用

只对内容为空的元素起作用

 
  1. <button type="button" class="btn btn-default" aria-label="Left Align">
  2. <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
  3. </button>
  4.  
  5. <button type="button" class="btn btn-default btn-lg">
  6. <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
  7. </button>

实例演示如图-23所示：

图-23

步骤二：下拉菜单

1)基本格式

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码

 
  1. <div class="dropdown">
  2. <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  3. Dropdown
  4. <span class="caret"></span>
  5. </button>
  6. <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  7. <li><a href="#">Action</a></li>
  8. <li><a href="#">Another action</a></li>
  9. <li><a href="#">Something else here</a></li>
  10. <li role="separator" class="divider"></li>
  11. <li><a href="#">Separated link</a></li>
  12. </ul>
  13. </div>

实例演示如图-24所示：

图-24

2)标题

 
  1. <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  2. ...
  3. <li class="dropdown-header">Dropdown header</li>
  4. ...
  5. </ul>

实例演示如图-25所示：

图-25

3)分割线

 
  1. <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  2. ...
  3. <li role="separator" class="divider"></li>
  4. ...
  5. </ul>

实例演示如图-26所示：

图-26

4)禁用的菜单项

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项

 
  1. <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  2. <li><a href="#">Regular link</a></li>
  3. <li class="disabled"><a href="#">Disabled link</a></li>
  4. <li><a href="#">Another link</a></li>
  5. </ul>

实例演示如图-27所示：

图-27

步骤三：按钮组

1)基本按钮组

 
  1. <div class="btn-group" role="group" aria-label="...">
  2. <button type="button" class="btn btn-default">Left</button>
  3. <button type="button" class="btn btn-default">Middle</button>
  4. <button type="button" class="btn btn-default">Right</button>
  5. </div>

实例演示如图-28所示：

图-28

2)按钮工具栏

 
  1. <div class="btn-toolbar" role="toolbar" aria-label="...">
  2. <div class="btn-group" role="group" aria-label="...">...</div>
  3. <div class="btn-group" role="group" aria-label="...">...</div>
  4. <div class="btn-group" role="group" aria-label="...">...</div>
  5. </div>

实例演示如图-29所示：

图-29

3)尺寸

 
  1. <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
  2. <div class="btn-group" role="group" aria-label="...">...</div>
  3. <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
  4. <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

实例演示如图-30所示：

图-30

4)垂直排列

 
  1. <div class="btn-group-vertical" role="group" aria-label="...">
  2. ...
  3. </div>

实例演示如图-31所示：

图-31

步骤四：警告框

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。

 
  1. <div class="alert alert-success" role="alert">...</div>
  2. <div class="alert alert-info" role="alert">...</div>
  3. <div class="alert alert-warning" role="alert">...</div>
  4. <div class="alert alert-danger" role="alert">...</div>

实例演示如图-32所示：

图-32

5 例4：使用常用插件

5.1 问题

【参见COOKBOOK】

  1. 使用常用插件为页面添加元素

5.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：标签页

1)标签页

通过data属性:添加data-toggle="tab"或data-toggle="pill"到锚文本链接中

添加nav 和nav-tabs 类到ul中，将会应用Bootstrap标签样式，添加nav和 nav-pills类到ul中，将会应用Bootstrap胶囊式样式

 
  1. <ul class="nav nav-tabs">
  2.         <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  3.         <li><a href="#Pro" data-toggle="tab">Profile</a></li>
  4.         <li><a href="#Pro" data-toggle="tab">Dropdown</a></li>
  5. </ul>

实例演示如图-33所示：

图-33

2)淡入淡出效果

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容

 
  1. <div class="tab-content">
  2.     <div class="tab-pane fade in active" id="home">...</div>
  3.     <div class="tab-pane fade" id="svn">...</div>
  4.     <div class="tab-pane fade" id="ios">...</div>
  5.     <div class="tab-pane fade" id="java">...</div>
  6. </div>

3)折叠框

data-toggle="collapse"添加到您想要展开或折叠的组件的链接上。

href或data-target属性添加到父组件，它的值是子组件的id。

data-parent属性把折叠面板（accordion）的id添加到要展开或折叠的组件链接上。

 
  1. <div class="panel-group" id="accordion">
  2. <div class="panel panel-default">
  3. <div class="panel-heading">
  4. <h4 class="panel-title">
  5. <a data-toggle="collapse" data-parent="#accordion"
  6. href="#collapseOne">
  7. 点击我进行展开，再次点击我进行折叠。第 1 部分
  8. </a>
  9. </h4>
  10. </div>
  11. <div id="collapseOne" class="panel-collapse collapse in">
  12. <div class="panel-body">
  13. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
  14. cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
  15. vice lomo.
  16. </div>
  17. </div>
  18. </div>
  19. <div class="panel panel-default">
  20. <div class="panel-heading">
  21. <h4 class="panel-title">
  22. <a data-toggle="collapse" data-parent="#accordion"
  23. href="#collapseTwo">
  24. 点击我进行展开，再次点击我进行折叠。第 2 部分
  25. </a>
  26. </h4>
  27. </div>
  28. <div id="collapseTwo" class="panel-collapse collapse">
  29. <div class="panel-body">
  30. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
  31. cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
  32. vice lomo.
  33. </div>
  34. </div>
  35. </div>
  36. <div class="panel panel-default">
  37. <div class="panel-heading">
  38. <h4 class="panel-title">
  39. <a data-toggle="collapse" data-parent="#accordion"
  40. href="#collapseThree">
  41. 点击我进行展开，再次点击我进行折叠。第 3 部分
  42. </a>
  43. </h4>
  44. </div>
  45. <div id="collapseThree" class="panel-collapse collapse">
  46. <div class="panel-body">
  47. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
  48. cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
  49. vice lomo.
  50. </div>
  51. </div>
  52. </div>
  53. </div>

实例演示如图-34所示：

图-34

3)工具提示

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。

通过 data 属性：如需添加一个提示工具（tooltip），只需向一个标签添加 data-toggle="tooltip" 即可。标签的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

 
  1. <button data-toggle="tooltip" title="默认的 Tooltip"> 默认的 Tooltip</button>
  2. <button data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</button>
  3. <button data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</button>
  4. <button data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</button>
  5. <button data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</button>

提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：

 
  1. <script>
  2.         $(function () { $("[data-toggle='tooltip']").tooltip(); });
  3. </script>

实例演示如图-35、图-36所示：

图-35

图-36

4)弹出框

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。

通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。。

 
  1. <a href="#" data-toggle="popover" title="请悬停在我的上面">
  2. 请悬停在我的上面
  3. </a>

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

 
  1. <script>
  2.         $(function () { $("[data-toggle='popover']").popover(); });
  3. </script>

实例演示如图-37所示：

图-37

我爱DC
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap使用
xiaoxiao1777的博客
12-28 361
1.下载 用于生产环境的BootStrap，此页面上方标题栏：全局css样式，可以在线查看想要的样式效果，下载好的里面有三个文件夹：css，js，fonts 2.复制到项目的resources-static下 3.将静态资源css和js引入到自定义的html页面中 3.1css和js文件分为，如：bootstrap.css和bootstrap.min.css，这两个有啥区别？ ...
B站(云e办)SpringBoot实战练习的Sql文件、前端Vue源码、后端springboot源码
m0_54849806的博客
02-26 1052
B站SpringBoot实战练习的资源 1. Sql下载地址： 2. 前端源码下载地址： 3. 后端源码下载地址 资源来源——网络资源搜索！github开源项目练习！ 1. Sql下载地址： 链接：点击我下载sql文件 提取码：yeb7 2. 前端源码下载地址： 链接：点我下载前端代码 提取码：yeb7 3. 后端源码下载地址 链接：点我下载前端代码 提取码：yeb7 如需在线api文档请联系 qq： 87395809, 表明来意 总结 写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自
CSS文本样式14个示例
Python私教
03-26 2242
font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。文本排列属性是用来设置文本的水平对齐方式。当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。font-wight可以设置字体的粗细，值是100-700的整百数，也可以bold表示加粗和normal表示普通。font-size可以设置文字的大小，支持的单位有px像素，百分比，em等。
Bootstrap的CSS样式使用、栅格系统、组件
苦作舟的空城机
09-03 840
目录 关于bootstrap的CSS类参考：https://v3.bootcss.com/css/#type-headings 文本对齐类 改变大小写 缩略语 地址 表格 栅格系统 简介 表单 组件 下拉菜单 例子：导航栏 关于bootstrap的CSS类参考：https://v3.bootcss.com/css/#type-headings 文本对齐类 通过文本对齐...
BootStrap-CSS样式_排版_表单、表单控件
LoveyourselfJiuhao的博客
12-01 2004
1. 基本表单 form样式：默认不显示，基本表单 form-group样式：表单内设置分组 form-control样式：设置控件并绑定控件默认样式 2. 内联表单 form-inline样式：设置为内联排列表单 3. 水平排列表单 form-horizontal样式：设置为水平排列表单 4. 表单支持控件 type="text"：文本框 textarea标签：多行文本框 ...
BootStrap CSS全局样式和表格样式源码解析
08-31
了解这些基础的BootStrap全局样式和表格样式，能帮助开发者快速创建出美观且响应式的网页布局。BootStrap的源码解析有助于理解其工作原理，便于自定义和扩展。在实际开发中，结合其他组件如按钮、表单、导航等，可以...
BootStrap入门到实战：BootStrap全局CSS样式（一）
最新发布
05-14
总结一下，BootStrap全局CSS样式是其强大功能的关键，包括但不限于响应式网格系统、预定义的样式类、按钮组件和图片处理。理解并熟练应用这些知识点，能让你在网页开发中事半功倍。通过"img"这个压缩包文件，你可能...
Bootstrap3.3.6 中文手册-全局CSS样式
04-19
Bootstrap3.3.6 中文手册-全局CSS样式 黑白版本
bootstrap3全局css样式中文文档
06-13
bootstrap3全局css样式中文文档，设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
css-常见的样式和案例
qyk666的博客
12-13 90
【代码】css学习。
20多个CSS样式表精选案例（实用、常用案例）
08-24
个人精心整理收藏，值得推荐！包括《网页设计标准尺寸》文档 搜索引擎 DIV层居中 无图片实现圆角框 精典布局等实用案例！无论新手老手都值得收藏！
CSS样式案例啊哈前端
02-28
CSS经典样式案例，效果非常好用，简单易学，快来掌握吧
CSS样式案例集大全
10-09
CSS 样式 案例集 这里包括了css中企业实战的案例。
CSS常见样式的介绍和使用（附加案例）
PIKapikaaaa的博客
03-21 6790
CSS常见样式的介绍和使用（附加案例） 选择器的理解与应用 常见样式 附加案例
css-bootstrap
weixin_33845477的博客
09-30 105
CSS概览 基本的bootstrap包含三个文件，引入到html页面中 <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> <script src="{% static 'js/jquery.min.js' %}"></script> <...
python Django 提示“"GET /static/css/bootstrap.min.css.map HTTP/1.1" 404”错误
xlk_1996的博客
04-04 8430
python Django 提示““GET /static/css/bootstrap.min.css.map HTTP/1.1” 404”错误 提示这个错误说明找不到booststrap.min.css.map这个文件，我们只需要把下载的boostrap里的bootstrap.min.css.map文件也放到Django项目中的bootstrap.min.css所在的文件夹即可。 ...
CSS-200个小案例（一）
qq_55154022的博客
12-15 2920
最近我在youtube上跟着大神学习200个CSS小案例，作者Online Tutorials 编码的内容很实用，案例中涉及定位、变换、动画等概念，适合进一步学习和巩固CSS知识，能帮助我们实现页面的特效。
freemarker 如何访问Static下bootstrap的静态目录css,js文件
Tiger_Paul的博客
01-20 1034
解决访问Static下bootstrap的静态目录css,js文件
django html里找不到css文件路径,python – django找不到静态/ css文件错误404
weixin_42355387的博客
07-03 995
这个问题似乎是众所周知的,然而,大多数都是陈旧的Q& A并且他们没有解决我的问题.我正在使用Django 2.0.2,当我的简单网页没有渲染我的bootstrap.css文件,因为它根本找不到它.这是我的文件结构：myproject/|-- myproject/| |-- boards/| |-- myproject/| |-- templates/| |-- st...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值