咸咸瑜瑜的博客_bootstrap

bootstrap

屏幕宽度

css

原创 2022-05-31 19:59:27 145 阅读

1. BootStrapt 的介绍 ...

BootStrapt今天开始学 BootStrapt ： Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。为什么使用 Bootstrap？移动设备优先：自 Bootstrap 3 起，框架包含了贯穿

bootstrap

css

jquery

原创 2022-05-31 19:59:19 501 阅读

4. Bootstrap 简单实用的自适应显示隐藏方法

我们或多或少都可以在自适应页面用到，而且非常方便，实现某个元素只在PC显示而且其他...显和隐藏：要隐藏的元素，只需要对任何响应屏幕变化使用.d-none这个class即可语法： .d-{sm,md,lg,xl}-none 要给给定的屏幕尺寸隔上显示元素，可以将一个.d-*-none类与

html

bootstrap

原创 2022-05-31 19:59:06 1161 阅读

5. BootStrap 栅格对齐和栅格排列

看图：看例子：注释有些是这里没得认真看注释即可！ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https:

html

bootstrap

jquery

原创 2022-05-31 19:58:55 448 阅读

6.BootStrap 内容排版

排版 Bootstrap 排版的文档和示例，包括全局设置、标题、正文、列表等。标题使用<h1>~</h6>可以创建不同尺寸的标题文字【普通H5】如果是使用其它元素标签，比如<p>或<div>，调用.h1~6同样实现大标题；【框架实现】例如： <h1>学习中收获，收获中感恩！</h1> <

h5

html

bootstrap

原创 2022-05-31 19:58:44 192 阅读

8. 颜色和样式 - BootStrap

1.颜色Color：使用.text-*将文本设置成指定的颜色，比如: .text-success；也可以.text-*-50降色【只有白色和黑色才可以设置： white 和 black ！】使用.text-*也可以实现悬停和焦点的超链接样式【a标签】，white和muted 这样个颜色不支

圆角

背景色

超链接

原创 2022-05-31 19:58:30 354 阅读

19. BootStrap 列表组

列表组以后凡是带sm、lg 那些都是响应式的啊主要你自己看提示..好多啊讲不完的... -学这个主要还是看他的官方API 最基本的列表组： <ul class="list-group"> <li class="list-group-item active" >列表项1</li> <!--ac

百度

响应式

悬停

原创 2022-05-31 19:58:12 112 阅读

21. bootstrap组件#分页和进度条

1. Pagination 分页首先 .pagination 是基类，然后分页项如果是普通分页项的话，那就加.page-item，如果是a标签的话就加.page-link 【下面所示：和普通的一个分页】 <!--首先 .pagination 是基类，然后分页项如果是普通分页项的话，那就加.

分页

进度条

a标签

原创 2022-05-31 19:58:03 193 阅读

24. bootstrap组件#折叠菜单

折叠菜单首先要有按钮按钮是 button 或 a标签都可以主要加上 .btn 啊哈哈~ 实例： <!--下面是两个按钮其中主要是 data-toggle 和 href data-toggle 是bootstrap写好的一些底层交互你自己加上对应的值即可 href 要对应id 即折叠交互的i

bootstrap

javascript

html

原创 2022-05-31 19:56:45 213 阅读

25. Bootstreap 下拉菜单

下拉菜单使用 Bootstrap 下拉插件切换上下文覆盖以显示链接列表等。下拉菜单是可切换的上下文叠加，用于显示链接列表等。它们与包含的 Bootstrap 下拉 JavaScript 插件进行交互。它们通过点击而不是悬停来切换来一个最基本的下拉菜单：【如果你想指针是手形的当然你把div

下拉菜单

下拉列表

ide

原创 2022-05-31 19:56:37 151 阅读

11. bootstrap - 公共样式3

使用.d-*来设置元素的display模式，*可以是none、inline、inline-block、block、 table、table-row等; 也可以通过.d-md-*中的md设置响应式的媒体查询效果; <!-- 使用.d-*来设置元素的display模式，*可以是none、inline、i

