Bootstrap ——排版、表格、表单、图片、button 学习博客（二）

最新推荐文章于 2021-01-30 16:52:49 发布

星星也会数人类嘛

最新推荐文章于 2021-01-30 16:52:49 发布

阅读量539

点赞数

分类专栏： Bootstrap 文章标签： Bootstarp 表格表单 button 浮动

本文链接：https://blog.csdn.net/qq_42627162/article/details/99572063

版权

Bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Bootstrap中的排版

1. 排版
2. 表格
3. 表单
4. 图片部分：
5. 辅助类

1. 排版

标题部分

标题： .h1 ~ .h6 / h1 ~ h6
类h1（.h1）和类h6是为了给内联元素赋值标题样式
副标题：（small）

实例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 </title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<h1>一级标题<small>我是小标题</small></h1>
	<h2>二级标题<small>我是小标题</small></h2>
	<span class="h1">内联标题一<small>我是小标题</small></span>
	<span class="h2">内联标题二<small>我是小标题</small></span>
</body>
</html>

运行结果:

运行结果

文本部分

bootstarp对p标签进行初始定义:

默认: 14px;
行高: 20px;
底部外边距: 10px;

实例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 地址</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<p><mark>Bootstrap，</mark>来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。</p>
	<p>本教程将向您讲解 Bootstrap 框架的基础，<del>通过学习这些内容</del>，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。</p>
</body>
</html>

运行结果:
在这里插入图片描述
标记标签 : < mark>
删除线: < del>
下划线: < ins>或< u>

对齐

.text-left ：文字左对齐

.text-center ：文字居中对齐

.text-right ：文字右对齐

.text-lowercase ：字母小写

.text-uppercase ：字母大写

.text-capitalize ：首字母大写

实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<p class="text-left">Bootstrap</p>
	<p class="text-center">Bootstrap</p>
	<p class="text-right">Bootstrap</p>
	
	<p class="text-lowercase">Bootstrap</p>
	<p class="text-uppercase">Bootstrap</p>
	<p class="text-capitalize">Bootstrap</p>
</body>
</html>

运行结果：
在这里插入图片描述

2. 表格

.table ：普通表格

.table-bordered ：带边框表格

.table-striped ：条纹状表格

.table-hover ：悬停变色

.table-condensed ：紧凑风格

实例：
(1) .table类

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
   <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名字</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tom</td>
         <td>New York</td>
      </tr>
      <tr>
         <td>Simmon</td>
         <td>London</td>
      </tr>
   </tbody>
</table>

</body>
</html>

运行结果:
在这里插入图片描述
(2) .table-bordered+ .table 边框

<table class="table table-bordered">
<!-->  省略内容... 同上  <-->
</table>

运行结果：
在这里插入图片描述
(3).table-bordered+ .table + .table-striped 边框+条纹状

<table class="table table-bordered table-striped">
<!-->  省略内容... 同上  <-->
</table>

运行结果：
在这里插入图片描述
(4) .table-hover 鼠标悬浮行上, 行变色

<table class="table table-bordered table-striped table-hover">
...
</table>

运行结果:
在这里插入图片描述
如果想要修改悬浮的颜色，在css中加入如下代码：

