【Bootstrap5】精细学习记录

Bootstrap模板

Bootstrap 模板
      
      Hello, world!

Bootstrap一切以源码为重，大体和html差不多（其中网格系统算是创新且重要的），需要时查源码。

Bootstrap特性

移动设备优先

响应式图像

全局显示、排版和链接

等……

具体可见菜鸟教程

多阅读源码！

Bootstrap网格系统

网格系统将container容器分为12列，行row最好在container内，列在行row内，再通过"col--"定义在不同视口情况下占的列数。

基本网格结构：

.......

Bootstrap v5.0.0源码：

【Bootstrap5】精细学习记录_Bootstrap5

可以通过以下代码，不断调整视口大小自己感觉。

bootstrap-learninghello worldLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                nisi ut aliquip ex ea commodo consequat.Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
                quae ab illo inventore veritatis et quasi architecto beatae vitae 
                dicta sunt explicabo.Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                accusantium doloremque laudantium.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
                consectetur, adipisci velit, sed quia non numquam eius modi 
                tempora incidunt ut labore et dolore magnam aliquam quaerat 
                voluptatem.

列偏移

即设置列的margin-left，通过查阅源码，bootstrap5.0.0可以通过

offset-i  i偏移的列数（0，11）
offset-xx-i xx:md,sm,···

列嵌套

顾名思义，在row里面再填列row就可以了。

新列的网格系统均参考父元素。

列排序

Bootstrap5.0.0中，排序使用order

order-i  i表示顺序
order-xx-i  xx:md,sm,···
默认顺序层级相同，层级相同时，靠前的排前面

Bootstrap排版

text

Bootstrap5.0.0源码：

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* rtl:end:remove */
.text-primary {
  color: #0d6efd !important;
}

.text-secondary {
  color: #6c757d !important;
}

.text-success {
  color: #198754 !important;
}

.text-info {
  color: #0dcaf0 !important;
}

.text-warning {
  color: #ffc107 !important;
}

.text-danger {
  color: #dc3545 !important;
}

.text-light {
  color: #f8f9fa !important;
}

.text-dark {
  color: #212529 !important;
}

.text-white {
  color: #fff !important;
}

.text-body {
  color: #212529 !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-reset {
  color: inherit !important;
}

更多可参考这里，然后多阅读源码就行了。

Bootstrap基础组件

代码

内联代码
	代码块代码中: >

表格

【Bootstrap5】精细学习记录_Bootstrap5_02

实测：Bootstrap5.0.0还有一些bug????

最好先使用Bootstrap3或者4。

--------------------后面以bootstrap3为准--------------------

一些样式就不说了。

表单

  • 垂直表单（默认）

    名称提交

  • 内联表单

    名称提交

  • 水平表单

    名字姓登录

按钮

【Bootstrap5】精细学习记录_Bootstrap5_03

图片

辅助类

【Bootstrap5】精细学习记录_Bootstrap5_04

【Bootstrap5】精细学习记录_Bootstrap5_05

Bootstrap组件

字体图标

Customize 字形图标（Glyphicons） - 菜鸟教程 (runoob.com)

下拉菜单

主题        
    下拉菜单标题Java
        分离的链接

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。

···太多了，不想写了????，菜鸟教程已经写得很全了，只需要自己注意一下版本问题就行了，下面就记录一下关键类吧！（相信xdm都会vscode的Emmet吧）···

按钮组

#基本按钮组
div.btn-group>button[type=button].btn.btn-defualt*3
#按钮工具栏
div.btn-tool[role=toolbar]>(div.btn-group>button[type=button].btn.btn-default)*3
#按钮大小
btn-group-xx  xx:sm,lg···
#嵌套
#垂直按钮组
div.btn-group-vertical>(···)

按钮下拉菜单

基本：

	原始 
		
	
	
		功能
		
		分离的链接

按钮下拉菜单大小：

调整按钮的类即可。


按钮上拉菜单

向父 .btn-group 容器添加 .dropup 即可。


输入框组

基本输入框组：

1.把前缀或后缀元素放在一个带有 class .input-group 的中。
2.接着，在相同的内，在 class 为 .input-group-addon 的  内放置额外的内容。
3.把该  放置在元素的前面或者后面。
div.input-group>(span.input-group-addon{@}+input[type=text].form-control)

