Web前端 — Bootstrap(1)

简介:

Bootstrap本次知识点:

1.Bootstrap简介

2.什么是Bootstrap

3.为什么使用Bootstrap

4.Bootstrap的结构

5.BootStrap的基本模板




1.Bootstrap简介

Bootstrap,来自Twitter(全国最大的微博 )的两名技术工程师研发的一个基于HTML、CSS、JavaScript的开源框架,是目前最受欢迎的前端框架。该框架代码简洁、视觉优美,可用于快速、简单地构建于PC及移动端设备的Web页面需求。

Bootstrap下载及演示:

国内文档翻译官网:http://www.bootcss.com/

瓢城Web俱乐部官网:http://www.ycku.com/


2.什么是Bootstrap

Bootstrap是基于HTML、CSS、JAVASCRIPT的开源前端框架,它简洁、直观、强悍、灵活,使得Web开发更加快捷,用于开发响应式布局、移动设备优先的WEB项目。



3.为什么使用Bootstrap

为什么使用Bootstrap?

(1)跨设备:自Bootstrap3起,框架包含了贯穿于整个库的移动设备优先的样式。

(2)跨浏览器:(chrome、IE9以上、Firefox、Safari、Opera……)所有的主浏览器都支持Bootstrap。

(3)响应式布局:Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。

(4)具有实用性强的组件:Bootstrap的[HTML组件]和[JS组件]非常丰富,并且代码简洁,非常易于修改,你完全可以在其基础上修改成自己想要的任何样子。这是工作效率的极大提高。

(5)内置jQuery插件:Bootstrap的插件开发模式和javascript的开发模式很相似,先定义一个类,实现主体功能,然后是个Plugin函数,再把这个函数扩展到JQuery上原型上,最后委托的方式给特定元素绑定事件。

(6)删格系统:可以根据用户屏幕尺寸调整页面,使其在各个尺寸上都表现良好。实现这个功能依赖两个东西,一个是view,另一个是 max-width,min-width。


4.Bootstrap的结构

Bootstrap的结构,主要分为三大核心模块:css(样式) 、js(脚本)、 font(字体)。

css(样式):目录中有四个css后缀的文件,其中包含min字样的,是压缩版本,一般使用这个;不包含的属于没有压缩的,可以学习了解css代码的文件;而map后缀的文件则是css源码映射表,在一些特定的浏览器工具中使用。

js(脚本):目录包含两个文件,是未压缩和压缩的js文件。

font(字体):目录包含了不同后缀的字体文件。


5.Bootstrap的基本模板

Bootstrap的基本模板,如下代码:



  
  
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  8. <title>Bootstrap 101 Template </title>
  9. <!-- 新 Bootstrap 核心 CSS 文件 -->
  10. <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  11. </head>
  12. <body>
  13. <h1>hello </h1>
  14. <!--js文件的位置-->
  15. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  16. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script>
  17. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  18. <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
  19. <!--bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5-->
  20. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script>
  21. <!--使IE6、7、8版本浏览器兼容css3样式-->
  22. <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"> </script>
  23. </body>
  24. </html>

作者:Roger_CoderLife

链接:https://blog.csdn.net/Roger_CoderLife/article/details/80331937

本文为Roger_CoderLife的原创文章,著作权归作者所有,转载请注明原文出处,欢迎转载!

相关文章
|
27天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
44 3
|
12天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
24天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
26天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
30 3
|
28天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
27 3
|
28天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
38 2
|
2月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
2月前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
57 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
29天前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
42 0
|
2月前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
187 0