codecamp

Bootstrap4 实用工具

在Bootstrap4中包含了很多实用的小工具，这些功能能够让你不用写 CSS 代码就能实现想要的效果，让开发更快捷和简单。

边框

使用 border 类可以添加或移除边框:

实例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 <style>
  .border {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 6px;
  }
  </style>
</head>
<body>
<div class="container">
  <h2>边框</h2>
  <p>使用 border 类可以添加或移除边框:</p> 
  <span class="border"></span>
  <span class="border border-0"></span>
  <span class="border border-top-0"></span>
  <span class="border border-right-0"></span>
  <span class="border border-bottom-0"></span>
  <span class="border border-left-0"></span>
</div>
</body>
</html>

边框颜色

Bootstrap4 提供了一些类来设置边框颜色:

实例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <style>
  .border {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 6px;
  }
  </style>
</head>
<body>
<div class="container">
  <h2>边框颜色</h2>
  <p>Bootstrap4 提供了一些类来设置边框颜色:</p> 
  <span class="border border-primary"></span>
  <span class="border border-secondary"></span>
  <span class="border border-success"></span>
  <span class="border border-danger"></span>
  <span class="border border-warning"></span>
  <span class="border border-info"></span>
  <span class="border border-light"></span>
  <span class="border border-dark"></span>
  <span class="border border-white"></span>
</div>
</body>
</html>

边框圆角设置

使用rounded 类可以添加圆角边框:

实例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <style>
  span {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 6px;
    background-color: #555;
  }
  </style>
</head>
<body>
<div class="container">
  <h2>边框圆角设置</h2>
  <p>使用rounded 类可以添加圆角边框:</p> 
  <span class="rounded"></span><!--全部圆角-->
  <span class="rounded-top"></span><!--上方圆角-->
  <span class="rounded-right"></span><!--右边圆角-->
  <span class="rounded-bottom"></span><!--下方圆角-->
  <span class="rounded-left"></span><!--左边圆角-->
  <span class="rounded-circle"></span><!--原型图片-->
  <span class="rounded-0"></span><!--没有圆角-->
</div>
</body>
</html>

浮动

.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动:

实例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>浮动</h2>
  <p>.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动:</p> 
  <div class="clearfix">
    <span class="float-left">左浮动</span>
    <span class="float-right">右浮动</span>
  </div>
</div>
</body>
</html>

响应式浮动

我们看可以设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:

实例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>响应式浮动</h2>
  <p>重置浏览器大小查看效果。</p>
  <p>我们看可以设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:</p> 
  <div class="float-sm-right">在大于小屏幕尺寸上右浮动</div><br>
  <div class="float-md-right">在大于中等屏幕尺寸上右浮动</div><br>
  <div class="float-lg-right">在大于大屏幕尺寸上右浮动</div><br>
  <div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div><br>
  <div class="float-none">没有浮动</div>
</div>
</body>
</html>

居中对齐

使用 .mx-auto 类来设置居中对齐:

实例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>水平居中</h1>
  <p>使用 .mx-auto 类来设置居中对齐::</p>
  <div class="mx-auto bg-warning" style="width:150px">居中</div>
</div>
</body>
</html>

宽度

元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:

实例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>宽度设置小工具</h1>
  <p>元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:</p>
  <div class="w-25 bg-warning">宽度 25%</div>
  <div class="w-50 bg-warning">宽度 50%</div>
  <div class="w-75 bg-warning">宽度 75%</div>
  <div class="w-100 bg-warning">宽度 100%</div>
  <div class="mw-100 bg-warning">最大宽度 100%</div>
</div>
</body>
</html>

高度

元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:

实例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>高度小工具</h1>
  <p>元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:</p>
  <div style="height:200px;background-color:#ddd">
    <div class="h-25 d-inline-block p-2 bg-warning">高度 25%</div>
    <div class="h-50 d-inline-block p-2 bg-warning">高度 50%</div>
    <div class="h-75 d-inline-block p-2 bg-warning">高度 75%</div>
    <div class="h-100 d-inline-block p-2 bg-warning">高度 100%</div>
    <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">最大高度 100%</div>
  </div>
</div>
</body>
</html>


Bootstrap 4 多媒体对象
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录
Bootstrap4 下载安装
Bootstrap4 浏览器支持
Bootstrap4 自定义选项
Bootstrap4 弹性盒Flexbox
Bootstrap4 页面创建
Bootstrap4 网格系统
Bootstrap4 排版
Bootstrap4 颜色设置
Bootstrap4 表格设置
Bootstrap4 图片设置
Bootstrap4 超大屏幕Jumbotron
Bootstrap4 信息提示框
Bootstrap4 按钮
Bootstrap4 按钮组
Bootstrap4 徽章（Badges）
Bootstrap4 进度条
Bootstrap4 分页
Bootstrap4 列表组
Bootstrap4 卡片
Bootstrap4 下拉菜单
Bootstrap4 折叠板
Bootstrap4 导航
Bootstrap4 导航栏
Bootstrap4 表单
Bootstrap4 表单控件
Bootstrap4 轮播
Bootstrap4 模态框
Bootstrap4 提示框
Bootstrap4 弹出框
Bootstrap4 滚动监听(Scrollspy)
Bootstrap 4 多媒体对象
Bootstrap4 实用工具

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }