首页 > js教程 > 正文

推荐:bootstrap4中常用的样式介绍

转载 2018-10-13 15:46:48 0 244
本篇文章给大家带来的内容是关于推荐:bootstrap4中常用的样式介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

背景

最近在做一些小的学习项目时,多次用到了bootstrap4,所以在这里将bootstrap进行整理,用来以后查看。(免费视频课程推荐:bootstrap教程

bootstrap4安装

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/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.0.0-beta/js/bootstrap.min.js"></script>

容器和网格系统

container container-fluid //容器类前者固定宽度后者100%宽度

文字排版

display //标题类 1-4
small //小文本
<abbr> //文本底部下面一条虚线边框

颜色

text-muted  柔和
text-primary 重要
text-success 成功
text-info 提示
text-warning 警告
text-danger 危险
text-secondary 副标题
text-dark 深灰色文字
text-light 浅灰色
text-white 白色

表格

table  //默认样式
table-striped //条纹表格
table-bordered //边框表格
table-hover //鼠标悬停
table-dark //黑色背景表格
table-responsive //响应式表格

图片

rounded  //圆角效果
rounded-circle //椭圆效果
img-thumbnail //图片缩略图效果
img-fluid //图片响应式效果
超大屏幕
jumbotron // 屏幕
jumbotron-fluid //没有圆角的全屏幕

信息提示框

alert-success //成功提示信息
alert-dismissable class="close" data-dismiss="alert" //关闭提示框

按钮

btn-primary //主要按钮
btn-secondary //次要按钮
btn-success //成功按钮
btn-info //信息按钮
btn-danger //危险
btn-outline-primary //按钮边框
btn-sm btn-lg //小大号按钮
btn-block //块级按钮
active //可用
disabled //禁用

按钮组

btn-group //按钮组
btn-group-lg|sm|xs 控制按钮组大小
btn-group-vertical 垂直按钮组

进度条

progress  //添加一个p
progress-bar //在上面的p中添加一个progress-bar的p

分页

pagination //ul元素上添加
page-item //在li元素上添加page-item

列表组

list-group //列表组
list-group-item //列表li
list-group-item-action

卡片

card、card-header、card-body、card-footer
card-img-top //图片
card-body、card-title、card-text //图片卡片
card-img-overlay//设置图片为背景

下拉菜单

dropdown //下拉菜单默认
button设置dropdown-toggle   data-toggle=“dropdown” //下拉button
dropdown-menu //下拉菜单
a设置样式dropdown-item

导航栏

navbar、navbar-expand-sm、bg-light
ul:navbar-nav li:nav-item

表单

form-group
label for email
input class form-control

模态框

button设置 data-toggle="modal" data-target="#myModal"
<div class="modal fade" id="myModal"></div>
<div class="modal-dialog"></div>
<div class="modal-content"></div>
 <div class="modal-header">
        <h4 class="modal-title">模态框头部</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
<div class="modal-body">模态框内容..</div>
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button></div>

提示框

data-toggle="tooltip" //创建提示框
title="我是提示内容!" //提示内容
data-placement="top" //指定提示框位置
$(document).ready(function(){    //初始化
$('[data-toggle="tooltip"]').tooltip(); 
});

以上就是推荐:bootstrap4中常用的样式介绍的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:bootstrap
  • 本文转载于:segmentfault思否,如有侵犯,请联系删除
  • 相关文章


  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • BootStrap响应式导航条实例介绍_javascript技巧
  • bootstrap3 兼容IE8浏览器!_javascript技巧
  • 深入浅析Bootstrap列表组组件
  • Bootstrap媒体对象的实现_javascript技巧
  • Bootstrap实现下拉菜单效果_javascript技巧
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • 兄弟连张诚Bootstrap视频教程 兄弟连张诚Bootstrap视频教程
  • 前端开发常用的库—Bootstrap 前端开发常用的库—Bootstrap
  • 麦子学院bootstrap入门视频教程 麦子学院bootstrap入门视频教程
  • Bootstrap3参考手册 Bootstrap3参考手册
  • 黑马程序员bootstrap视频教程 黑马程序员bootstrap视频教程
  • Bootstrap 4 中文开发手册 Bootstrap 4 中文开发手册
  • 相关视频章节