草庐IT

$bootstrap

全部标签

Bootstrap5 按钮

Bootstrap5按钮Bootstrap5提供了不同样式的按钮。实例buttontype="button"class="btn">基本按钮button>buttontype="button"class="btnbtn-primary">主要按钮button>buttontype="button"class="btnbtn-secondary">次要按钮button>buttontype="button"class="btnbtn-success">成功button>buttontype="button"class="btnbtn-info">信息button>buttontype="butt

Bootstrap5 信息提示框

Bootstrap5信息提示框Bootstrap5可以很容易实现信息提示框。提示框可以使用.alert类,后面加上.alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,.alert-light或.alert-dark类来实现:实例divclass="alertalert-success">strong>成功!strong>指定操作成功提示信息。div>尝试一下»提示框添加链接提示框中在链接的标签上添加alert-link类来设置匹配提示框颜色的链接:实例divclass="

Bootstrap5 信息提示框

Bootstrap5信息提示框Bootstrap5可以很容易实现信息提示框。提示框可以使用.alert类,后面加上.alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,.alert-light或.alert-dark类来实现:实例divclass="alertalert-success">strong>成功!strong>指定操作成功提示信息。div>尝试一下»提示框添加链接提示框中在链接的标签上添加alert-link类来设置匹配提示框颜色的链接:实例divclass="

Bootstrap5 Jumbotron

Bootstrap5JumbotronJumbotron(超大屏幕)会创建一个大的灰色背景框,里面可以设置一些特殊的内容和信息。在Bootstrap3中引入了一个jumbotron来创建一个大的背景框,用于显示一些重要的信息。在Bootstrap5中,已经不再支持Jumbotron。但是,我们可以使用元素添加一些辅助类与颜色类来达到相同的效果:提示:Jumbotron里头可以放一些HTML标签,也可以是Bootstrap的元素。实例divclass="mt-4p-5bg-primarytext-whiterounded">h1>菜鸟教程h1>p>学的不仅是技术,更是梦想!!!p>div>尝试一

Bootstrap5 Jumbotron

Bootstrap5JumbotronJumbotron(超大屏幕)会创建一个大的灰色背景框,里面可以设置一些特殊的内容和信息。在Bootstrap3中引入了一个jumbotron来创建一个大的背景框,用于显示一些重要的信息。在Bootstrap5中,已经不再支持Jumbotron。但是,我们可以使用元素添加一些辅助类与颜色类来达到相同的效果:提示:Jumbotron里头可以放一些HTML标签,也可以是Bootstrap的元素。实例divclass="mt-4p-5bg-primarytext-whiterounded">h1>菜鸟教程h1>p>学的不仅是技术,更是梦想!!!p>div>尝试一

Bootstrap5 图像形状

Bootstrap5图像形状圆角图片.rounded类可以让图片显示圆角效果:实例imgdecoding="async"src="cinqueterre.jpg"class="rounded"alt="CinqueTerre">尝试一下»椭圆图片.rounded-circle类可以设置椭圆形图片:实例imgdecoding="async"src="cinqueterre.jpg"class="rounded-circle"alt="CinqueTerre">尝试一下»缩略图.img-thumbnail类用于设置图片缩略图(图片有边框):实例imgdecoding="async"src="cin

Bootstrap5 图像形状

Bootstrap5图像形状圆角图片.rounded类可以让图片显示圆角效果:实例imgdecoding="async"src="cinqueterre.jpg"class="rounded"alt="CinqueTerre">尝试一下»椭圆图片.rounded-circle类可以设置椭圆形图片:实例imgdecoding="async"src="cinqueterre.jpg"class="rounded-circle"alt="CinqueTerre">尝试一下»缩略图.img-thumbnail类用于设置图片缩略图(图片有边框):实例imgdecoding="async"src="cin

Bootstrap5 表格

Bootstrap5表格Bootstrap5基础表格Bootstrap5通过.table类来设置基础表格的样式,实例如下:实例tableclass="table">thead>tr>th>Firstnameth>th>Lastnameth>th>Emailth>tr>thead>tbody>tr>td>Johntd>td>Doetd>td>john@example.comtd>tr>tr>td>Marytd>td>Moetd>td>mary@example.comtd>tr>tr>td>Julytd>td>Dooleytd>td>july@example.comtd>tr>tbody>tabl

Bootstrap5 表格

Bootstrap5表格Bootstrap5基础表格Bootstrap5通过.table类来设置基础表格的样式,实例如下:实例tableclass="table">thead>tr>th>Firstnameth>th>Lastnameth>th>Emailth>tr>thead>tbody>tr>td>Johntd>td>Doetd>td>john@example.comtd>tr>tr>td>Marytd>td>Moetd>td>mary@example.comtd>tr>tr>td>Julytd>td>Dooleytd>td>july@example.comtd>tr>tbody>tabl

Bootstrap5 颜色

Bootstrap5颜色Bootstrap5提供了一些有代表意义的颜色类:.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger,.text-secondary,.text-white,.text-dark,.text-body(默认颜色,为黑色)and.text-light:实例divclass="container">h2>代表指定意义的文本颜色h2>pclass="text-muted">柔和的文本。p>pclass="text-primary">重要的文本。p>pclass="text-