.table-hover > tbody > tr:hover > th {background-color: #1BA0B2;}

(5).table-condensed 紧凑型表格 +.table-bordered+.table

<table class="table table-bordered table-condensed">
...
</table>

在这里插入图片描述

行颜色

.danger 红色

.warning 黄色

.info 蓝色

.success 绿色

.active 灰色(鼠标悬停时的颜色)

实例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-bordered table-condensed">
   <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名字</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr class="danger">
         <td>Tom</td>
         <td>New York</td>
      </tr>
      <tr class="warning">
         <td>Simmon</td>
         <td>London</td>
      </tr>
	  <tr class="info">
		  <td>Linda</td>
		  <td>Rome</td>
	  </tr>	  
	  <tr class="success">
		  <td>Michael</td>
		  <td>Australia</td>
	  </tr>
	  <tr class="active">
		  <td>Michael</td>
		  <td>Australia</td>
	  </tr> 
	  <tr>
		  <td>Jessica</td>
		  <td>Colorado</td>
	  </tr> 
   </tbody>
</table>

</body>
</html>

运行结果:
在这里插入图片描述

3. 表单

.form-control ：默认设置宽度属性为 width：100%，input/select/textarea

.form-group：一般设置在div中，将一个div作为一个组件，包裹其他元素，获得很好的排列

.checkbox：设置复选框样式

实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 -表单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<form>
		<div class="form-group">
			<label for="input1">这是一个输入框：</label>
			<input type="text" class="form-control" id="input1">
		</div>
		
		<div class="form-group">
			<label for="select1">这是一个下拉框：</label>
			<select id="select1" class="form-control">
				<option>北京</option>
				<option>上海</option>
				<option>沈阳</option>
				<option>深圳</option>
				<option>广州</option>
			</select>
		</div>
		
		<div class="form-group">
			<label for="textarea1">这是一个文本框：</label>
			<textarea id="textarea1" class="form-control">
			</textarea>
		</div>
		
		<div class="checkbox">
			<label>
			  <input type="checkbox"> Check me out
			</label>
		</div>
	</form>
</body>
</html>

运行结果：
在这里插入图片描述

.form-inline ：使表单元素水平排列，变为内联元素

<form class="form-inline">
... 同上
</form>

运行结果：
在这里插入图片描述

.input-lg ：大输入框

.input-sm：小输入框

<div class="form-group">
	<label for="input2">这是一个大输入框：</label>
	<input type="text" class="form-control input-lg" id="input2">
</div>
<div class="form-group">
	<label for="input1">这是一个普通输入框：</label>
	<input type="text" class="form-control" id="input1">
</div>
<div class="form-group">
	<label for="input3">这是一个小输入框：</label>
	<input type="text" class="form-control input-sm" id="input3">
</div>

运行结果：
在这里插入图片描述

.sr-only ：隐藏不想显示的元素

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

实例：

<div class="form-group">
	<label for="input2" class="sr-only">这是一个大输入框：</label>
	<input type="text" class="form-control input-lg " id="input2">
</div>
<div class="form-group">
	<label for="input1">这是一个普通输入框：</label>
	<input type="text" class="form-control" id="input1">
</div>

运行结果：大输入框的label消失
在这里插入图片描述

.control-label和.has-success ：改变label和组件的状态

<div class="form-group has-success">
	<label for="input2" class="control-label">这是一个大输入框：</label>
	<input type="text" class="form-control input-lg" id="input2">
</div>

运行结果：整个组件变成sucess状态
在这里插入图片描述
同理还有has-error/has-warning等等…

button部分：

.btn：button普通类型，灰色

.btn-default：默认button，白色

.btn-info：信息button，天蓝色

.btn-warning：警告button，黄色

.btn-success：成功button，绿色

.btn-primary：主要button，推荐button，深蓝色

.btn-danger：红色

.btn-lg：大button

.btn-sm：小button

.btn-xs：超级小button

.active：使按钮变成点击状态

.disabled：使按钮变成无法点击的样式（实际可以点击，禁用button可以直接设置disabled属性）

.block：使button变成块状button

.btn-link：使button变成链接样式

给a标签加入button样式变为button，但是如果a标签被作为按钮使用，并用于在当前页面触发某些功能（不是用作传统标签的链接其他页面或者当前页面的某些部分），那么需要将a表情设置role="button"属性

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 -button</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<form>
		<button>这是普通button</button>
		<button class="btn">这是btn-button</button>
		<button class="btn btn-default">这是default-button</button>
		<button class="btn btn-info">这是info-button</button>
		<button class="btn btn-warning">这是warning-button</button>
		<button class="btn btn-success">这是success-button</button>
		<button class="btn btn-primary">这是一个button</button>
		<button class="btn btn-danger">这是一个button</button>
		<hr>
		<button class="btn btn-lg">这是lg-button</button>
		<button class="btn btn-sm">这是sm-button</button>
		<button class="btn btn-xs">这是xs-button</button>
		<hr>
		<button class="btn btn-active">这是active-button</button>
		<button class="btn btn-disabled">这是disabled-button</button>
		<button class="btn btn-block">这是block-button</button>
		<hr>
		<a class="btn btn-default" href="#" role="button">这是个a标签</a>
		<button class="btn btn-link">这是个button</button>
		
	</form>
</body>
</html>

运行结果：
在这里插入图片描述

4. 图片部分：

.img-rounded：圆角

.img-circle：圆形

.img-thumbnail：带有边框的圆角图形

实例:

<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">

运行结果：
在这里插入图片描述

.img-responsive 响应式图片

实质是为图片设置：
max-width:100%;
height:auto;
display:block;

.center-block 响应式图片水平居中

5. 辅助类

文本颜色

实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>bootstrap 文本颜色</title> 
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    
<div class="container">
	<p class="text-muted">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>    
	<p class="text-primary">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>          
	<p class="text-info">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>          
	<p class="text-success">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>          
	<p class="text-warning">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>        
	<p class="text-danger">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>
</div>

</body>
</html>

运行结果：
在这里插入图片描述

背景颜色

实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 背景颜色</title> 
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    
<div class="container">
	<p class="bg-primary">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p>
	<p class="bg-success">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p>
	<p class="bg-info">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p>
	<p class="bg-danger">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p>
	<p class="bg-warning">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p>
</div>

</body>
</html>

运行结果：
在这里插入图片描述

关闭按钮 .close

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

通过使用一个象征关闭的图标，可以让模态框和警告框消失。
运行结果:
在这里插入图片描述

三角符号 .caret

<span class="caret"></span>

运行结果:
在这里插入图片描述

元素浮动

.pull-left：元素浮动到左边

.pull-right：元素浮动到右边

.center-block：设置元素为块级元素并居中显示

.clearfix : 清除浮动

星星也会数人类嘛

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap ——排版、表格、表单、图片、button 学习博客（二）

Bootstrap中的排版1. 标题部分2. 文本部分对齐.text-left ：文字左对齐.text-center ：文字居中对齐.text-right ：文字右对齐.text-lowercase ：字母小写.text-uppercase ：字母大写.text-capitalize ：首字母大写3. 表格.table ：普通表格.table-bordered ：带边框表格.tabl...
复制链接

扫一扫