响应式

重置

超链接

原创 2022-05-31 18:59:06 222 阅读

10 bootStrap _ 公共样式2

bootStrap _ 公共样式2 使用.p-*来设置内边距(padding)，范围在0-5之间和auto; 使用.m-*来设置外边距(margin),范围在0-5之间和auto; <style> .temp { width: 100px; height: 80px; float: left; bo

自定义

外边距

阴影效果

原创 2022-05-31 18:58:59 311 阅读

12. Flex 弹性布局 BootStrap

使用.d-flex和.d-inline-flex实现开启flex布局样式;【开启弹性布局】 .flex-row可以呈现子元素水平方向的位置，默认居左并从左到右显示(1,2,3)【学过flex的都知道 x是默认的主轴】 .flex-row-reverse子元素水平方向居右从左到右显示(3，2，1) ;

竖向

javascript

html

原创 2022-05-31 18:58:43 239 阅读

BootStarpt - 1-13章节总结

1.学了容器包裹的概念 2.学了网格布局【栅栏布局】和网格布局的优先级，懂的会调试和制作屏幕不同时的响应式布局，还有就是对12列的分布和自定义，以及一些偏移、微调、等Class的使用。 3.学了响应式布局的显隐操作。 4.学了对网格布局【栅栏布局】的对齐方式、左右边距、列计算、以及个

自定义

响应式

圆角

原创 2022-05-31 18:58:35 93 阅读

13. Flex 弹性布局2 BootStrap

使用.flex-fill强制让每个元素项目占据相等的水平宽度; 多个项目同时设置了.flex-fill，则它们等比例分割宽度，适合导航项目;

倒序

css

javascript

原创 2022-05-31 18:58:27 135 阅读

14. BootStrap * 组件 - 信息提示框

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:

警告框

提示框

超链接

原创 2022-05-31 18:58:17 227 阅读

15. 徽章和面包屑导航

1.徽章（Badge）   <h1>zspt<span class="badge badge-secondary">.cc</span></h1> <h2>zspt<span c

分隔符

ide

h5

原创 2022-05-31 18:58:10 109 阅读

16. 按钮和按钮组

按钮（Buttons）使用.btn和.btn-*实现按钮的预设样式; 如果单一个btn的话只有一个轮廓  <button type="button" class="btn btn-pr

复选框

单选框

工具类

原创 2022-05-31 18:58:04 1001 阅读

18. BootStrap 卡片组件Cards （2）

卡片导航这里要配合 .nav 暂时也没讲跟着做即可：  <div class="card" style="width: 500px;"> <div class="card-header"> <ul class="card-header-

禁止状态

分隔线

lua

原创 2022-05-31 18:57:55 160 阅读

17. BootStrap 卡片组件Cards （1）

Cards Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. 一卡是一个灵活的，可扩展的内容容器。它包括页眉和页脚选项、种类繁多的内容、上

bootstrap

ide

背景颜色

原创 2022-05-31 18:57:43 562 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

咸瑜的博客

欢迎

2. bootstrap 布局系统的介绍和栅格化系统【网格系统】的学习

1. BootStrapt 的介绍 ...

4. Bootstrap 简单实用的自适应显示隐藏方法

5. BootStrap 栅格对齐和栅格排列

6.BootStrap 内容排版

8. 颜色和样式 - BootStrap

19. BootStrap 列表组

21. bootstrap组件#分页和进度条

24. bootstrap组件#折叠菜单

25. Bootstreap 下拉菜单

11. bootstrap - 公共样式3

10 bootStrap _ 公共样式2

12. Flex 弹性布局 BootStrap

BootStarpt - 1-13章节总结

13. Flex 弹性布局2 BootStrap

14. BootStrap * 组件 - 信息提示框

15. 徽章和面包屑导航

16. 按钮和按钮组

18. BootStrap 卡片组件Cards （2）

17. BootStrap 卡片组件Cards （1）