使用bootstrap框架快速开发网页
使用bootstrap框架快速开发网页
本次使用bootstrap5+
框架进行对网页进行快速开发,本文不涉及JavaScript内容,只涉及网页的搭建,即html和css的使用,如果有疑惑可以参考以下链接进行学习:
refer
- bootstrap5.0文档
https://getbootstrap.com/docs/5.0/getting-started/introduction/- b站视频“bootstrap5快速入门”
https://www.bilibili.com/video/BV1G44y117Hb
同时,本网页和手机端做了适配,在网页放大缩小后不会出现图片过大占据整个屏幕等情况。主页最后能显示的效果如下:
本文将按照以下章节来讲述文章,对基于bootstrap框架的网页进行快速搭建
- Visual Studio Code的简单使用
- Bootstrap框架
Visual Studio Code
快速创建元素
使用vscode我们可以快速创建元素,如我们要创建h1元素,我们便可以使用h1+tab
创建
如果我们要创建带多个class属性的元素,我们可以使用带很多英文句号的方式创建,如我们要创建带p-5,bg-primary,text-light的class属性的元素,我们可以如下书写后再按Tab
特别的,英文句号能够隐式代替div元素
如果我们要创建多个元素,我们可以使用乘法的方式创建。以上四种情况配合Tab使用,效果见下:
h1
<h1></h1>section.p-5.bg-primary.text-light
<section class="p-5 bg-primary text-light">.container
<div class="container"></div>div*3
<div></div>
<div></div>
<div></div>
快速填充
当我们所要填写的内容还不确定的时候,我们可以使用lorem
来进行自动填充,当组合的效果不同的时候会有不同的情况,下面列举了三种常见的情况
lorem
用1段单词自动填充lorem3
创建3个单词进行填充lorem*3
用3段单词进行填充
同时为了让生成的lorem能够在一个屏幕中显示,不需要左右拖动,我们需要设置vscode的文字方式。打开设置,在通用设置里使得文字展开为打开状态。
随时预览开发的网页
推荐使用插件Live Server
,如下:
安装插件后,在需要实时预览的index.html文件右键,使用live server打开便可以实时预览。
要注意网页浏览器取消cache
Bootstrap5.0
为了方便后续的使用,我们这里推荐去官网上下载一下源文件
https://github.com/twbs/bootstrap/archive/v5.1.3.zip
将下载的压缩包中的bootstrap.min.css
文件和bootstrap.min.js
文件在index.html
文件head
元素中进行引用
然后我们就可以配合官方文档快速开发了。
待续
使用bootstrap框架快速开发网页相关推荐
- 【HTML③】JavaScript基础、使用JavaScript制作网页特效、使用前端库及UI框架快速开发
[HTML③]JavaScript基础.使用JavaScript制作网页特效.使用前端库及UI框架快速开发 八.JavaScript基础 1.JavaScript JavaScript简称JS是用于制 ...
- 15款针对Bootstrap框架的开发工具
转自http://www.csdn.net/article/2014-02-18/2818443-15-best-bootstrap-tools-for-designers Bootstrap是由前T ...
- 使用 CodeIgniter 框架快速开发 PHP 应用(五)
原文:使用 CodeIgniter 框架快速开发 PHP 应用(五) 简化 HTML 页面和表格设计 这一章介绍了又一个节约你的时间而且使你的代码更具安全性和逻辑性的领域. 第一,我们将会介绍创建视图 ...
- 使用 CodeIgniter 框架快速开发 PHP 应用(二)
使用 CodeIgniter 框架快速开发 PHP 应用(二) 原文:使用 CodeIgniter 框架快速开发 PHP 应用(二) 二分钟: 建立一个 CodeIgniter 网站 用CI建一个网站 ...
- 使用 CodeIgniter 框架快速开发 PHP 应用(一)
使用 CodeIgniter 框架快速开发 PHP 应用(一) 原文:使用 CodeIgniter 框架快速开发 PHP 应用(一) 对 CodeIgniter 的介绍 大多数PHPer都想写出运行状 ...
- 使用 CodeIgniter 框架快速开发 PHP 应用(四)
原文:使用 CodeIgniter 框架快速开发 PHP 应用(四) 使用 CI 简化数据库开发 你学习CI 是因为你想要使编程更容易和更有生产力.这一章讲述CI的Active Record类. 如果 ...
- Mendix快速开发网页移动App低代码化平台
Mendix快速开发网页移动App Mendix简介 中州软件开发园 一.什么是Mendix Mendix是一个轻量化开发工具,我们可以写较少的代码来快速构建一个应用(网站/app):其实所谓的构建一 ...
- 【最新最全】Java微服务实战项目【尚医疗】_智慧医疗管理项目_基于若依框架快速开发
尚医疗是专门为各大医院.门诊提供的一款医疗管理平台.系统包含:系统管理.药品进销存管理.看病就诊.收费管理.检查管理.数据统计等核心模块.通过尚医疗系统可以快速.方便的管理病人从挂号到门诊结束所涉及到 ...
- UCML--编译型应用框架快速开发工具体系介绍
UCML--编译型应用框架快速开发工具体系介绍 (2005.05.09) 来自:金富瑞科技 一.前言 互连网的出现改变了人们的某些生活方式,而随着互连网的普及,越来越多的企业准备或已经要把 ...
最新文章
- 面试官吐槽:“Python程序员就是不行!”网友:我能把你面哭!
- 安装完之后设置动态ip地址
- 使用Jsonp实现跨域请求
- 全球及中国停车场建设产业十四五盈利模式与建设现状分析报告2022版
- Neo4j【付诸实践 01】SpringBoot集成报错org.neo4j.driver.exceptions.ClientException:服务器不支持此驱动程序支持的任何协议版本(解决+源代码)
- java swing 怎么_JAVA SWING 怎么用?帮帮忙.
- 点击率预估算法:FM与FFM
- Fiori Elements objectPage component creation ui JSON model creation oModel.getMetaModel().load
- 垃圾收集算法,垃圾收集器_弱,弱,最弱,利用专家参考来管理垃圾收集器
- 修改rpm中的文件重新打包
- [渝粤教育] 中国地质大学 微积分(二) 复习题 (2)
- 基于TCP的网络聊天系统
- 将16进制的字符串转换为对应的字符
- 基于Java EE的网上书店系统
- Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location解决方法
- 如何成为一个精力充沛的程序员——掌控
- Linux 系统编程笔记-(1)基本概念
- 特许市场技术分析师(CMT)推荐材料
- 洪小文清华论道:AI 的前生今世及未来应用图景
- 证券基金行业本地异地容灾备份查询一体化方案
热门文章
- uniAPP小程序webview从H5返回小程序不起作用
- 不越狱iPhone安装破解插件的应用商店
- 如何选购笔记本电脑?
- 至联云讲解《关于IPFS我们应该知道哪些真相?》
- C++ vector详细用法
- 2012意大利之行3:罗马的路和车
- 华中科技大学计算机徐永兵,华中科技大学计算机学院导师及科研方向.doc
- linux系统查看u盘容量,在LINUX系统中编程查询U盘或软盘格式信息:总容量、空余容量、已用容量等。...
- 【网络】PFC背景和原理 (DCB=PFC + ETS)
- 大数据趣味学习探讨(二):我是怎么坚持学习的