jquery 给类名元素添加行内样式_bootstrap4常用样式整理

最新推荐文章于 2024-08-30 15:58:51 发布
最新推荐文章于 2024-08-30 15:58:51 发布
阅读量427 收藏 3
点赞数 1
文章标签： jquery 给类名元素添加行内样式

使用bootstrap需要的文件

css文件

<

js文件

<

bootstrap官网传送门：https://v4.bootcss.com/docs/getting-started/introduction/

组件传送门：https://v4.bootcss.com/docs/components/alerts/

更多轮播图推荐传送门：https://www.swiper.com.cn/

容器和网格系统

7e25621335f9ad5f4cfe2d412634f1cf.png

容器

  • container 是固定宽度
  • container-fluid 是100%宽度 (踩坑:有内边距，如需去除加上px-0即可)

栅格系统

  • col-?<576px
  • col-sm-?>=576px
  • col-md-?>=768px
  • col-lg-?>=992px
  • col-xl-?>=1200px

字体颜色及背景颜色

字体

  • text-muted 柔和
  • text-primary 重要
  • text-success 成功
  • text-info 提示
  • text-warning 警告
  • text-danger 危险
  • text-secondary 副标题
  • text-dark 黑色文字
  • text-light 浅灰色
  • text-white 白色

背景

  • bg-primary 重要
  • bg-secondary 次要
  • bg-success 成功
  • bg-danger 危险
  • bg-warning 警告
  • bg-info 提示
  • bg-light 浅灰色
  • bg-dark 黑色
  • bg-white 白色

表格

  • table 默认样式
  • table-striped 条纹表格
  • table-bordered 边框表格
  • table-hover 鼠标悬停
  • table-dark 黑色背景表格
  • table-responsive 响应式表格

边框

添加边框

  • border 默认
  • border-top 上边框
  • border-left 左边框
  • border-right 右边框
  • border-bottom 下边框

删除边框

  • border-0 默认
  • border-top-0 上边框为0
  • border-left-0 左边框为0
  • border-right-0 右边框为0
  • border-bottom-0 下边框为0

边框颜色

  • border-primary 重要
  • border-secondary 次要
  • border-success 成功
  • border-danger 危险
  • border-warning 警告
  • border-info 提示
  • border-light 浅灰色
  • border-dark 黑色
  • border-white 白色

圆角边框

  • rounded 默认
  • rounded-top 顶部两边圆角
  • rounded-right 右边两边圆角
  • rounded-bottom 下边两边圆角
  • rounded-left 左边两边圆角
  • rounded-circle 椭圆效果
  • rounded-0 没有圆角
  • img-thumbnail 图片缩略图效果
  • img-fluid 图片响应式效果

超大屏幕

  • jumbotron 屏幕
  • jumbotron-fluid 没有圆角的全屏幕

内边距（pading）外边距（margin）

  1. m 代表 margin
  2. p 代表 padding

内边距

  • p-1 padding: 25rem!important;
  • p-2 padding: 5rem!important;
  • p-3 padding: 1rem!important;
  • p-4 padding: 1.5rem!important;
  • p-5 padding: 3rem!important;

单边

  • pt-0 上内边距为0
  • pl-0 左内边距为0
  • pr-0 右内边距为0
  • pb-0 下内边距为0
  • px-2 padding-right: 0.5rem !important;margin-left: 0.5rem !important
  • py-2 padding-top: 0.5rem !important;margin-bottom: 0.5rem !important
  • px-0 取消边距

外边距

  • m-1 margin: .25rem!important;
  • m-2 margin: .5rem!important;
  • m-3 margin: 1rem!important;
  • m-4 margin: 1.5rem!important;
  • m-5 margin: 3rem!important;

单边

  • mt-0 上外边距为0
  • ml-0 左外边距为0
  • mr-0 右外边距为0
  • mb-0 下外边距为0
  • mx-auto 居中显示

