Bootstrap5 -技术 - 个人学习记录

taotaoit 5 0

4016 0 2021-09-14 Bootstrap5

bootstrap5对于较长的内容，可以添加.text-truncate类别，以省略号截断文字。需为display: inline-block或是display: block。  <div class="row"> <di...

bootstrap5 按钮大小

taotaoit 0 1

1330 0 2021-09-02 Bootstrap5

bootstrap5 按钮大小添加.btn-lg or .btn-sm设置按钮大小 <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="b...

bootstrap5 表单控件大小

taotaoit 0 0

1353 0 2021-09-02 Bootstrap5

bootstrap5 表单控件大小使用诸如.form-control-lg 和 .form-control-sm之类的类设置高度。 <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-l...

bootstrap5 offcanvas-navbar手机滑动导航，左右滚动导航

taotaoit 1 1

1704 0 2021-09-02 Bootstrap5

效果图示例链接 https://taotaoit.com/demo/?url=other/other-119/index 直接上代码 <!doctype html> <html lang="en"> <head> <meta charset="utf...

bootstrap5 flex布局占据剩余空间flex-grow-1

taotaoit 0 0

1402 0 2021-08-28 Bootstrap5

bootstrap5 flex布局占据剩余空间.flex-grow-1 .flex-grow-1{flex-grow:1!important} 参考：https://taotaoit.com/demo/bootstrap5/167.html

bootstrap5宽度100% .w-100高度100% .h-100，没有对应的自适应样式

taotaoit 0 0

2628 0 2021-08-28 Bootstrap5

bootstrap5宽度100% .w-100高度100% .h-100 /* 宽度 */ .w-25{width:25%!important} .w-50{width:50%!important} .w-75{width:75%!important} .w-100{width:100%!important} .w-auto{wid...

bootstrap5圆角按钮，胶囊按钮，实现直角rounded-0，大圆角rounded-3，小圆角rounded-1

taotaoit 4 0

2533 0 2021-08-28 Bootstrap5

默认按钮自带圆角 .btn{border-radius:.25rem!important} .rounded{border-radius:.25rem!important} .rounded-0{border-radius:0!important} .rounded-1{border-radius:.2rem!imp...

bootstrap5 上下左右边框.border-top,.border-bottom,.border-start,.border-end

taotaoit 1 0

1866 0 2021-08-26 Bootstrap5

bootstrap5 上下左右边框 <span class="border"></span> <span class="border-top">上</span> <...

bootstrap5 .img-fluid类让图片支持响应式布局，bootstrap3是.img-responsive

taotaoit 2 0

2764 0 2021-08-26 Bootstrap5

bootstrap5 .img-fluid类让图片支持响应式布局，bootstrap3是.img-responsive bootstrap5，bootstrap4都是.img-fluid css样式 .img-fluid{max-width:100%;height:auto} bootstrap3 cs...

bootstrap5相对定位.position-relative绝对定位.position-absolute固定定位.position-fixed粘性定位.position-sticky

taotaoit 2 0

1863 0 2021-08-23 Bootstrap5

bootstrap5相对定位.position-relative绝对定位.position-absolute固定定位.position-fixed粘性定位.position-sticky css样式 .position-static { position: static !important; } .position-...

bootstrap5 内容左对齐.text-start 居中.text-center 右对齐.text-end

taotaoit 2 0

1574 0 2021-08-23 Bootstrap5

bootstrap5 内容左对齐.text-start 居中.text-center 右对齐.text-end css样式 .text-start { text-align: left !important; } .text-end { text-align: right !important; } .text-...

bootstrap5独立的分页css .pagination

taotaoit 0 0

1244 0 2021-08-21 Bootstrap5

css /* 分页 */ .fy{padding: 1rem 0;} .pagination { display: flex; padding-left: 0; list-style: none; justify-content: center; } .page-link { position: relative...

bootstrap5 .float-start .float-end .float-none和bootstrap4 .float-left .float-right

taotaoit 0 0

1448 0 2021-08-04 Bootstrap5

css样式 bootstrap5 .float-start{float:left!important} .float-end{float:right!important} .float-none{float:none!important} bootstrap4 .float-left{float:left!imp...

bootstrap5 .order-first .order-0 .order-1 .order-2 .order-last自定义排序

taotaoit 0 0

2064 0 2021-08-04 Bootstrap5

Bootstrap仅提供选项将一个物件排在第一个或最后一个，由于order只能使用从0到5的整数值，任何额外值则需要自定义的CSS。先看官方的css样式 .order-first{order:-1!important} .order-0{order:0!important} .order-1{order:1!importa...

bootstrap5 .mt-auto .mb-auto .my-auto

taotaoit 1 1

1623 0 2021-08-04 Bootstrap5

css样式 .mt-auto{margin-top:auto!important} .mb-auto{margin-bottom:auto!important} .my-auto{margin-top:auto!important;margin-bottom:auto!important}

bootstrap5 .me-auto .ms-auto .mx-auto和bootstrap4 .ml-auto .mr-auto

taotaoit 4 1

3086 0 2021-08-04 Bootstrap5

bootstrap5 .me-auto .ms-auto是什么意思？先看css样式 bootstrap5 .ms-auto元素居右 .me-auto元素居左 .ms-auto{margin-left:auto!important} .me-auto{margin-right:auto!important} .m...

加载更多

关于本站