编程笔记 html5&css&js 014 网页布局框架

简介: 编程笔记 html5&css&js 014 网页布局框架

网页布局不只用HTML,还要用CSS和JAVASCRIPT等技术完成,这里暂时简单了解一下Bootstrap。

一、Bootstrap简介

这是一个开源的前端框架,由Twitter的前端工程师Mark Otto和Jacob Thornton共同开发。它提供了一套用于快速开发响应式网站和Web应用程序的CSS、JavaScript组件和模板。

Bootstrap的目标是通过标准化代码和布局,减少开发者在设计和开发过程中的工作量。它包含了许多常用的UI组件,如按钮、表单、导航栏、标签页等,以及一些JavaScript插件,如轮播图、模态框、滚动监听等。

Bootstrap的特点是简洁、易用、美观,适用于各种不同的项目和设备。它的响应式设计使得网站在不同的屏幕尺寸下都能有良好的显示效果,从而提升了用户体验。

另外,Bootstrap提供了详细的文档和示例,可以帮助开发者学习和使用框架的各种功能。它还支持自定义主题,开发者可以根据自己的需求定制样式和布局。

总之,Bootstrap是一个强大的前端框架,可以帮助开发者快速构建现代化的网站和Web应用程序。无论是新手还是经验丰富的开发者,都可以从Bootstrap中受益,并提高开发效率。

二、使用Bootstrap布局

需要按照以下步骤操作:

  1. 引入Bootstrap的CSS和JavaScript文件。可以在HTML文件的<head>标签中添加以下代码:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

这些文件可以通过Bootstrap的官方网站下载,也可以通过CDN链接引入。

  1. 使用Bootstrap的网格系统。Bootstrap的网格系统是一种用于创建响应式布局的强大工具。可以使用containerrow类来创建一个容器和一行,然后在行中使用col-*类来创建列。如下所示:
<div class="container">
  <div class="row">
    <div class="col-sm-4">列1</div>
    <div class="col-sm-4">列2</div>
    <div class="col-sm-4">列3</div>
  </div>
</div>

这将在一行中创建三个等宽的列,无论屏幕大小如何,它们都会自动调整大小。

  1. 使用Bootstrap的组件。Bootstrap提供了许多预制组件,如导航栏、卡片、按钮等。可以通过为元素添加相应的类来使用这些组件。例如,要创建一个导航栏,可以使用以下代码:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- 导航栏内容 -->
</nav>

可以根据需要修改类和内容来自定义组件。

这只是Bootstrap布局的基础,Bootstrap提供了许多其他功能和工具,可以通过查阅Bootstrap的文档来学习更多用法。

可参考bootstrap官网。

相关文章
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js的编程训练系统附带文章和源代码设计说明文档ppt
基于springboot+vue.js的编程训练系统附带文章和源代码设计说明文档ppt
18 11
|
2天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
2天前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。
|
8天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
21 1
|
9天前
|
搜索推荐 定位技术 UED
HTML内联框架
HTML内联框架
17 0
|
12天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
13天前
|
JavaScript 前端开发 数据处理
掌握JavaScript中的二进制运算,提升你的编程技能!
掌握JavaScript中的二进制运算,提升你的编程技能!
|
13天前
|
存储 前端开发 JavaScript
深入了解JavaScript:声明式与命令式编程
深入了解JavaScript:声明式与命令式编程
|
13天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
15天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。