单边大小

  • mt-1 margin-top: 0.25rem !important
  • mt-2 margin-top: 0.5rem !important
  • mt-3 margin-top: 1rem !important
  • mt-4 margin-top: 1.5rem !important
  • mt-5 margin-top: 3rem !important
  • m-auto margin:auto!important
  • margin: 0 auto
  • ml-auto margin-left: auto!important;
  • mr-auto margin-right: auto!important;
  • mt-auto margin-top: auto!important;
  • mb-auto margin-bottom: auto!important;

display

  • d-？ 任何尺寸使用
  • d- sm、 md、 lg、 xl 对应尺寸加载
  • d-none 不显示
  • d-inline 显示为内联元素
  • d-inline-block 行内块元素
  • d-block 块级元素
  • d-table 块级表格来显示
  • d-table-cell 表格单元格显示（类似 <td> 和 <th>）
  • d-table-row 表格行显示（类似 <tr>）

打印样式 使用较少，了解即可

  • d-print-none
  • d-print-inline
  • d-print-inline-block
  • d-print-block
  • d-print-table
  • d-print-table-row
  • d-print-table-cell
  • d-print-flex
  • d-print-inline-flex

导航栏

  • navbar
  • navbar-expand-sm
  • bg-light
  • ul：navbar-nav
  • li：nav-item

表单

  • form-group
  • label for email
  • input class form-control

按钮组

  • btn-group 按钮组
  • btn-group-lg|sm|xs 控制按钮组大小
  • btn-group-vertical 垂直按钮组

弹性布局

  • d-flex 弹性伸缩盒显示
  • d-inline-flex 内联块级弹性伸缩盒显示
  • d-sm-flex 对应尺寸加载
  • d-sm-inline-flex
  • d-md-flex
  • d-md-inline-flex
  • d-lg-flex
  • d-lg-inline-flex
  • d-xl-flex
  • d-xl-inline-flex

方向 水平

  • flex-row
  • flex-row-reverse 相反方向

垂直

  • flex-column
  • flex-column-reverse

同样的不同尺寸适配样式

  • flex-row
  • flex-row-reverse
  • flex-column
  • flex-column-reverse
  • flex-sm-row
  • flex-sm-row-reverse
  • flex-sm-column
  • flex-sm-column-reverse
  • flex-md-row
  • flex-md-row-reverse
  • flex-md-column
  • flex-md-column-reverse
  • flex-lg-row
  • flex-lg-row-reverse
  • flex-lg-column
  • flex-lg-column-reverse
  • flex-xl-row
  • flex-xl-row-reverse
  • flex-xl-column
  • flex-xl-column-reverse
  • justify content 可匹配到不同尺寸
  • justify-content-start 位于容器的开头
  • justify-content-end 位于容器的结尾
  • justify-content-center 位于容器的中心
  • justify-content-between 位于各行之间留有空白的容器内
  • justify-content-around 位于各行之前、之间、之后都留有空白的容器内

浮动

  • float-left 左浮动
  • float-right 右浮动
  • float-none 取消浮动

定位

  • position-static 默认
  • position-relative 相对定位 相对于其本身正常位置来进行定位，它原本所占的空间仍保留
  • position-absolute 绝对定位
  • position-fixed 固定定位
  • position-sticky 粘性定位
    固定定位
  • fixed-top 固定上
  • fixed-bottom 固定下

标题尺寸

  • w-25 width: 25%
  • w-50 width: 50%
  • w-75 width: 75%
  • w-100 width: 100%
    区间
  • mw-100
  • mh-100

文本

文本定位

  • text-left 文本居左
  • text-center 文本居中
  • text-right 文本居右
  • text-sm-left sm尺寸下文本居左 以此变换还有右上下
  • text-md-left md尺寸下文本居左 以此变换还有右上下
  • text-lg-left lg尺寸下文本居左 以此变换还有右上下
  • text-xl-left xl尺寸下文本居左 以此变换还有右上下

文本转换

  • text-lowercase 字母文本小写
  • text-uppercase 字母文本大写
  • text-capitalize 文本中的每个单词以大写字母开头