按钮插件：

使用.input-group-addon替代.input-group-btn来包裹按钮
div.input-group>(span.input-group-button{@}+input[type=text].form-control)

导航元素

标签式导航菜单

ul.nav.nav-tabs>(li.active>a[href=#]+(li>a[href=#])*5)

胶囊式导航菜单

ul.nav.nav-pills>(li.active>a[href=#]+(li>a[href=#])*5)

垂直导航菜单

在使用.nav、.nav-pills或.nav-tabs的同时使用.nav-stacked

两端对齐导航

在使用.nav、.nav-pills或.nav-tabs的同时使用.nav-justified

菜单项内容

.tab-content与.tab-pane和data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。首页菜单 1菜单 2菜单 3首页菜鸟教程 —— 学的不仅是技术，更是梦想！！！菜单 1这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。菜单 2这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。菜单 3这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。

导航栏

默认导航栏

1.向标签添加 class .navbar、.navbar-default。
2.向上面的元素添加 role="navigation"，有助于增加可访问性。
3.向元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的  元素。这会让文本看起来更大一号。
4.为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

响应式导航栏

##切换导航
            
            
            
        菜鸟教程
    iOSSVN
                    Java 
                
                jmeterEJBJasper Report分离的链接另一个分离的链接

表单导航栏

# 在原本标签位置：提交

导航栏按钮

# 不在form中的button
# .navbar-btn 可被使用在  和元素上。导航栏按钮

导航栏文本

Runoob 用户登录

导航栏组件对齐

.navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。

导航栏固定在顶底部

# 顶部# 底部# 随着页面移动的顶底部

反色导航栏


面包屑组

Home2013十一月

分页

分页（Pagination）

ul.pagination>(li>a[href=#]{«}+(li>a[href=#]{$}*5)+li>a[href=#]{»})

翻页（Pager）

ul.pager>(li.previous>a[href=#]{←pre}+li.next>a[href=#]{next→})

标签

默认标签主要标签成功标签信息标签警告标签危险标签

徽章

50# 当内部为空时，自动隐藏42# pull-right、pull-left 调整徽章位置
# 相对标签更圆润

超大屏幕

1.创建一个带有 class .jumbotron. 的容器2.除了更大的，字体粗细 font-weight 被减为 200

页面标题

如需使用页面标题（Page Header），请把您的标题放置在带有 class .page-header 的中
div.page-header

缩略图

1.在图像周围添加带有 class .thumbnail 的  标签。
2.这会添加四个像素的内边距（padding）和一个灰色的边框。
3.当鼠标悬停在图像上时，会动画显示出图像的轮廓。

警告

普通：

成功！很好地完成了提交。信息！请注意这个信息。警告！请不要提交。错误！请进行一些更改。

可取消：

# 同时添加alert-dismissable

进度条

40% 完成

其他样式：

# 在 progress-bar 基础上添加 progress-bar-* ( * = success、info、warning、danger)
  决定进度条颜色
# 条纹的进度条
  在 progress 基础上添加 progress-striped
# 运动起来
  在 progress 基础上添加 active
# 堆叠起来
  div.progress元素内部 添加多个 div.progress-bar

多媒体对象

媒体对象可以用更少的代码来实现媒体对象（如：图像、视频、音频等）与文字的混排。

  左对齐这是一些示例文本...

列表组

ul.list-group>(li.list-group-item)*5

列表组竖直排列，可以使用一下css代码获得水平排列列表组。

.list-group-horizontal .list-group-item {
    display: inline-block;
}
.list-group-horizontal .list-group-item {
    margin-bottom: 0;
    margin-left:-4px;
    margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
    border-top-right-radius:0;
    border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
    border-top-right-radius:4px;
    border-bottom-left-radius:0;
}

面板

基本

这是一个基本的面板

其他样式：

panel-primary
panel-success
panel-info
panel-warning
panel-danger

面板内部结构：

panel-heading
1.使用 .panel-heading class 可以很简单地向面板添加标题容器。
2.使用带有 .panel-title class 的-来添加预定义样式的标题。
panel-body
panel-footer
其他结构：如： table、ul……

Well

Well 是一种会引起内容凹陷显示或插图效果的容器 。

div.well

Bootstrap插件

待补