前端-bootstrap4笔记(代码片段)

梦之海岛 梦之海岛     2022-12-05     418

关键词:

文章目录

前言

我通常都是结合官方文档去看菜鸟教程使用的Bootstrap,有些时候会遇到些问题
此篇文章仅用来记录学习过程中遇到的坑或者是trick,其他的东西还是看官方文档靠谱

Bootstrap4 教程 | 菜鸟教程

Bootstrap v4 中文文档

一、列位移

可以将浏览器看成如下的12列,图片来自菜鸟教程
因为标签必定会占据一列,所以offset后面的数字最多也就11
offset后面的数字表示当前的标签向右位移的列数,这个值得根据实际需要修改

class="offset-数字"

二、禁止换行

这个是之前遇到的一个坑,就是使用form-control来设置一个输入框的时候
输入框总是会占满一行,想要在输入框同行的右侧加入一个按钮都不行
所以需要在输入框上级的标签中,使用如下的class

class="form-inline"

前端-bootstrap4笔记(代码片段)

...到的坑或者是trick,其他的东西还是看官方文档靠谱Bootstrap4教程|菜鸟教程Bootstrapv4中文文档一、列位移可以将浏览器看成如下的12列,图片来自菜鸟教程因为标签必定会占据一列, 查看详情

前端-bootstrap4笔记(代码片段)

...到的坑或者是trick,其他的东西还是看官方文档靠谱Bootstrap4教程|菜鸟教程Bootstrapv4中文文档一、列位移可以将浏览器看成如下的12列,图片来自菜鸟教程因为标签必定会占据一列,所以offset后面的数字最多也就11offset... 查看详情

前端基础复习(代码片段)

目录前端学习bootstrap4学习:css:css语法:css选择器:js:scrapt:js输出数据:选择器:页面写入:函数:无名函数函数自执行:函数参数:修改标签的自由属性:元素的属性操作:事件:事件2:前端学习bootstrap4学习:样式: https://v4... 查看详情

前端笔记(代码片段)

/*输入金额限制两位小数*/<inputtype="number"placeholder="其他金额"class="m_input"onkeyup="clearNoNum(this)"/>functionclearNoNum(obj)if(!/^\d+(\.\d1,2)?$/.test(obj.value))obj.value=obj.value.replace(/[^\d.] 查看详情

前端笔记整理(css)(代码片段)

前端基础知识CSS3新特性定位常见类型`position:absolute`和`float`属性CSS盒模型`margin`塌陷浮动.clearfixBFC常见布局水平垂直居中flex布局flex属性flexitems属性两边宽度固定、中间栏自适应三栏布局怎么能让图文不可复制px... 查看详情

html基本bootstrap4导航(代码片段)

查看详情

前端笔记四前后端通信实例(http协议和ajax)(代码片段)

一、准备工作js和界面部分和前面的笔记一样【前端笔记】二、JavaScript实例通信部分【前端笔记】三、前后端通信(http协议和Ajax)回顾发送请求的方法://需要发送的消息varmsg='hello'//创建一个XHR对象varxhr=... 查看详情

前端笔记四前后端通信实例(http协议和ajax)(代码片段)

一、准备工作js和界面部分和前面的笔记一样【前端笔记】二、JavaScript实例通信部分【前端笔记】三、前后端通信(http协议和Ajax)回顾发送请求的方法://需要发送的消息varmsg='hello'//创建一个XHR对象varxhr=... 查看详情

前端学习笔记-07一些总结(代码片段)

本文目录前端的概念前端的学习思路软件开发架构浏览器访问网址的流程HTTP协议四大特性请求数据格式响应数据格式响应状态码请求方式url:统一资源定位符(即网址)标签的分类1head内常用标签body内常用标签基本标签标签的分类2... 查看详情

html笔记:前端-移动端下拉刷新-2.javascript通过窗口引入(代码片段)

查看详情

sh笔记:前端表单提交(一)-13.测试上传文件的生成方式(代码片段)

查看详情

web前端开发笔记——第一章web前端概论(代码片段)

...言一、Web系统(一)Web系统的定义(二)前端和后端二、网站和网页(一)网站的开发历程(二)网页的组成元素三、浏览器四、前端技术(一)超文本标记语言(HTML)(二࿰... 查看详情

前端就业班笔记框架封装(代码片段)

框架整体介绍->框架和库是什么库:仓库,表示的是很多为了实现特殊功能而封装的,便于使用开发的函数,对象和常量等.例如://在dom元素下,获得复合tagName的元素,//如果不提供dom参数,那么就是默认documentfunctiongetTag(tagName,dom)dom=dom||... 查看详情

前端项目笔记总结(代码片段)

技术栈:SpringBoot+vue3.0Element-Plus路由采用vue-router图标插件采用echarts5.0编写vite热更新能力更新速度非常快提高了开发的体验启动命令:npmrunserve列表采用el-table进行编写,并且采用el-pagination作为分页组件。通过globalP... 查看详情

前端笔记整理(html)(代码片段)

前端基础知识DOCTYPEDOCTYPE声明hack支持HTML5新标签严格模式与混杂模式区别xml和HTML的区别标签属性对语义化的理解?`iframe`的优缺点?DOCTYPEDOCTYPE声明<!DOCTYPE>声明有助于浏览器中正确显示网页。网页上不同的文件... 查看详情

前端开发入门基础---html笔记篇(代码片段)

牛牛纯手码!!!!新鲜出炉的:源码+笔记(还热乎)分为上下两篇,作为pink老师的亲传弟子,好吃的“包子”当然要分享给更多的人!10天码出近"五万"字的“源码+笔记”ÿ... 查看详情

vueadmin前端学习笔记(代码片段)

vueAdmin前端学习笔记1.安装VUE项目第一步:vue-ui第二步:创建第三步:详情第四步:选择手动第五步:配置第六步:点击创建项目第七步:启动项目第八步:vsCode启动项目2.安装element-ui3.删除不必要... 查看详情

前端笔记二javascript实例(代码片段)

目录一、界面准备二、业务逻辑三、js代码1.获取输入的消息2.发送输入的消息3.获取机器人的消息4.完成聊天机器人5.最终结果以创建一个自动回复的聊天机器人为例一、界面准备先搭一个界面<header><h2>聊天机器人</h2&g... 查看详情