字体加重和斜体

  • font-weight-bold 字体加重
  • font-weight-normal 正常字体
  • font-weight-light 字体变细
  • font-italic 斜体

对齐方式

  • align-top 居上
  • align-middle 垂直
  • align-bottom 居下
  • align-text-top 文字居上
  • align-text-bottom 文字居下

显示与隐藏

  • show 显示
  • hidden隐藏
  • hide 仍然可用，但是它不能对屏幕阅读器不起作用 不建议使用
  • invisible 隐藏保留该元素的文档位置
  • visible 可见
  • visibility: hidden!important;

进度条

  • progress 添加一个div
  • progress-bar 在上面的div中添加一个progress-bar的div

分页

  • pagination ul元素上添加
  • page-item 在li元素上添加page-item

列表组

  • list-group 列表组
  • list-group-item 列表li
  • list-group-item-action

卡片

  • card
  • card-header
  • card-body
  • card-footer
  • card-img-top 图片
  • card-body、card-title、card-text 图片卡片
  • card-img-overlay设置图片为背景

下拉菜单

  • dropdown 下拉菜单默认
  • button设置dropdown-toggle data-toggle=“dropdown” 下拉button
  • dropdown-menu 下拉菜单
  • a设置样式dropdown-item

有疑问欢迎下方评论区讨论！

