bootstrap常用知识点整理

最新推荐文章于 2021-09-02 10:31:08 发布

美貌与智慧并存的妞

最新推荐文章于 2021-09-02 10:31:08 发布

阅读量912

点赞数 3

分类专栏： bootstrap 文章标签：前端 bootstrap

本文链接：https://blog.youkuaiyun.com/wawa648305941/article/details/88918656

版权

本文详细介绍了Bootstrap的基础知识，包括环境安装、主要特点、表格样式、表单、按钮样式、栅格系统以及各种CSS组件，如下拉菜单、按钮组、输入框组等，帮助读者深入理解并掌握Bootstrap的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是bootstrap？

2、为什么使用Bootstrap或者Bootstrap有什么样的特点？

1、布局容器类样式：.container 和 .container-fluid

2、标题样式：

~

3、行内文本样式：

4、文本对齐样式：.text-left、.text-center、.text-right、.text-justify

5、列表样式：

表格样式

1、.table ：表格全局样式(少量padding和水平方向的分割线)。

2、.table-striped：有条纹的背景色行(隔行变色)

3、.table-bordered：带边框的表格

4、.table-hover：鼠标悬停效果(放上变色、离开恢复)

5、.table-condensed：紧凑的表格(单元格内补会减半)

1.什么是bootstrap？

Bootstrap主要是前端的框架(HTML、CSS、JS)。

2、为什么使用Bootstrap或者Bootstrap有什么样的特点？

学习比较简单，只要有了HTML、CSS、JS基础，就可以学习。

响应式布局。

移动设备优先。

Bootstrap环境安装

Bootstrap下载

中文网址：http://v3.bootcss.com/

包含生产环境的bootstrap、less、sass

要想使用bootstrap必须加载jQuery

Bootstrap基本模板

1、HTML5文档类型定义

<!DOCTYPE html>

2、字符集设置

<meta charset="utf-8">

3、移动设备优先

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

4、引入CSS和JS文件

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

总模板为：

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

</body>
</html>

CSS全局样式

1、布局容器类样式：.container 和 .container-fluid

.container固定宽度并且具有响应式。

.container-fluid自由宽度(100%宽度)。

2、标题样式：<h1>~<h6>

<h1>~<h6>样式重写了，基本上做到了兼容性。

3、行内文本样式：

<b>：加粗
<strong>加粗
<i>：斜体
<em>斜体，HTML5新标记
<del>删除线，HTML5新标记。
<s>删除线

4、文本对齐样式：.text-left、.text-center、.text-right、.text-justify

.text-left：文本左对齐
.text-right：右对齐
.text-center：居中对齐
.text-justify：两端对齐

5、列表样式：

.list-unstyled(无符号)：去掉前面的符号。
.list-inline(行内块)

表格样式

1、.table ：表格全局样式(少量padding和水平方向的分割线)。

<table class="table">
	<tr>
		<td>编号</td>
		<td>新闻标题</td>
		<td>发布者</td>
		<td>发布时间</td>
	</tr>

效果图：

2、.table-striped：有条纹的背景色行(隔行变色)

<table class="table table-striped">
	<tr>
		<td>编号</td>
		<td>新闻标题</td>
		<

最低0.47元/天解锁文章