草庐IT

$bootstrap

全部标签

Bootstrap4 列表组

Bootstrap4列表组大部分基础列表组都是无序的。要创建列表组,可以在元素上添加.list-group类,在元素上添加.list-group-item类:实例ulclass="list-group">liclass="list-group-item">Firstitemli>liclass="list-group-item">Seconditemli>liclass="list-group-item">Thirditemli>ul>尝试一下»激活状态的列表项通过添加.active类来设置激活状态的列表项:实例ulclass="list-group">liclass="list-group-

Bootstrap4 分页

Bootstrap4分页网页开发过程,如果碰到内容过多,一般都会做分页处理。Bootstrap4可以很简单的实现分页效果。要创建一个基本的分页可以在元素上添加.pagination类。然后在元素上添加.page-item类,元素的标签上添加.page-link类:实例ulclass="pagination">liclass="page-item">aclass="page-link"href="#">Previousa>li>liclass="page-item">aclass="page-link"href="#">1a>li>liclass="page-item">aclass="page

Bootstrap4 分页

Bootstrap4分页网页开发过程,如果碰到内容过多,一般都会做分页处理。Bootstrap4可以很简单的实现分页效果。要创建一个基本的分页可以在元素上添加.pagination类。然后在元素上添加.page-item类,元素的标签上添加.page-link类:实例ulclass="pagination">liclass="page-item">aclass="page-link"href="#">Previousa>li>liclass="page-item">aclass="page-link"href="#">1a>li>liclass="page-item">aclass="page

Bootstrap4 加载效果

Bootstrap4加载效果要创建加载中效果可以使用.spinner-border类:实例divclass="spinner-border">div>尝试一下»可以使用文本颜色类设置不同的颜色:实例divclass="spinner-bordertext-muted">div>divclass="spinner-bordertext-primary">div>divclass="spinner-bordertext-success">div>divclass="spinner-bordertext-info">div>divclass="spinner-bordertext-warning">

Bootstrap4 加载效果

Bootstrap4加载效果要创建加载中效果可以使用.spinner-border类:实例divclass="spinner-border">div>尝试一下»可以使用文本颜色类设置不同的颜色:实例divclass="spinner-bordertext-muted">div>divclass="spinner-bordertext-primary">div>divclass="spinner-bordertext-success">div>divclass="spinner-bordertext-info">div>divclass="spinner-bordertext-warning">

Bootstrap4 进度条

Bootstrap4进度条进度条可以显示用户任务的完成过程。创建一个基本的进度条的步骤如下:添加一个带有.progress类的。接着,在上面的内,添加一个带有class.progress-bar的空的。添加一个带有百分比表示的宽度的style属性,例如style="width:70%"表示进度条在70%的位置。实例divclass="progress">divclass="progress-bar"style="width:70%">div>div>尝试一下»进度条高度进度条高度默认为16px。我们可以使用CSS的height属性来修改他:实例divclass="progress"style=

Bootstrap4 进度条

Bootstrap4进度条进度条可以显示用户任务的完成过程。创建一个基本的进度条的步骤如下:添加一个带有.progress类的。接着,在上面的内,添加一个带有class.progress-bar的空的。添加一个带有百分比表示的宽度的style属性,例如style="width:70%"表示进度条在70%的位置。实例divclass="progress">divclass="progress-bar"style="width:70%">div>div>尝试一下»进度条高度进度条高度默认为16px。我们可以使用CSS的height属性来修改他:实例divclass="progress"style=

Bootstrap4 徽章(Badges)

Bootstrap4徽章(Badges)徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要将.badge类加上带有指定意义的颜色类(如.badge-secondary)添加到元素上即可。徽章可以根据父元素的大小的变化而变化:实例h1>测试标题spanclass="badgebadge-secondary">Newspan>h1>h2>测试标题spanclass="badgebadge-secondary">Newspan>h2>h3>测试标题spanclass="badgebadge-secondary">Newspan>h3>h4>测试标题spanclass="badg

Bootstrap4 徽章(Badges)

Bootstrap4徽章(Badges)徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要将.badge类加上带有指定意义的颜色类(如.badge-secondary)添加到元素上即可。徽章可以根据父元素的大小的变化而变化:实例h1>测试标题spanclass="badgebadge-secondary">Newspan>h1>h2>测试标题spanclass="badgebadge-secondary">Newspan>h2>h3>测试标题spanclass="badgebadge-secondary">Newspan>h3>h4>测试标题spanclass="badg

Bootstrap4 按钮组

Bootstrap4按钮组Bootstrap4中允许我们将按钮放在同一行上。可以在元素上添加.btn-group类来创建按钮组。实例divclass="btn-group">buttontype="button"class="btnbtn-primary">Applebutton>buttontype="button"class="btnbtn-primary">Samsungbutton>buttontype="button"class="btnbtn-primary">Sonybutton>div>尝试一下»提示:我们可以使用.btn-group-lg|sm类来设置按钮组的大小。实例div