首頁 > web前端 > js教程 > 推薦:bootstrap4中常用的樣式介紹

推薦:bootstrap4中常用的樣式介紹

不言
發布: 2018-10-13 16:08:59
轉載
2407 人瀏覽過

這篇文章帶給大家的內容是關於推薦: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(){    //初始化
$(&#39;[data-toggle="tooltip"]&#39;).tooltip(); 
});
登入後複製

以上是推薦:bootstrap4中常用的樣式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板