Bootstrap——其他样式

最新推荐文章于 2023-11-23 09:23:50 发布
最新推荐文章于 2023-11-23 09:23:50 发布
阅读量432 收藏
点赞数
分类专栏： Bootstrap 文章标签： bootstrap 公共样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xun__xing/article/details/107653624
版权

其他样式

一、浮动

  1. 浮动
    父元素非flex时才能浮动。
<div class="float-left">在所有 viewport 窗口上浮动在左侧</div><br>
<div class="float-right">在所有viewport 窗口上浮动到右侧</div><br>
<div class="float-none">所有viewport 窗口都不浮动</div>
  1. 响应式浮动

.float-sm-left / .float-sm-right / .float-sm-none

	.f div div,.pos div {
		width: 5rem;
		height: 5rem;
		background: #ccc;
	}
	<div class="row border f mt-1">
		<div class="col">
			<div class="float-md-left">中等屏幕以上会往左浮动</div>
			<div class="float-sm-right">小屏幕以上会往右浮动</div>
		</div>
	</div>

在这里插入图片描述

  1. 清除浮动
    清除浮动,clearfix
	<div class="row d-block border mt-1 clearfix">
		<div class="float-left" style="width: 100px;height: 100px;background: #ccc;">左浮动</div>
		<div class="float-right" style="width: 100px;height: 100px;background: #ccc;">右浮动</div>
	</div>

二、关闭图标

使用通用的close关闭图标来关闭 modals模态框提示或alert提示组件的内容。

	<div class="row mt-5">
		<button type="button" class="close">
			<span>&times;</span>
		</button>
	</div>

在这里插入图片描述

三、文本处理

1、图像替换

使用 .text-hide class样或sass mixin来帮助用背景图像替换元素的文本内容.

	<div class="row mt-5">
		<h1 class="text-hide" style="background-image: url('http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
	</div>

既可以满足用户需要的更好看的显示方式，又能让搜索引擎检索

2.内容溢出（滚动条）

	<div class="row mt-5">
		<div style="width: 200px;height: 100px;" class="border overflow-auto">
			这是在具有设置宽度和高度尺寸的元素上使用 .overflow-auto 的示例。 
			此内容将垂直滚动。这是在具有设置宽度和高度尺寸的元素上使用 .overflow-auto 的示例。
			此内容将垂直滚动。这是在具有设置宽度和高度尺寸的元素上使用 .overflow-auto 的示例。
		</div>				         
		<div style="width: 200px;height: 100px;" class="border overflow-hidden">
			这是在具有设置宽度和高度尺寸的元素上使用 .overflow-hidden 的示例。
			这是在具有设置宽度和高度尺寸的元素上使用 .overflow-hidden 的示例。
			这是在具有设置宽度和高度尺寸的元素上使用 .overflow-hidden 的示例。
		</div>
	</div>

在这里插入图片描述

3.文本

text-justify将文本重新对齐到组件

	<div class="row border mt-5">
		<p class="text-justify">
			这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！
			这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！
			这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！
			这是一段很长很长的文字！这是一段很长很长的文字！
		</p>
		<p class="col text-lg-center">这是一段很长很长的文字！</p>
	</div>

在这里插入图片描述

4.换行和内容溢出处理（省略）

	<div class="text-nowrap bg-info border text-truncate " style="width: 8rem;">
		This text should overflow the parent.
	</div>

在这里插入图片描述

5.文字大小写转换

	<div class="row d-block mt-1">
		<p class="text-lowercase">KAIVON</p>
		<p class="text-uppercase">kaivon</p>
		<p class="text-capitalize">kaivon chen</p>

		<!-- 字体粗细和斜体 -->
		<p class="font-weight-bold">加粗字体</p>
		<p class="font-weight-normal">正常字体</p>
		<p class="font-weight-light">更细的字体</p>
		<p class="font-italic">倾斜字体</p>

		<!-- 等宽字体 -->
		<p class="text-monospace">This is in monospace</p>
	</div>

在这里插入图片描述

6.文字基线对其

	<div class="row mt-5 border mt-5 d-block" style="height: 100px;">
		<span class="align-baseline">baseline</span>
		<span class="align-top">top</span>
		<span class="align-middle">middle</span>
		<span class="align-bottom">bottom</span>
		<span class="align-text-top">text-top</span>
		<span class="align-text-bottom">text-bottom</span>
	</div>

在这里插入图片描述

