bootstrap

最新推荐文章于 2024-08-31 06:39:46 发布

疯人院疯疯疯

最新推荐文章于 2024-08-31 06:39:46 发布

阅读量123

点赞数

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

web 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了Bootstrap框架的布局系统、响应式图片、表格、表单、按钮等组件的使用方法，以及栅格系统的实现原理。同时，文章还涵盖了辅助样式、按钮样式、下拉菜单、标签页和导航等高级功能。

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

导入环境在这里插入图片描述

jquery环境必须导入到bootstrap-js的文件之前

bootstrap布局

<div class="container">  固定宽度1170px
</div>

<div class="container-fluid"> 宽度为100%
内容
</div>

排版的标签

<h1 class=“page-header”></h1>     标题的大小36px  30px 24   18 14 12
******    
<h6></h6>  .page-header  =标题下加线
<small></small> 副标题    小一号
<big></big>加大标题	大一号
<strong></strong>   推荐的加粗  
<em></em>   推荐的倾斜
<del></del> 删除

文本对齐方式
.text-left right center
英文大小写
text-uppercase 大写 text-lowercase 小写 text-capitalize首字母大写
列表

<ul class="list-unstyled list-inline">     list-unstyled去掉列表前面的标志和格式  list-inline纵向变横向
<li></li>.....<li></li>
</ul>

自定义列表
dl-horizonal 设置横向排列

表格
.table 表格的一个基类，如果加其他的样式，都在table的基础上
.table-bordered 表格加边框
.table-hover 鼠标移上去变色
.table-striped 隔行换色斑马线效果
.table-condensed 紧凑一些高减少了一些
响应式图片
.img-responsive 响应式图片
图片的形状 .img-circle 椭圆 .img-rounded 四角变圆角矩形 img-thumbnail 给图片加圆角边框

栅格系统
栅格系统一定要放入容器中

<div class="container"></div>
<div class="container-fluid"></div>
栅格系统，浏览器窗口自动分配最多12列，栅格系统是由行row和列col表示，

栅格系统用于一系列的行（row）和列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

<div class="container">
  <div class="row">
 	 <div class="col-md-2"></div>
 	 <div class="col-md-3"></div>
 	 <div class="col-md-7"></div>
  </div>
 </div>
  md 是 中等屏幕

在这里插入图片描述

排序
语法： col-xs/sm/md/lg-pull 向左偏移
col-xs/sm/md/lg-push 向右偏移

辅助样式：

情景文本颜色
text-muted、text-primary、text-success、text-info、text-warning、text-danger

<p class="text-muted">...</p>     柔和
<p class="text-primary">...</p>	 主要
<p class="text-success">...</p>  成功
<p class="text-info">...</p>		信息
<p class="text-warning">...</p>	警告
<p class="text-danger">...</p>	危险

情景背景颜色
bg-primary、bg-success、bg-info、bg-warning、bg-danger

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

下拉三角

<span class=""reset><span>

快速浮动 pull-left pull-right 左右浮动
清楚浮动 clearfix 获得自然高

overflow：hidden 获得自然高

表单：
在这里插入图片描述
.form-control 给输入框加<input><textrea></textrea>
.form-group 给输入框的父元素加，给外面包含的盒子加<div class=form-group>
.checkbox-inline 给label标签加给包含<input>和内容加样式
.radio-inline 给label标签加，给<input>和内容加样式

输入框组件
在这里插入图片描述

.input-group-addon 给组合的内容加
input-group 给父类加、

.form-inline 表单行内显示给表单form加
.form-horizontal 给表单加变成响应式效果必须结合栅格系统
变成响应式效果 --必须结合栅格系统
注意：输入框不能使用栅格系统，给<div><span>这类标签加
在这里插入图片描述

按钮

<input type="button" value="按钮">
<button>按钮<button>
<a href="#">内容</a>

.btn 是按钮样式的基类
按钮样式.btn-primary .btn-default .btn-success .btn-warning .btn-danger
按钮的大小 .btn-lg (最大的) .btn-sm .btn-xs(最小的)
按钮组给父元素加 .btn-group
在这里插入图片描述

在这里插入图片描述
.thumbnail 加外边框并且是圆角
.caption 给父类加响应式标题

下拉菜单
.dropdown-menu 给下拉列表中的内容 ul加样式
.dropdown 包含出发的按钮和下拉列表加样式—父元素
.data-toggle 按钮的触发器 js空间
.dropdown-menu-left 下拉列表的对齐 dropdown-menu-right 右对齐
.divider 给li加 <li></li>之间没有内容
在这里插入图片描述
.

标签页
.nav 是标签页的一个基类 —给ul加
.nav-tabs 普通的标签页
.nav-pills 胶囊式标签页
.nav-stacked 垂直排列
.active 默认显示内容
在这里插入图片描述

分页

在ul上加入pagination 的样式

<nav>
		<ul class="pagination">
			<li>
				<a href="#" aria-label="previous">
					<span aria-hidden="true">&laquo;</span>
				</a>
			</li>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li>
				<a href="#" aria-label="next">
					<span aria-hidden="true">&raquo;</span>
				</a>
			</li>
		</ul>
	</nav>