玩转bootstrap

最新推荐文章于 2023-03-31 11:15:02 发布
最新推荐文章于 2023-03-31 11:15:02 发布
阅读量446 收藏
点赞数
分类专栏： JavaScript ━═━═━◥ 前端 ◤━═━═━ Bootstrap3 主流前端框架实战 文章标签： Bootstrap3 JavaScript jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Prototype___/article/details/82414070
版权

　　原先在挑战杯曾经接触过bootstrap前端框架，给我的感觉是即拿即用。Bootstrap 可视化布局系统快速建站非常方便，令我耳目一新。了解一个前端框架如果从底层实现原理理解，那就会让你深入的了解它的功能，所以要做从原理到实战，玩转bootstrap。

一、Bootstrap简介

优雅、灵活、可扩展的前端工具集——Bootstrap
简单、灵活的用于搭建WEB页面的HTML，CSS，JavaScript的工具集
基于HTML5和CSS3，漂亮的设计、友好的学习曲线、卓越的兼容性、12列格网、丰富的组件
简言之，Bootstrap=简介强大的前端开发框架，让We开发更迅速，更简单

二、使用Bootstrap

Bootstrap3官方网站

Bootstrap中的JS插件依赖于JQuery，因此JQuery要在Bootstrap之前引用

移动浏览器放在虚拟的Viewport（视口）中，通常虚拟视口比屏幕宽，破坏没有针对没有对浏览器优化的网页布局。用户可以通过平移和缩放来看网页不同的部分，Viewport可以让网页开发者来控制大小和缩放

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 在IE运行最新的渲染模式 -->
        <meta name="viewport" content="width=device-width, initial-scale=1"><!-- 初始化移动浏览显示 -->
        <title>Bootstrap的HTML标准模板</title>   
        <!-- Bootstrap --><!-- 载入Bootstrap的CSS样式 -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--你自己的样式文件 -->
        <link href="css/your-style.css" rel="stylesheet">        
        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
        <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

Bootstrap中让非标题元素和标题使用相同的样式

