首页 > 其他分享 >Bootstrap padding&margin样式

Bootstrap padding&margin样式

时间:2023-10-05 15:12:01浏览次数:35  
标签:样式 Bootstrap 指定 padding spacer 设置 margin

Bootstrap中使用以下样式的类名,指定元素的padding和margin样式:

{property}{sides}-{size}
其中 property的值为:

- m:用于设置margin样式;

- p :用于设置padding样式;

其中sides值指定样式适用的边,可选值为:

- t :设置margin-top或padding-top;

- b :设置margin-bottom或padding-bottom;

-s :根据body的direction属性来设置

默认或direction='ltr':margin-left或padding-right;

direction='rtl':margin-right或padding-left;

-e :与-s相反;

-x :同时设置margin-left/margin-right或padding-left/padding-right;

-y :同时设置margin-top/margin-bottom或padding-top/padding-bottom;

-NULL :如果sides值为空,表示四条边都会被设置;

其中size值指定样式的值,可选值为:

0 :指定的margin或padding都设置为0;

1 :指定的margin或padding都设置为$spacer*0.25;

2 :指定的margin或padding都设置为$spacer*0.5;

3 :指定的margin或padding都设置为$spacer;

4 :指定的margin或padding都设置为$spacer*1.5;

5 :指定的margin或padding都设置为$spacer*3;

auto :只能用于设置margin,将其值设置为auto;

($spacer默认为一个rem)

标签:样式,Bootstrap,指定,padding,spacer,设置,margin
From: https://www.cnblogs.com/pythonClub/p/17743332.html

相关文章

  • BootStrap
    2021年8月10日1.响应式所具有的特点(1)网页的宽度自动调整(2)尽量少用绝对宽度(3)字体要使用rem、em做为单位(4)布局要使用浮动、弹性布局2.规则@chartset定义编码@import引入css文件(css模块化)@font-face自定义字体@keyframesanimation里的关键帧@media媒体查询媒体查询......
  • 正确的使用margin:0 auto与body{text-align:center;}实现元素居中
    我们首先了解一下它们的基本概念:text-align是用于设置或对象中文本的对齐方式。一般情况下我们设置文本对齐方式的时候需要用此属性进行设置,如:ExampleSourceCodediv{text-align:left;}表示文本居左对齐。margin是设置对象四边的外延边距,被称为外补丁或外边......
  • 03_Bootstrap基础组件03
    7表单7.1基本实例设置了.form-control类的表单元素,默认设置宽度属性为width:100%;。将label元素和表单元素包裹在.form-group中可以按照排好的样式进行展示。<formaction="#"method="post"><divclass="form-group"><labelfor="email1">邮箱......
  • 02_Bootstrap基础组件02
    4排版使用Bootstrap的排版特性,您可以创建标题、段落、列表及其他内联元素,实际上它是把大部分在HTML的基本标签加了样式。所以这部分相对比较简单。4.1标题h1-h6重新定义样式,HTML中的所有标题标签,<h1>到<h6>均可使用。增加了.h1到.h6类,为的是给内联(inline)属性的文本赋......
  • 01_Bootstrap基础组件01
    1什么是Bootstrap?Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的,它简洁灵活,使Web开发更加快捷。它对HTML、CSS和JavaScript进行了封装,使它们使用起来更方便。我们只需要使用它已经设定好的类,或规则,即可快速应用它提供的功能。......
  • AES-256-ECB PKCS7Padding 解密 微信退款接口
    微信退款通知https://pay.weixin.qq.com/wiki/doc/api/wxpay/ch/pay/OfficialPayMent/chapter8_8.shtml需要的pom<!--https://mvnrepository.com/artifact/commons-codec/commons-codec--> <dependency> <groupId>commons-codec</groupId> <......
  • BootstrapBlazor组件库,NET8.0使用教程
    BootstrapBlazor组件库,NET8.0使用教程BootstrapBlazor组件库官网https://www.blazor.zone/componentsBootstrapBlazor组件库github仓库地址https://github.com/dotnetcore/BootstrapBlazorBootstrapBlazor组件库gitee仓库地址https://gitee.com/LongbowEnterprise/Bootstrap......
  • BootstrapBlazor组件库,Table组件外部导出数据
    BootstrapBlazor组件库,Table组件导出选中行数据问题描述有很多小伙伴在使用BootstrapBlazor组件库的Table组件导出功能时,不知道怎么通过外部按钮来导出数据。解决方案通过@ref当前表格对象来获取数据,然后进行导出操作。Razor代码<Buttonclass="mb-2"Text="导出Table数据"......
  • BootstrapBlazor组件库,Table组件导出选中行数据
    BootstrapBlazor组件库,Table组件导出选中行数据问题描述有很多小伙伴在使用BootstrapBlazor组件库的Table组件导出功能时,不知道怎么导出选中的行数据。解决方案通过SelectedRows来导出选中的行数据。Razor代码<TableTItem="Foo"IsPagination="true"PageItemsSource="Pag......
  • BootstrapBlazor.Splitting 加载动画组件
    BootstrapBlazor.Splitting加载动画组件介绍本Blazor组件依赖于BootstrapBlazor组件库开发,底层由Splitting.js和gsap.js实现。使用该组件库之前需要先安装BootstrapBlazor.Splitting组件独立包。可以通过nuget命令行安装NuGet\Install-PackageBootstrapBlazor.Splitting-V......