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 步骤

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

步骤一:通用选择器

通用选择器,显示为一个星号(*)

可以与任何元素匹配

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

<html>
<head>
<style>	
	* {color : red;font-size : 9pt;font-family : "Times New Roman";}
</style>		
</head>
<body>
	<h1>我的第一个标题</h1> 
	<p>我的第一个段落</p>
	<h2>我的第二个标题</h2>
</body>
</html>

实例演示如图-1所示:

图-1

步骤二:元素选择器

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

<html>
<head>
<style>	
	h1 {color : blue ;}
	h2 {color : silver ;}
</style>		
</head>
<body>
	<h1>我的第一个标题</h1> 
	<p>我的第一个段落</p>
	<h2>我的第二个标题</h2>
</body>
</html>

实例演示如图-2所示:

图-2

步骤三:类选择器

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

类名称不能以数字开头

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

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

<html>
<head>
<style>	
#样式表中声明一个样式类
.myClass
{
 background-color : Pink;
font-size : 35pt;
}
</style>		
</head>
<body>
#将元素的 class 属性的值设置为样式类的名称
	<h1 class="myClass">我的第一个标题</h1> 
	<p class="myClass">我的第一个段落</p>
	<h2>我的第二个标题</h2>
</body>
</html>

实例演示如图-3所示:

图-3

3)多类选择器

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

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

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

<html>
<head>
<style>	
#样式表中声明一个样式类
.important {
font-weight : bold;
}
.warning {
color : red;
}
</style>		
</head>
<body>
#将元素的 class 属性的值设置为样式类的名称
	<h1 class="important">我的第一个标题</h1> 
	<p class="warning">我的第一个段落</p>
	<h2>我的第二个标题</h2>
</body>
</html>

实例演示如图-4所示:

图-4

4)分类选择器

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

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

先声明一个元素选择器

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

然后声明一个类的名称

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

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

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

<html>
<head>
<style>	
#样式表中声明一个样式类
p.important
{
color : red ;
font-size : 20pt;
border:1px solid black;
} 
</style>		
</head>
<body>
#将元素的 class 属性的值设置为样式类的名称
	<h1 class="important">我的第一个标题</h1> 
	<p  class="important">我的第一个段落</p>
	<h2>我的第二个标题</h2>
</body>
</html>

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

图-5

步骤四:id选择器

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

它仅作用于 id 属性的值

2)语法为:

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

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

<html>
<head>
<style>	
#定义一个 id 选择器
#mostImportant
{
color:red;
background:yellow;
}
</style>		
</head>
<body>
将元素的 id 属性的值设置为选择器的名称
<h1  id="mostImportant">我的第一个标题</h1> 
<p>我的第一个段落</p>
<h2>我的第二个标题</h2>
</body>
</html>

实例演示如图-6所示:

图-6

步骤五:群组选择器

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

<html>
<head>
<style>	
h2,p.important
{
color:green;
font-size:20pt;
border:1px solid red;
}
</style>		
</head>
<body>
<h1>我的第一个标题</h1> 
<p class="important">我的第一个段落</p>
<h2>我的第二个标题</h2>
</body>
</html>

实例演示如图-7所示:

图-7

步骤六:伪类选择器

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

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

选择器 : 伪类选择器

3)链接伪类

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

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

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

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

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

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

#定义伪类选择器
a:link {
color: black;
font-size:15pt;
}
a:visited {
color: pink;
font-size:15pt;
}
a:hover {
font-size : 20pt;
}
a:active {
color : red;
}

实例演示如图-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压缩文件

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

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

图-10

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

3.1 问题

【参见COOKBOOK】

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

3.2 步骤

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

步骤一:HTML5 文档类型

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

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

步骤二:移动设备优先

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>my bootstrap test</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>
<body>
...
...
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
</body>
</html>

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

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

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

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

步骤五:布局容器

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

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器

<div class="container-fluid">
  ...
</div>

步骤五:按钮

1)按钮预定义样式

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

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

实例演示如图-11所示:

图-11

2)按钮尺寸

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

<p>
  <button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
  <button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
  <button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
  <button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>

实例演示如图-12所示:

图-12

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

<button type="button" class="btn btn-primary btn-lg btn-block">(块级元素)Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">(块级元素)Block level button</button>

实例演示如图-13所示:

图-13

步骤六:文本

1)对齐

<!--设定文本左对齐-->
<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>

2)大小写

