学习周记4 Bootstrap的应用

最新推荐文章于 2024-08-15 11:09:53 发布

1ridescence

最新推荐文章于 2024-08-15 11:09:53 发布

阅读量75

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/IR_Mokou/article/details/115214489

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习周记4

Bootstrap的使用

1、Bootstrap网格系统

这是Bootstrap中最基础也是最重要的系统之一。网格系统可以将一个页面分为12个区域进行操作和编辑，会十分的方便。
通过div代码设定基础的网格系统

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">

在移动设备、中型设备、大型设备中网格系统的布局是不同的。
移动设备

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

中型设备

<div class="col-md-6">....</div>
<div class="col-md-6">....</div>

大型设备

<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>

2、Bootstrap的网页排版

排版标题段落代码

<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标题</title>
</head>
<body>
<h1>标题行1</h1>
<h2>标题行2</h2>
<h3>标题行3</h3>
<h4>段落行1</h4>
<h5>段落行2</h5>
<h6>段落行3</h6>
</body>
</html>

效果如下
在这里插入图片描述

3、Bootstrap表格设计

表格代码如下

<html>
<head>
	<meta charset="utf-8"> 
	<title>我的网站(iridescence.com)</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<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">
	<h2>表格test</h2>          
	<table class="table">
		<thead>
			<tr>
				<th>编号</th>
				<th>属性</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>01</td>
				<td>A</td>
			</tr>
			<tr>
				<td>02</td>
				<td>B</td>
			</tr>
			<tr>
				<td>03</td>
				<td>C</td>
			</tr>
		</tbody>
	</table>
</div>

</body>
</html>

表格效果如下
在这里插入图片描述

4、Bootstrap按钮设计

按钮类型:

<body>
<!-- 标准的按钮 -->
<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>
</body>

在这里插入图片描述

1ridescence

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习周记4 Bootstrap的应用

学习周记4Bootstrap的使用1、Bootstrap网格系统这是Bootstrap中最基础也是最重要的系统之一。网格系统可以将一个页面分为12个区域进行操作和编辑，会十分的方便。通过div代码设定基础的网格系统<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div
复制链接

扫一扫