讲给后台程序员看的前端系列教程(47)——Bootstrap全局CSS样式(1)

Mybatis研习录
笨鸟向东飞
谷哥的小弟

C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

在本节教程中,我们重点关注Bootstrap提供的与基础控件相关的CSS样式。

被删除的文本

使用del标签表示删除的文本

示例如下:

<del>This line of text is meant to be treated as deleted text.</del>

带下划线的文本

使用 u标签为文本添加下划线.

示例如下:

<u>This line of text will render as underlined</u>

对齐

可通过text-left、text-center、text-right、text-justify、text-nowrap等选择器为p标签内容设置对齐方式。

示例如下:

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

按钮

Bootstrap提供了丰富的按钮样式。

示例如下:

<!-- Standard button -->
<button type="button" class="btn btn-default">默认样式</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">首选项</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">成功</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">普通信息</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">警告</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">危险</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">链接</button>

除此以外,我们还可使用类选择器.btn-lg、.btn-sm 或 .btn-xs设置按钮的尺寸。

示例如下:

<p>
	<button type="button" class="btn btn-warning btn-lg">大按钮</button>
	<button type="button" class="btn btn-success btn-lg">大按钮</button>
</p>
<p>
	<button type="button" class="btn btn-warning">默认尺寸</button>
	<button type="button" class="btn btn-success">默认尺寸</button>
</p>
<p>
	<button type="button" class="btn btn-primary btn-sm">小按钮</button>
	<button type="button" class="btn btn-danger btn-sm">小按钮</button>
</p>
<p>
	<button type="button" class="btn btn-primary btn-xs">超小尺寸</button>
	<button type="button" class="btn btn-danger btn-xs">超小尺寸</button>
</p>

超链接

Bootstrap中超链接a标签亦可使用按钮的CSS样式。

示例如下:

<a class="btn btn-default" href="http://www.ifeng.com/" role="button">Link</a>

input

在Bootstrap中假若input的type为button或submit时也可使用按钮的样式。

示例如下:

<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

图片

在Bootstrap中对于img标签可使用.img-responsive使得图片支持响应式布局;并可使用.img-rounded、.img-circle、.img-thumbnail设定图片的样式为圆角、圆形、边框。

示例如下:

<img src="img/fall.jpg" class="img-responsive" alt="Responsive image">
<img src="img/dog.jpg" alt="cute dog" class="img-rounded">
<img src="img/dog.jpg" alt="cute dog" class="img-circle">
<img src="img/dog.jpg" alt="cute dog" class="img-thumbnail">

综合示例

<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟-->
<!-- 博客地址:https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<!-- 以下3个meta标签必须置于head标签的最前位置 -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>全局CSS样式</title>
		<!-- 引入Bootstrap的css文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery文件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 引入Bootstrap的JavaScript -->
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<!-- 被删除的文本 -->
		<del>This line of text is meant to be treated as deleted text.</del>
		<br /><br />
		<!-- 带下划线的文本 -->
		<u>This line of text will render as underlined</u>
		<br /><br />
		<!-- 对齐 -->
		<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>
		<br /><br />
		<!-- 按钮样式 -->
		<!-- Standard button -->
		<button type="button" class="btn btn-default">默认样式</button>
		<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
		<button type="button" class="btn btn-primary">首选项</button>
		<!-- Indicates a successful or positive action -->
		<button type="button" class="btn btn-success">成功</button>
		<!-- Contextual button for informational alert messages -->
		<button type="button" class="btn btn-info">普通信息</button>
		<!-- Indicates caution should be taken with this action -->
		<button type="button" class="btn btn-warning">警告</button>
		<!-- Indicates a dangerous or potentially negative action -->
		<button type="button" class="btn btn-danger">危险</button>
		<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
		<button type="button" class="btn btn-link">链接</button>
		<br /><br />
		<!-- 按钮尺寸 -->
		<p>
			<button type="button" class="btn btn-warning btn-lg">大按钮</button>
			<button type="button" class="btn btn-success btn-lg">大按钮</button>
		</p>
		<p>
			<button type="button" class="btn btn-warning">默认尺寸</button>
			<button type="button" class="btn btn-success">默认尺寸</button>
		</p>
		<p>
			<button type="button" class="btn btn-primary btn-sm">小按钮</button>
			<button type="button" class="btn btn-danger btn-sm">小按钮</button>
		</p>
		<p>
			<button type="button" class="btn btn-primary btn-xs">超小尺寸</button>
			<button type="button" class="btn btn-danger btn-xs">超小尺寸</button>
		</p>
		<br /><br />
		<!-- 超链接 -->
		<a class="btn btn-default" href="http://www.ifeng.com/" role="button">Link</a>
		<br /><br />
		<!-- input -->
		<input class="btn btn-danger" type="button" value="button input">
		<input class="btn btn-success" type="submit" value="submit input">
		<br /><br />
		<!-- 图片 -->
		<img src="img/fall.jpg" class="img-responsive" alt="Responsive image">
		<img src="img/dog.jpg" alt="cute dog" class="img-rounded">
		<img src="img/dog.jpg" alt="cute dog" class="img-circle">
		<img src="img/dog.jpg" alt="cute dog" class="img-thumbnail">
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

展开阅读全文
©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值