<!--小写(仅英文)-->
<p class="text-lowercase">Lowercased text.</p>
<!--文字大写(仅英文)-->
<p class="text-uppercase">Uppercased text.</p>
<!--首字母大写-->
<p class="text-capitalize">Capitalized text.</p>

实例演示如图-14所示:

图-14

3)情境文本颜色

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

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

实例演示如图-15所示:

图-15

步骤七:列表

1)无样式列表

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

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

实例演示如图-16所示:

图-16

2)内联列表

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

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

实例演示如图-17所示:

图-17

3)描述

带有描述的短语列表

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

实例演示如图-18所示:

图-18

水平排列的描述

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

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

实例演示如图-19所示:

图-19

步骤八:表单

1)基本表单

实现基本的表单样式

<form action=“” role=“form”>
<div class="form-group">
<label>电子邮件:</label>
<input type="email" class="form-control" placeholder="email地址">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" placeholder="输入密码">
</div>
<input class=“btn btn-primary” type=“submit”value=“提交”>
</form>

实例演示如图-20所示:

图-20

2)内联表单

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

<form class="form-inline">

实例演示如图-21所示:

图-21

3)表单合组

前后增加片段

<form action=“” role=“form”>
		<div class="input-group">
			<div class="input-group-addon">¥</div>
			<input type="text" class="form-control">
			<div class="input-group-addon">.00</div>
		</div>
</form>

实例演示如图-22所示:

图-22

4)水平排列

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

<form class="form-horizontal">
		<div class="form-group">
			<label class="col-sm-2 control-label">电子邮件</label>
			<div class="col-sm-10">
				<input type="email" class="form-control" placeholder="请输入您的电子邮件">
			</div>
		</div>
</form>

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

父元素样式同步。

5)复选框和单选框

设置复选框,在一行

<div class="checkbox">
		<label>
			<input type="checkbox">体育
		</label>
</div>
<div class="checkbox">
		<label>
			<input type="checkbox">音乐
		</label>
</div>

设置禁用的复选框

<div class="checkbox disabled">
		<label>
			<input type="checkbox" disabled>音乐
		</label>
</div>

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

<label class="checkbox-inline">
		<input type="checkbox">体育
</label>
<label class="checkbox-inline disabled">
		<input type="checkbox" disabled>音乐
</label>

设置单选框

<div class="radio disabled">
		<label>
			<input type="radio" name="sex" disabled>男
		</label>

6)下拉列表

设置下拉列表

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

4 案例4:使用常用组件

4.1 问题

【参见COOKBOOK】

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

4.2 步骤

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

步骤一:字体图标

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

一套图标字体——Glyphicons Halflings

基本样式类 glyphicon

其他修饰类

2)注意事项

引入 fonts 文件

不要和其他组件混合使用

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

实例演示如图-23所示:

图-23

步骤二:下拉菜单

1)基本格式

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

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <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>
  </ul>
</div>

实例演示如图-24所示:

图-24

2)标题

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

实例演示如图-25所示:

图-25

3)分割线

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

实例演示如图-26所示:

图-26

4)禁用的菜单项

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

实例演示如图-27所示:

图-27

步骤三:按钮组

1)基本按钮组

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

实例演示如图-28所示:

图-28

2)按钮工具栏

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

实例演示如图-29所示:

图-29

3)尺寸

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

实例演示如图-30所示:

图-30

4)垂直排列

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

实例演示如图-31所示:

图-31

步骤四:警告框

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

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

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<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胶囊式样式

<ul class="nav nav-tabs">
		<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
		<li><a href="#Pro" data-toggle="tab">Profile</a></li>
		<li><a href="#Pro" data-toggle="tab">Dropdown</a></li>
</ul>

实例演示如图-33所示:

图-33

2)淡入淡出效果

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

<div class="tab-content">
    <div class="tab-pane fade in active" id="home">...</div>
    <div class="tab-pane fade" id="svn">...</div>
    <div class="tab-pane fade" id="ios">...</div>
    <div class="tab-pane fade" id="java">...</div>
</div>

3)折叠框

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

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

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

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne">
                点击我进行展开,再次点击我进行折叠。第 1 部分
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                vice lomo.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseTwo">
                点击我进行展开,再次点击我进行折叠。第 2 部分
            </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
            vice lomo.
        </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseThree">
                点击我进行展开,再次点击我进行折叠。第 3 部分
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                vice lomo.
            </div>
        </div>
    </div>
</div>

实例演示如图-34所示:

图-34

3)工具提示

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

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

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

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

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

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

图-35

图-36

4)弹出框

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

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

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

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

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

实例演示如图-37所示:

图-37