7.可见性

	<div class="row mt-5 border">
		<div class="bg-danger text-white p-3 visible">可以看见</div>
		<div class="bg-danger text-white p-3 invisible">看不见，占据空间</div>
		<div class="bg-danger text-white p-3 d-none">看不见，不占据空间</div>
	</div>

四、定位

  1. 通用属性
	<div class="row mt-5 pos">
		<div class="position-static">默认值，没有定位</div>
		<div class="position-relative">相对定位</div>
		<div class="position-absolute">绝对定位</div>
		<div class="position-fixed">固定定位</div>
		<div class="position-sticky">粘性定位</div>
	</div>
	<div class="fixed-top">固定在顶部</div>
	<div class="fixed-bottom">固定在底部</div>

在这里插入图片描述
sticky-top贴齐于top顶部
可制作滚动导航，最多贴至顶部

<div class="sticky-top">粘性置顶，放在这里是没有效果的，需要放在body下的第一层级</div>

五、阴影

	<div class="row mt-5 justify-content-around">
		<div class="bg-light rounded p-3 shadow-none">没有阴影</div>
		<div class="bg-white rounded p-3 shadow-sm">小阴影</div>
		<div class="bg-white rounded p-3 shadow">正常的阴影</div>
		<div class="bg-white rounded p-3 shadow-lg">大的阴影</div>
	</div>

在这里插入图片描述

六、尺寸

  1. 宽度
	<div class="row mt-5 d-block"><!-- 宽度 -->
		<div class="bg-info text-white p-3 w-25">Width 25%</div>
		<div class="bg-info text-white p-3 w-50">Width 50%</div>
		<div class="bg-info text-white p-3 w-75">Width 75%</div>
		<div class="bg-info text-white p-3 w-100">Width 100%</div>
		<div class="bg-info text-white p-3 w-auto">Width auto</div>
	</div>

在这里插入图片描述

  1. 高度
	<div class="row bg-dark mt-1 d-block" style="height: 100px;">
		<div class="bg-success d-inline-block text-white p-3 h-25">Width 25%</div>
		<div class="bg-success d-inline-block text-white p-3 h-50">Width 50%</div>
		<div class="bg-success d-inline-block text-white p-3 h-75">Width 75%</div>
		<div class="bg-success d-inline-block text-white p-3 h-100">Width 100%</div>
		<div class="bg-success d-inline-block text-white p-3 h-auto">Width auto</div>
	</div>

在这里插入图片描述

  1. 最大宽度
	<div class="row d-block mt-1">
		<div class="mw-100 bg-secondary text-white">宽度的最大值</div>
	</div>

在这里插入图片描述

  1. 最大高度
	<div class="row d-block bg-dark mt-1" style="height: 100px;">
		<div class="bg-success text-white mh-100" style="width: 100px; height: 200px;">高度的最大值</div>
	</div>

在这里插入图片描述

七、间距

属性

m - 这个Class属性会设定 margin值
p - 这个Class属性会设定 padding值

边缘

t - 这个Class属性会设定 margin-top 或 padding-top
b - 这个Class属性会设定 margin-bottom 或 padding-bottom
l - 这个Class属性会设定 margin-left 或 padding-left
r - 这个Class属性会设定 margin-right 或 padding-right
x - 这个Class属性会设定 *-left 和 *-right两个值。
y - 这个Class属性会设定 *-top 和 *-bottom两个值
空白 - 这个Class属性会设定 margin 或 padding 元素的四个边。

尺寸规格

0 - 这个Class属性会设定 margin 或 padding 的样式值为 0
1 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * .25规格呈现
2 - (默认时) 这个Class属性会设定 margin 或 padding 以 $spacer * .5规格呈现
3 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer规格呈现
4 - (默认时) 这个Class属性会设定margin 或 padding 以 $spacer * 1.5规格呈现
5 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * 3规格呈现
auto - 这个Class属性会设定 margin 值 auto（按浏览器默认值自由展现）。

	<div class="row border mt-5">
		<div class="bg-danger text-white p-3 m-3">间距文本1</div>
	</div>
	<div class="row border mt-1">
		<div class="bg-danger text-white p-3 mb-3">间距文本2</div>
	</div>
	<div class="row border mt-1">
		<div class="bg-danger text-white py-3 my-3">间距文本3</div>
	</div>
	<div class="row border mt-1">
		<div class="bg-danger text-white px-3 mx-3">间距文本4</div>
	</div>
	<div class="row border mt-1">
		<!-- 3.x的版本居中是用.center-block -->
		<div class="bg-danger text-white px-3 mx-auto">间距文本5</div>
	</div>
	<!-- 间距的响应式，{property}{sides}-{breakpoint}-{size} -->
	<div class="row border mt-1">
		<div class="bg-danger text-white p-3 my-lg-3">间距文本6</div>
	</div>