极客范儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
轻松玩转BootstrapTable（后端使用SpringMVC+Hibernate）
08-29
BootstrapTable 是一个基于 Bootstrap 框架的前端组件，用于创建功能丰富的表格。它提供了诸如分页、排序、过滤和自定义操作等特性，极大地提高了网页数据展示的用户体验。在这个教程中，我们将学习如何结合后端的 ...
2018千锋HTML5视频教程全集学习知识点精选：Bootstrap框架技术
码农王也的博客
12-15 1788
2018千锋HTML5视频教程全集学习知识点精选：Bootstrap框架技术。Bootstrap 是基于 Less 打造的，并且也有 Sass版本。Less/Sass是CSS的预处理技术，正因如此，它一经推出就包含了一个非常实用的 Mixin 库供我们调用，使得我们在开发过程中对CSS的处理更加简单。
玩转bootstrap学习笔记
我只会html
01-13 268
开始时间：2020/1/13 结束时间：2020/1/14 一、日常前戏 1、bootstrap官网：getbootstrap.com 官网给bootstrap的定义是：the world’s most popular front-end component library. 2、bootstrap中文网：bootcss.com，本课程只介绍bootstrap常用的那部分，剩余的部分相关文档可...
玩转Bootstrap（基础） （2.表单操作）
Rodgexue的专栏
08-20 4891
0)一个最基本的调用bootstrap的头部的写法<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件状态——焦点状态</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/cs
玩转Bootstrap（JS插件篇）
lixiaohong2012的博客
07-11 1万+
模态弹出框 一次性导入：Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。具体使用如下（或见右侧代码编辑器28-29行）：<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery --> <script src="http://li
玩转Bootstrap（基础） （1.基础知识）
Rodgexue的专栏
08-20 4335
1.bootstrap的插件都依赖于jquery，所有jquery要在bootstrap前加载。<!DOCTYPE html> //html 5 <html lang="en"> <head> <meta charset="utf-8"> //bootstrap不支持ie的兼容模式，所以这行代码是让ie运行最新的渲染模式 <meta http-equiv="X-UA-Co
《轻松玩转jquery》源代码
05-03
《轻松玩转jQuery》这本书是面向初学者和中级开发者的一本实用指南，旨在帮助读者深入理解和熟练运用jQuery库。jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。源...
玩转颜色(PlayColor)
10-01
"玩转颜色(PlayColor)"这个资源很显然是为了帮助开发者和设计师更好地理解和使用颜色。下面将详细介绍与标题和描述相关的一些核心知识点，并提供一些在编程和网页设计中与颜色相关的实践技巧。 1. **颜色模式**：...
江哥带你玩转JQuery代码资料.zip
06-01
《江哥带你玩转JQuery代码资料》是一个专注于讲解JQuery编程技巧和实践的资源集合，由知名前端开发者李南江（江哥）提供。这个压缩包包含了丰富的JQuery学习材料，旨在帮助初学者和进阶者提升在前端开发中的JQuery...
玩转Bootstrap
a631278993的博客
07-05 89
一：bootstrap基本模版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
bootstrap极客学院中
07-27
bootstrap极客学院中
慕课网玩转Bootstrap（基础）笔记-01
weixin_43498884的博客
09-17 132
慕课网玩转Bootstrap（基础）笔记1、Bootstrap简介1.1 Bootstrap简介1.2 如何开始使用Bootstrap 本文主要是针对慕课网的玩转Bootstrap（基础）这门课程内容做一些整理。 1、Bootstrap简介 1.1 Bootstrap简介 简单来讲，Bootstrap是简单、灵活的用于搭建WEB页面的HTML,CSS,JavaScript的工具集。 Bootst...
bootstrap入门教程
专治八阿哥的孟老师
03-31 6416
bootstrap简介：​ bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。​ bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。boostrap特点​ 1 ) 移动设备优先：自 bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：​​ 2 ) 所有的主流浏览器都支持 bootstrap。​​ 3 ) 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 bootstrap。
Bootstrap的基本使用方法，5分钟帮你搞懂怎么用
当代码遇上音乐
03-28 5万+
作为Web开发的Coder，是不是很对浏览器兼容性，各种移动设备适配都很头大，所以我们有必要学习一下当下主流的一个Html5框架，即Bootstrap！
零基础小白如何快速入门 Bootstrap
GitChat
07-03 6236
Bootstrap 是目前很火的一款 UI 框架，是基于 HTML、CSS、JavaScript 的，代码简洁灵活，能够使 Web 开发更加的快捷。但若没有找到门道，是很难快速的应用于项目开发中的。参与本话题，你将用最短的时间理解和掌握其中的精髓。 在这场 Chat 中，我将分享： Bootstrap 如何用？ Bootstrap 栅格化（兼容各个浏览器）； Bootstrap 各个组件的介绍与...
bootstrap是个好玩意
a6115813的博客
12-06 149
需要多看 多写多练才能行
BootStrap初学者怎么使用？
热门推荐
信徒博客
11-13 6万+
bootStrap是干嘛的？有什么用处？ 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。 Bootstrap 就是这样一个简洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发者，也能做出很...
玩转Bootstrap（基础） -- （6.导航条基础）
Rodgexue的专栏
08-24 6430
1.导航条例子<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>导航条</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bo
Bootstrap 入门 如何使用
litengbin的博客
01-19 2574
BootStrap 是Twitter的工程师开发的前端框架，可以非常方便的设计出好看的页面效果。  本章演示一些基本元素 使用 Bootstrap和不用的区别 使用Bootstrap和不用的区别 演示按钮 输入框 下拉框等常见的组件，在原生html和Bootstrap的效果比较 同时还演示了几种html中没有的效果 使用Bootstrap 很简单，按照如下步骤进行即可。
html bootstrap 转 nodejs
最新发布
07-09
### 回答1： HTML是一种标记语言，用于创建网页的结构和内容。Bootstrap是一个流行的前端框架，它提供了许多预设的CSS样式和JavaScript插件，可以帮助开发人员快速构建具有响应式设计和现代化外观的网页。 Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，它允许我们在服务器端使用JavaScript编写和运行代码。 那么如何在Node.js中使用HTML和Bootstrap呢？ 首先，我们需要安装Node.js，并创建一个新的Node.js项目。 然后，我们可以使用npm（Node包管理器）安装所需的依赖项，其中包括Express.js框架和Bootstrap的相关包。 接下来，我们可以创建一个名为index.html的HTML文件，并在其中编写我们需要的HTML结构和内容，使用Bootstrap的类和组件来增强样式和功能。 然后，在Node.js中创建一个名为server.js的文件，使用Express.js框架创建一个简单的HTTP服务器，并将index.html作为主页返回给客户端。 在server.js文件中，我们可以使用Express.js的静态文件中间件来提供静态文件，包括HTML、CSS和JavaScript文件。我们可以将Bootstrap的CSS和JavaScript文件放在一个名为public的文件夹中，并在server.js中指定该文件夹为静态文件夹。 最后，我们可以使用Node.js的命令行界面运行server.js文件，启动Node.js服务器。然后，我们可以在浏览器中输入服务器的URL地址，看到使用HTML和Bootstrap创建的网页。 总结起来，将HTML和Bootstrap转移到Node.js中需要安装依赖项、创建HTML文件、创建Node.js服务器文件，并使用Express.js提供静态文件。这样，我们就可以通过Node.js来提供和管理我们的网页。 ### 回答2： HTML Bootstrap 是一种前端开发框架，用于构建具有现代化外观和响应式设计的网页应用程序。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，用于开发服务器端和网络应用。 要将 HTML Bootstrap 转换为 Node.js，我们需要借助一些工具和技术： 1. 构建 Node.js 服务器：通过使用 Express.js 或 Koa.js 这样的 Node.js 框架，我们可以构建服务器端应用程序。这些框架提供了路由、中间件和其他常用功能，使我们能够处理来自客户端的请求，并向其提供 HTML Bootstrap 页面。 2. 客户端与服务器端通信：在服务器端，我们可以使用模板引擎（如 EJS 或 Handlebars）来渲染 HTML Bootstrap 页面并将其发送给客户端。同时，在客户端，我们可以使用 AJAX 或 WebSocket 等技术来与服务器端进行双向通信。 3. 数据库集成：与服务器端应用程序一起使用数据库，可以使我们能够存储和检索数据。在 Node.js 中，我们可以使用诸如 MongoDB 或 MySQL 之类的数据库，并使用适当的驱动程序来连接和操作数据库。 4. 静态文件服务：HTML Bootstrap 使用了很多静态资源（如 CSS、JavaScript 和图像文件），我们需要配置服务器以提供这些文件。通过使用 Express.js 或 Koa.js 等框架提供的静态文件中间件，我们可以将这些文件映射到服务器的特定路由，并使其可供客户端访问。 综上所述，将 HTML Bootstrap 转换为 Node.js 需要在服务器端使用 Node.js 框架来构建应用程序，使用模板引擎渲染页面并发送给客户端，与数据库进行交互并提供静态文件服务。通过这些步骤，我们可以将静态的 HTML Bootstrap 页面转化为一个动态的、具有服务器端逻辑的 Node.js 应用程序。 ### 回答3： 将HTML和Bootstrap转换为Node.js涉及以下步骤： 1. 配置Node.js环境：首先，您需要在计算机上安装Node.js。通过访问Node.js官方网站，下载并安装相应的Node.js版本。 2. 创建Node.js项目：使用Node.js的命令行工具创建一个新的Node.js项目。在命令行中导航到您要创建项目的目录，并运行以下命令来初始化项目：`npm init` 3. 安装相关依赖：您需要从命令行安装一些Node.js模块，以便能够转换HTML和Bootstrap文件。使用以下命令安装所需的模块：`npm install express ejs bootstrap --save` 4. 创建服务器：使用Express模块创建一个Node.js服务器。创建一个index.js文件，并添加以下代码： ```javascript const express = require('express'); const app = express(); app.use(express.static('public')); app.set('view engine', 'ejs'); app.get('/', function(req, res) { res.render('index'); }); app.listen(3000, function() { console.log('Node.js服务器正在运行'); }); ``` 5. 创建视图文件：在项目根目录下创建一个views文件夹，并在其中创建一个名为'index.ejs'的文件。在该文件中添加您的HTML和Bootstrap代码。 6. 运行项目：在命令行中输入以下命令以启动Node.js服务器：`node index.js`。使用浏览器访问'http://localhost:3000'，您应该看到从'index.ejs'中渲染出来的HTML和Bootstrap。 这些步骤将帮助您将HTML和Bootstrap转换为Node.js应用程序。您可以根据需要进行进一步的开发和定制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客范儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值