bootstrap4

一、布局 0.课件 1.Bootstrap介绍_栅格系统 2.禁用响应式_响应式分界点 二、内容 3.排版_代码 4.图片_图片框 5.表格 三、公共样式 6.边框_浮动 7.颜色_Display显示属性 8.文本处理_垂直对齐_规格与尺寸 9.间隔_阴影 10.position定位_visibility显示或隐藏_关闭图标 11.嵌入_图像替换_读屏器 12.flex弹性布局 四、组件 13.警告提示框(Alert) 14.徽章(Badge)_面包屑导航(Breadcrumb) 15.按钮(Button) 16.下拉菜单(Dropdowns) 17.按钮组(Btn-group) 18.Input输入框及输入框群组 19.表单(Form) 20.轮播效果(Carousel) 21.Hero广告大块屏幕(Jumbotron)_列表组(List-group) 22.媒体对象-图文混排(Media-object) 23.弹出提示框(Toast) 24.提示冒泡(Tooltip) 25.POP提示(Popover) 26.弹出模态框(Modal) 27.导航-滑动门(nav) 28.导航栏(navbar) 29.卡片(Card) 30.折叠面板(Collapse) 31.分页(Pagination)_进度条(Progress) 32.滚动监听(Scrollspy) 33.旋转特效

bootstrap4c-chosen是一款Bootstrap4下拉框功能强化插件。该插件在原生bootstrap4下拉框的基础上，新增了搜索、选项分组、多选等功能，非常实用。 可以通过npm来安装bootstrap4c-chosen插件。 npm install bootstrap4c-chosen 在页面中引入bootstrap4相关文件，component-chosen.min.css文件以及jquery和chosen.jquery.js文件。 < link rel = "stylesheet" href = "path/to/bootstrap.min.css" > < link rel = "stylesheet" href = "path/to/component-chosen.min.css" > < script src = "js/jquery.min.js" ></ script > < script src = "js/bootstrap.min.js" ></ script > < script src = "js/chosen.jquery.js" ></ script > bootstrap4c-chosen下拉框功能强化插件有以下五种增强功能。 1、single（单选） < select id = "single" class = "form

<link rel="stylesheet" href="../Boot strap/bootstrap-4.1.3-dist/css/bootstrap.min.css"> <script src="../Boot strap/jquery-3.4.1.js"></script> <script src="../Boot strap/bootstrap-4.1.3-dist/js/bootstrap.bundle.min.js"></script> <script src="../Boot strap/bootstrap-4.1.3-dist/js/bootstrap.min.js"></script> 如下拉菜单: < div class = " dropdown " > < button type = " button " class = " btn btn-primary dropdown-toggle " data-toggle = " dropdown " > Dropdown button </ button > < div class = " dropdown-menu " > < a class = " dropdown-item " href = " # " > Link 1 </ a > < a class = " dropdown-item " href =

bootstrap4常用样式整理 BootStrap4.3.1 一副图 1 引入JS <meta name="viewpoint" content="width=device-width,initial-scale=1" /> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" /> 设置设备大小viewport 2 基础排版样式 2.1 容器和网格系统 • container container-fluid //容器类前者固定宽度后者100%宽度 文字排版 • display //标题类 1-4 • small //小文本 • //文本底部下面一条虚线边框 2.2 栅格布局系统 栅格嵌套* 响应式布局 显示和隐藏样式 3