weixin_39861823
关注
bootsrap 外边距_第一次接触神奇的Bootstrap基础排版
weixin_30540871的博客
12-30 776
Bootstrap是Twitter推出的一个简单灵活的，基于HTML5和CSS3的用于搭建WEB前端页面的html、css、javascript工具集。拥有友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特点。Bootstrap让Web开发更迅速、更简单。1.Bootstrap下载我们可以在官网下载到Bootstrap，Boot...
XSSFWorkbook 设置单元格样式_table样式
weixin_39637924的博客
11-22 2629
table相关属性：border-collapse：设置相邻单元格的边框处理样式 collapse/separate--是否折叠border-spacing：设置响铃单元格边框的间距1-2个长度值caption-side：设置表格标题的位置top/bottom：上/下empty-cells：设置空单元格是否显示边框hide/show：hid...
bootstrap4 调整元素之间距离
极客神殿
11-19 1790
影响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同； margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距； padding影响的元素本身与其内部子元素之间的距离，简称为内填充。 bootstrap4提供了简写的class名，名称分别以m-开头和p-开头的类。 一、影响距离大小的值有 0,1,2,3,4,5,auto (1)、margin值有 class名 等价的style m-0 等价于{margin:0 !import
Bootstrap关于盒子(盒模型)边距的设置
wgq2020的博客
10-09 1935
Bootstrap采用了CSS盒模型来布局和设计网页元素，盒子模型由四个部分组成：content、padding、border、margin。其中，margin用来设置元素与周围元素之间的空隙。表示元素的左右margin为自动居中。来设置为自动居中，如。
jquery 给类名元素添加行内样式_JAVA学习之路~JQuery-Day28
weixin_39952031的博客
11-09 983
一.jQuery的优点（1）提供了强大的功能函数（2）解决浏览器兼容性问题（3）实现丰富的 UI 和插件（4）纠正错误的脚本知识二.jQuery的核心1.用法用之前先引入jquery的文件2.核心三.DOM 对象和 jQuery 包装集对象1.dom对象 代码示例: <body> <div id="mydiv"></div> </body&g...
Bootstrap框架快速上手攻略
xunshishi的博客
10-27 1585
1.防止顶部导航条遮盖页面元素: style="padding-top: 50px" 2.背景色统一改变格式: class="bg-primary"/danger/success... 3.导航堆叠: class="nav-stacked" 4.强制,加强样式: 在样式代码后面添加!important 5.显示在一行内: class="in-line" 6.圆角: class="bord
BootStrapTable实现增删改查
03-07
BootstrapTable的核心是HTML的`<table>`元素，通过添加特定的类名和数据属性来初始化。例如： ```html <th data-field="id">ID <th data-field="name">Name <th data-field="price">Price ``` ...
jQuery表格行展开隐藏特效代码
03-20
4. **状态切换**：通过切换CSS的`display`属性来实现展开和隐藏，例如，`$(this).find('.details').toggle()`会找到当前行内的`.details`类元素，并切换其可见性。 5. **动画效果**：为了增强用户体验，可以添加过渡...
BootStrap和LayUI
qq_43658407的博客
04-16 4753
1. BootStrap BootStrap的使用 Bootstrap是一套现成的CSS样式集合，Bootstrap 是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。 1.特点： 1.简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让web开发更速、简单。 2.基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。 3.自定义JQuery插件
Bootstrap展开收缩显示表格json格式数据.zip
05-23
Bootstrap展开收缩显示表格json格式数据基于Bootstrap3.3.5制作，自适应分辨率，JS函数调用json，动态获取表格数据，双击表格行可折叠关闭表格数据显示。
bootstrap4 调整元素之间距离（名称分别以m-开头和p-开头的类）
weixin_46048542的博客
12-02 1092
值得一提的是B3中使用hidden-sm只会在sm尺寸下隐藏，而其他尺寸会正常显示，在B4中如果你单纯的指定d-sm-none 则该元素会在sm尺寸隐藏，但sm以上的尺寸也会隐藏，在sm之下的尺寸正常显示，这里就涉及到向上兼容的问题，所以你在设置sm元素隐藏时还得设置md尺寸显示，如上表，其他以此类推。margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；有几个缩写,t,b,l,r,x,y含义分别是top,bottom,left,right,left和right,top和bottom。
Bootstrap中的栅格栅格系统
这个昵称没有被占用吧的博客
11-13 371
.container或.container-fluid中设置了15px水平方向的padding .row中又设置了-15px水平方向的margin，这样就刚好抵消了.container或.container-fluid中水平方向的padding 这样做的目的是为了在column中直接嵌套.row，而不用再套一层.container或.container-fluid 每个column中都有15px水
bootstrap专栏 04.元素属性设置 04.边距与阴影
Web Python
03-17 1208
# 04.边距与阴影 [toc]{type: "ol", level: [3]} ### css结构 ```css .wh { width: 300px; height: 200px; background: #8fd19e; } span { background: #1c7430; display: inline-block; } ``` ### 边距设定 - 可具体指定某个边 > pt-1 > pt上 pb下 pl左 pr右 px...
bootstrap4 调整元素之间距离 margin 和padding
极客神殿
07-03 3444
响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。 bootstrap4提供了简写的class名，名称分别以m-开头和p-开头的类。 一、影响距离大小的值有 0,1,2,3,4,5,auto (1)、margin值有 class名 等价的style m-0 等价于{margin:0 !important} m-
bootstrap4|颜色|表格
笺赕
11-23 8410
目录 1、颜色 bootstrap4.1.3.zip 链接: https://pan.baidu.com/s/1lGFoaifVjGER-BBfnbiWAA 提取码: 6w6w 1、颜色 （1）Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, ....
Bootstrap5 外边距和内边距
最新发布
听海边涛声
08-30 903
Bootstrap5 外边距和内边距
bootstrap中内外边距和响应式更改内外边距的应用
weixin_48047636的博客
04-24 1841
HTML <body> <div class="container bg-danger"> <!-- 有六个值 1-5和auto 值越大padding越大 --> <div class="p-3 bg-success ">给文字加内边距</div> <!-- 有六个值 1-5和auto 值越大margin越大 --> <div class="m-3 bg-pr
bootstrap——css样式（二、排版）
zaichuanguanshui的专栏
01-18 579
1、标题HTML 中的所有标题标签，h1到h6 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4>
jq添加类名________移除类名___________判断元素是否包含某个类名_________。
03-30
jq添加类名：使用addClass方法，例如：$("p").addClass("myClass"); 移除类名：使用removeClass方法，例如：$("p").removeClass("myClass"); 判断元素是否包含某个类名：使用hasClass方法，例如：$("p").hasClass...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值