在这里插入图片描述

飞羽逐星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap学习1：bootstrap4.0基础
D_evin_的博客
09-18 747
Bootstrap4.0基础 一、Bootstrap的简介和作用 1.Bootstrap的简介 - Bootstrap是由twitter公司设计师基于html，css，js开发的简洁、开源、强大、优雅的UI框架。 - UI框架就是能够快速构建html架构的框架。 - 内置了大量的css类，供元素使用。 - Bootstrap由一个css库和一个js库组成，因为在整个ui框架中还会有许多动态需效果需要js来完成，因此，Bootstrap在动态部分是依赖jquery一个js类库完成的。`Bootst
微信小程序吸顶组件
zzaixiao的博客
06-10 712
微信小程序吸顶组件
Bootstrap sticky-top 与 overflow 冲突失效无作用 解决办法
Higashino_Keigo的博客
10-22 2504
Bootstrap sticky-top用于粘顶 但一遇到 html,body{ overflow:hidden } 就会失效 解决办法是新建一个克隆层，在移动端下滑时候判断下滑高度而生成克隆层，并在滚动栏到顶时删除克隆层 /* 粘顶导航栏 */ /* 克隆的是class="sticky"的一个navbar */ var pscroll = 0; //滚动高度 var is...
Bootstrap01(入门，全局CSS样式[栅格系统])
yking
03-06 207
一.入门，全局CSS样式[栅格系统] 1.允许手机显示代码 ①&lt;meta name=”viewport” content=”width=device-width,initial-scale=1.0”&gt; 2.布局容器 ①固定容器:class=”container” 1)大屏幕:lg 2)中等屏幕:md 3)小屏幕:sm 4)超小屏幕:xs ②流式容器:class=”container-f...
Bootstrap5 导航栏讲解
qq_65552364的博客
06-04 7113
通过类 .navbar 可以创建一个标准的导航栏，若要创建响应式的导航栏，可以在类 .navbar 的基础上添加类 .navbar-expand-xxl|xl|lg|md|sm 来创建 (大屏幕水平铺开，小屏幕垂直堆叠)。 navbar-dark / light‎ 可以调节导航栏文本颜色，如深色背景导航栏对应浅色文本、浅色导航栏对应深色文本。‎ data-bs-toggle 指以什么类型事件触发 data-bs-target 指事件的目标 就是样式的具体细节具体的代码 dropdown-divider
css – Bootstrap 4中的class =“mb-0”是什么意思？
dev_zyx的博客
04-21 2万+
<p class="mb-0">Lorem ipsum</p> 问：什么是mb-0？ 最佳答案: Bootstrap具有广泛的响应边距和填充实用程序类。它们适用于所有断点： xs(< = 576px)，sm(> = 576px)，md(> = 768px)，lg(> = 992px)或xl(> = 1200px)) 这些类的格式如下： {p...
Bootstrap5相关笔记
最新发布
baidu_41921865的博客
11-23 53
margin-left, margin-right 都为 auto，保持 container 容器居中。屏幕小于 768 时，容器宽度是满屏，与 container-fluid 效果一样。当屏幕宽度大于576px ，col-sm-*一列可以排下12个，屏幕大于 768 小于 992 时，宽度设为 750。屏幕大于 992 小于 1200 时，宽度为 970。当屏幕小于576px，col-sm-1也占有一行。屏幕大于 1200，宽度为 1170。margin:0 宽度：100%
AngularJs bootstrap搭载前台框架——准备工作
10-21
而Bootstrap则是Twitter开源的一套前端UI框架，它包含了一系列预先设计的组件和样式，能够快速构建响应式和移动设备优先的网页。 首先，我们需要了解如何准备AngularJS和Bootstrap的环境。如果你还不熟悉这两个技术...
拥Bootstrap入怀——导航栏篇
09-02
在“拥Bootstrap入怀——导航栏篇”中，作者通过一个山水网页实例，展示了如何利用Bootstrap创建功能丰富的导航栏。 首先，使用Bootstrap之前，我们需要引入其CSS和JavaScript文件。这通常通过CDN（内容分发网络）...
AngularJs bootstrap搭载前台框架——基础页面
11-23
导航栏包裹在`.header`和`.navbar`类中，使用Bootstrap的样式。 ```html <!-- Navbar content --> <div id="content" class="content container" ng-view></div> ``` 为了实现路由，我们需要在`app.js`中...
Bootstrap----导航栏
weixin_52247167的博客
04-14 1万+
文章目录 一、导航栏 1、container 2、navbar 3、navbar-expand-xx 4、navbar-xxxx 5、bg-xxxx 6、navbar-brand 7、navbar-toggler 8、navbar-toggler-icon 9、定位 二、导航栏之切换触发器 1、data-toggle="xxx" 2、data-target="#id" 3、aria-controls="id" 4、aria-label 5、aria-expanded="bo.
Bootstrap栅格系统
xun__xing的博客
07-26 2087
栅格系统一、运作1.网格选项2.基本结构3.选择自适应类型1.container-fluid3.container二、应用1.设置等宽列，平分宽度2.设置多行等宽列，选择断行3.设置一个列宽，剩下的自动平分4.设置根据内容调整列的宽度5.设置所有尺寸下，都占同样的列数6.混合排列或者组合模式7.对齐1.行的对齐方式2.列的单独对齐方式8.列排序9.列偏移10.间距11.嵌套 一、运作 1.网格选项 即引入样式后，最多可将屏幕分为12栏，可再通过需求合并。 2.基本结构 首先要布置基本结构和公共的class
【前端】使用JavaScript实现类似sticky的布局
章鱼仔的博客
12-29 1003
实现html粘性布局
BootStrap4工具类之图像替换
爱喝水的qdy的博客
12-03 404
目录官方文档地址其他文档地址图像替换整体代码 官方文档地址 https://getbootstrap.com/docs/4.4/utilities/image-replacement/ 其他文档地址 http://bs4.vx.link http://bs4.vx.link/index.html?tmpui_page=/pages/utilities https://v4.bootcss....
Bootstrap完成前端简单界面
chiyangj的博客
07-01 858
这里写目录标题所需js，css界面及效果登录注册主页搜索购物车 所需js，css 个人css： *{ margin: 0; padding: 0; } /* 搜索栏 start */ .search-parent{ position: relative; height: 100px; } .search{ position: absolute; background-color: #D6CCBB; width: 1140px; height: 90px; } .search-parent
bootstrap4 调整元素之间距离
热门推荐
王建野的专栏
03-06 6万+
    影响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。bootstrap4提供了简写的class名，名称分别以m-开头和p-开头的类。一、影响距离大小的值有0,1,2,3,4,5,auto(1)、marg...
Bootstrap组件——导航
xun__xing的博客
07-31 869
导航一、导航1.基本2.水平对齐3.垂直对齐4.Tabs标签5.胶囊式（eugk）标签6.内容定宽高7.等宽8.弹性布局9.结合下拉菜单10.选项卡11.垂直形式的选项卡12.方法与事件 一、导航 1.基本 基础.nav组件采用Flexbox弹性布局构建，并为构建所有类型的导航组件提供了坚实的基础。 <div class="row"> <div class="col"> <ul class="nav"><!-- 基础类，变成弹性盒模型 --> &l
bootstrapTable行样式设置
MTone1的博客
12-31 6661
//按需求设置不同的样式：5个取值代表5中颜色[‘active’, ‘success’, ‘info’, ‘warning’, ‘danger’]; options.rowStyle = function (row, index) { var style = &amp;amp;quot;&amp;amp;quot;; style='active'; r...
Bootstrap弹性布局Flex
xun__xing的博客
07-28 1526
弹性布局Flex一、Flex1.弹性盒模型2.子元素的排列方向3.子元素的对齐方式4.自对其5.填满6.伸缩7.自动的间距8.wrap包裹9.order排序10.多行对齐 一、Flex 1.弹性盒模型 启用弹性盒模型 <div class="row"> <div class="col bg-primary text-white py-2 d-flex">这是一个弹性盒子</div> <div class="col bg-info text-white
精通Bootstrap：前端开发利器
Bootstrap的整体架构章节深入剖析了其核心——栅格系统，解释了其实现原理和响应式设计，以及如何处理重复代码。CSS组件架构的设计思想则揭示了Bootstrap如何通过基础样式、颜色、尺寸、状态、特殊元素、并列元素、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞羽逐星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值