随笔分类 - bootstrap
前端框架 - bootstrap 学完变漂亮！
摘要：下拉菜单 使用 Bootstrap 下拉插件切换上下文覆盖以显示链接列表等。 下拉菜单是可切换的上下文叠加，用于显示链接列表等。它们与包含的 Bootstrap 下拉 JavaScript 插件进行交互。它们通过点击而不是悬停来切换 来一个最基本的下拉菜单： 【如果你想指针是手形的 当然你把div
阅读全文
摘要：折叠菜单 首先要有按钮 按钮是 button 或 a标签都可以 主要加上 .btn 啊哈哈~ 实例： <!--下面是两个按钮 其中主要是 data-toggle 和 href data-toggle 是bootstrap写好的一些底层交互 你自己加上对应的值即可 href 要对应id 即折叠交互的i
阅读全文
摘要：bootstrap组件#巨幕和旋转图标 巨幕不用怎么学 这玩意卡片我觉得都可以替代它... 1. 巨幕 jumbotron 基类 是 .jumbotron 然后就没了,,,,,,,可以在里面添加各种组件 和样式而已： 巨幕的宽度会制动占据100% <!-- 巨幕的宽度会制动占据100% 背景颜色自己
阅读全文
摘要：因为 Bootstrap 的 d-flex 会最高级 display flex 所以 要想把 他隐藏 我们需要 吧 d-dlex 删 然后none 即可 还原那 反过来： 带脑子看题：啊哈哈： //display 隐藏flex 的方法 $('.login').removeClass('d-flex'
阅读全文
摘要：1. Pagination 分页 首先 .pagination 是基类，然后分页项 如果是普通分页项的话，那就加.page-item，如果是a标签的话 就加.page-link 【下面所示： 和普通的一个分页】 <!--首先 .pagination 是基类，然后分页项 如果是普通分页项的话，那就加.
阅读全文
摘要：列表组 以后凡是带sm、lg 那些 都是响应式的啊 主要你自己看提示..好多啊 讲不完的... -学这个主要还是看他的官方API 最基本的列表组： <ul class="list-group"> <li class="list-group-item active" >列表项1</li> <!--ac
阅读全文
摘要：卡片导航 这里要配合 .nav 暂时也没讲 跟着做即可： <!--这里要配合 .nav 暂时也没讲 跟着做即可：--> <div class="card" style="width: 500px;"> <div class="card-header"> <ul class="card-header-
阅读全文
摘要：Cards Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. 一卡是一个灵活的，可扩展的内容容器。它包括页眉和页脚选项、种类繁多的内容、上
阅读全文
摘要：按钮（Buttons） 使用.btn和.btn-*实现按钮的预设样式; 如果单一个btn的话 只有一个轮廓 <!--Bootstrap 内置了几种预定义的按钮样式，每种样式都有自己的语义目的，并添加了一些额外的按钮--> <button type="button" class="btn btn-pr
阅读全文
摘要：1.徽章 （Badge） <!--dabge 是基类 badge-* 可调颜色 --> <!--dabge 是基类 badge-* 可调颜色 --> <h1>zspt<span class="badge badge-secondary">.cc</span></h1> <h2>zspt<span c
阅读全文
摘要：提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:
阅读全文
摘要：1.学了容器包裹的概念 2.学了网格布局【栅栏布局】 和 网格布局的优先级，懂的会调试和制作 屏幕不同时的响应式布局，还有就是对12列的分布和自定义，以及一些偏移、微调、等Class的使用。 3.学了响应式布局的 显隐操作。 4.学了 对 网格布局【栅栏布局】 的 对齐方式、左右边距、列计算、以及个
阅读全文
摘要：使用.flex-fill强制让每个元素项目占据相等的水平宽度; 多个项目同时设置了.flex-fill，则它们等比例分割宽度，适合导航项目; <!-- 使用.flex-fill强制让每个元素项目占据相等的水平宽度; 多个项目同时设置了.flex-fill，则它们等比例分割宽度，适合导航项目; -->
阅读全文
摘要：使用.d-flex和.d-inline-flex实现开启flex布局样式;【开启弹性布局】 .flex-row可以呈现子元素水平方向的位置，默认居左并从左到右显示(1,2,3)【学过flex的都知道 x是默认的主轴】 .flex-row-reverse子元素水平方向居右从左到右显示(3，2，1) ;
阅读全文
摘要：使用.d-*来设置元素的display模式，*可以是none、inline、inline-block、block、 table、table-row等; 也可以通过.d-md-*中的md设置响应式的媒体查询效果; <!-- 使用.d-*来设置元素的display模式，*可以是none、inline、i
阅读全文
摘要：bootStrap _ 公共样式2 使用.p-*来设置内边距(padding)，范围在0-5之间和auto; 使用.m-*来设置外边距(margin),范围在0-5之间和auto; <style> .temp { width: 100px; height: 80px; float: left; bo
阅读全文
摘要：1.颜色Color： 使用.text-*将文本设置成指定的颜色，比如: .text-success； 也可以.text-*-50降色【只有白色和黑色才可以设 置 ： white 和 black ！】 使用.text-*也可以实现悬停和焦点的超链接样式【a标签】，white和muted 这样个颜色不支
阅读全文
