BootStrap4 基础模版

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

BootStrap4 基础模版

  
  
  
  





  


    
添加上你的代码

  

实例精选

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

表格

  

    
序号
姓名
年龄
    
888
张三
1000
  

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

表格样式

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

状态类

属性	描述 作用
active	活动灰	鼠标悬停在行或单元格上时所设置的颜色
success	成功绿	标识成功或积极的动作
info	提示蓝	标识普通的提示信息或动作
warning	警告黄	标识警告或需要用户注意
danger	危险红	标识危险或潜在的带来负面影响的动作

响应式表格

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

按钮

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

  按钮

预定义样式

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

尺寸

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

default

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

激活状态

Primary button
Primary link

禁用状态

Primary button

图片

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

图片形状