bootstrap(响应式，进度条，标题栏，字体图标，分页等等)

最新推荐文章于 2025-06-07 08:28:40 发布

原创

最新推荐文章于 2025-06-07 08:28:40 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何利用Bootstrap快速构建响应式栅栏布局，涵盖了HTML、CSS和JS基础，适合有基础的学习者。内容包括响应式设计、标题栏、字体图标和分页等组件的使用。

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

有HTML，css,js基础去学bootstrap十分的容易，做如下笔记：

var  文本样式= {
	标题样式：[.h1,.h2,.h3],
	加深加重：[<mark></mark><strong></strong>],
	删除线：[<del></del>],
	下划线：[<ins></ins>],
	段落：[<p></p>],
	文本变小：[<small></small>],
	文本左/中/右对齐:[.text-left， .text-center, .text-right ],
	大小写：[.text-lowercase  uppercase caplize]

  }

var 表格={
	斑马线:[.table table-striped],
	表格框:[.table table-bordered],
	鼠标悬浮有反应：[.table table-hover]
	改变某一行的颜色名：[(在某一行的tr上面)class="success"(danger active info warning)]
	}
var 表单={
	大整体:.form-inline（水平排序）.form-horizontal(垂直),
	小整体:class="form-group",
	输入框,文本域，下拉选择：	.form-control,
	输入框大小：.input-lg,
	label提示信息自动判断需不需要有：.sr-only,
	label可控制：.control-label,
	输入框颜色变化：.has-success .has-error .has-warning .has-feedback,
	输入框添加图标：
	按钮：.btn
	按钮默认效果：.btn-default
	按钮颜色变化：.btn-success .btn-primary .btn-info .btn-warning .btn-danger ,
	类似链接的按钮效果：.btn-link,
	按钮大小：.btn-lg .btn-sm .btn-block(全屏大小),
	按钮按下状态:.active
	按钮禁用：disabled="disabled",
	让超链接变成按钮：<a class="btn btn-danger" href=""></a>
	}
var 单位={
	默认网页的字体大小：16px;
	外国网站改变字体大小习惯于:em,国内习惯于px,
	rem：与em类似，但是他会继承根元素的字体大小，所以一般将html{font-size:62.5%;}（10px）,
	em:部分ie浏览器不支持em,em继承父元素的字体大小，
	px：相对于屏幕分辨率的单位，所有的浏览器都支持px，px不随屏幕放大缩小而改变。
	}
var viewport={
	作用：根据屏幕大小改变内