BootStrap4 基础模版

最新推荐文章于 2024-09-02 09:24:05 发布

传说中的博文

最新推荐文章于 2024-09-02 09:24:05 发布

阅读量331

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_42651703/article/details/107529656

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

新建 HTML 页面，复制下方代码粘入

BootStrap4 基础模版

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
  <title>Hello, world!</title>
</head>

<body>

<div class="container">
  <div class="row">

    <h1>添加上你的代码</h1>

  </div>
</div>

</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(e){

});
</script>
</html>

实例精选

很多很多的现成的例子：http://v3.bootcss.com/getting-started/#examples

表格

<div class="container">
  <table class="table table-striped">
    <tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    <tr><td>888</td><td>张三</td><td>1000</td></tr>
  </table>
</div>

加上table基础样式之后才会附加表格样式

表格样式

属性	作用
table	基础样式
table-striped	条纹状表格
table-bordered	带边框的表格
table-hover	鼠标悬停
table-condensed	紧缩表格

#####状态类

属性	描述作用
active	活动灰
success	成功绿
info	提示蓝
warning	警告黄
danger	危险红

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

按钮

按钮样式可以添加给a标签，但是避免使用除botton之外的其他标签，不同设备兼容性方面可能会出现问题

<div class="container">
  <button type="button" class="btn btn-danger">按钮</button>
</div>

预定义样式

btn-default 默认样式白
btn-primary 首选项紫
btn-success 成功绿
btn-info 一般信息蓝
btn-warning 警告橙
btn-danger 危险红
btn-link 链接蓝字下划线

尺寸

btn-lg 大按钮
btn-default 默认尺寸
btn-sm 小按钮
btn-xs 超小尺寸

<a href="" class="btn btn-default btn-lg" role="button">default</a>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

激活状态

<button type="button" class="btn btn-primary btn-lg **active**">Primary button</button>
<a href="#" class="btn btn-primary btn-lg **active**" role="button">Primary link</a>

禁用状态

<button type="button" class="btn btn-lg btn-primary" **disabled**>Primary button</button>

图片

为图片添加** .img-responsive **类可以让图片支持响应式布局。
如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。
#####图片形状

<img src="girl.jpg" class="img-rounded">
<img src="girl.jpg" class="img-circle">
<img src="girl.jpg" class="img-thumbnail">

传说中的博文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录