来了老弟，加快编程

最新推荐文章于 2024-09-14 08:09:14 发布

小渝学长

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量120

点赞数

分类专栏： HTML 文章标签： HTML css

本文链接：https://blog.csdn.net/weixin_44548718/article/details/88916198

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本人学习编程也有小半年了，现在在本篇文章中记录这其间的一些学习编程的快捷；
在程序学习的前期时间我们首要的课程就是关于HTML/css的编程，但到了后期中我们在工作中，就需要我们能够快速的完成HTML/css样式的编程了；

在这里向看客们阐述一下bootstrap这一封装好的插件，里面已经封装好了很多的样式，而我们只需要去大概的编写一下页面的布局然后直接把样式（比如一个表格或一个button按钮的样式）拷过来就行，从而达到快速编写一个页面的效果。
Bootstrap中文网： http://www.bootcss.com/

下面是具体点的应用与教程：
在这里插入图片描述

（上图Bootstrap网站的主页面）

先开始下载bootstrap中文文档；
下载完毕后；在使用时，引用就可在很大程度上减少编程的时间，简单快捷

下方截图中是关于bootstrap中HTML的一些中文备注（我自己添加的一些文件名称，方便查找）
在这里插入图片描述
07button效果图

轮播的效果图
在这里插入图片描述

具体的应用过程：

第一步：将bootstrap的中文文档放到目标文件夹中；把bootstrap中的一个css 文件如同css文档引入一样将它引入到HTML文档中；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap ying</title>
<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
</head>

<body>
	
</body>
</html>

在这里插入图片描述

然后在相关的css样式中挑选所需的样式即可；

例：

<body>
	<div class="container">
		<!--Buttons-->
		<h3 class="h3">Buttons</h3>
		<button type="button" class="btn btn-primary">Primary</button>
		<button type="button" class="btn btn-secondary">Secondary</button>
		<button type="button" class="btn btn-success">Success</button>
		<button type="button" class="btn btn-danger">Danger</button>
		<button type="button" class="btn btn-warning">Warning</button>
		<button type="button" class="btn btn-info">Info</button>
		<button type="button" class="btn btn-light">Light</button>
		<button type="button" class="btn btn-dark">Dark</button>
		<button type="button" class="btn btn-link">Link</button>
		<!--按钮类可用于 <a>, <button>, 或 <input> 元素上-->
		
	</div>
	
</body>

在这里插入图片描述