正文

在html网页中引入bootstrap前端框架

兔小兔  2022-02-12  280

关键词：

Bootstrap百度百科介绍：

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

这是优雅的分割线....................................

要想在HTML网页中试用Bootstrap,至少需要引入三个文件

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
   
   <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
   
   <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

然后将所有使用Bootsrap样式的代码写在如下DIV中，二者选一。

   <div class="container">
   //这里写你bootstrap样式的代码
   </div>

    <div class="container-fluid">
   //这里写你bootstrap样式的代码
   </div>

以下是本人编写的一个例子网页代码

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <title>首页</title>  
    <!-- 设置文档编码 -->  
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
    <!--  -->  
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">  
    <!-- 新 Bootstrap 核心 CSS 文件 -->  
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">  
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->  
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>  
    <!-- CSS样式 -->  
    <style type="text/css">  
        .container div{  
            text-align:center;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <div ><h4>请选择你要进行的操作</h4></div>  
        <br/>  
        <div ><button type="button" class="btn btn-primary btn-lg btn-block active" onclick="location=‘‘" >我要出租汽车</button></div>  
        <br/>  
        <div ><button type="button" class="btn btn-primary btn-lg btn-block" disabled="disabled" onclick="location=‘‘">我要租赁汽车</button></div>  
    </div>  
</body>  
</html>

　　注：

引入文件时，我是在线引入，为了方便不联网的情况，我们可以先将这三个文件下载下来，然后在引入本地路径的CSS文件和JS文件。至于如何获得这三个文件，麻烦点的可以去Bootstrap的官网http://v3.bootcss.com/和JQuery

的官网http://jquery.com/下载相应的文件下来，这样可以加深对Bootsrtap的了解；最简单的就是直接访问这三个网页

http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css  
<span style="font-size:18px;"></span>  

http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js  

http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js

web前端开发框架bootstrap怎么使用

方法/步骤1首先我们当然是需要得到Bootstrap相关文件，因为在网页中应用Bootstrap是需要引入其相关文件的。我们可以到Bootstrap官网下载。2如果你的英文水平不是太好的话，没关系，我们可以到国内做的汉化比较好的Bootstrap网站去... 查看详情

关于bootstrap的入门知识

问：Bootstrap是什么？答：开源的前端框架，就是一些事先写好的css、js等。问：Bootstrap在哪儿下载？答：官方（https://getbootstrap.com/），中文（http://www.bootcss.com/）问：Bootstrap怎么用？答：网页中引入css等，然后为html标签... 查看详情

bootstrap前端框架的模板文件怎么使用？应用到web项目中？

bootstrap前端框架的模板文件怎么使用？应用到Web项目中？我下载了一个cameo的模板文件里面是一些js、css和html文件。怎么用啊求大神！参考技术A引入css和js，然后就是使用它的class名称查看详情

前端静态页面框架-bootstrap的引入方式(代码片段)

Bootstrap官网通过CDN引入方式：<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"integrity&# 查看详情

前端学习--html&css--框架集

框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个，在h5标准中，推荐使用框架集，而不使用内联框架。使用frameset来创建一个框架集，注意fr... 查看详情

轮播图

...练地使用前端框架来实现需求而原生是基础，亦需要重视bootstrap轮播图-Carousel.js使用bootstrap的轮播图需要引入其css和js，bootstrap所有js插件都依赖jquerey，所以jquery需要在bootstrap·.js前引入bootstrap插件可单独引入也可用bootstrap.min.js... 查看详情

基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构引入bootstrap前端框架

产品经理技术脑：bootstrap

参考技术A什么是Bootstrap？Bootstrap是Web应用程序的前端框架。基于HTML、CSS、JAVASCRIPT。Bootstrap由美国Twitter公司的设计师MarkOtto和JacobThornton合作开发的，基于HTML、CSS、JavaScript的简洁、直观、强悍的前端开发框架，使得Web开发更加快... 查看详情

前端h5框架总结

关于单独h5网站项目，目前主要前端框架有：react、vue、bootstrap等，其中react和vue都是用mvvm模式（低耦合、可重用性、独立开发、可测试），数据实时更新，适合app里面嵌入的网页使用，但用在传统web网页上对seo不太好，因为数... 查看详情

bootstrap的字体图标怎么引入？

参考技术Abootstrap引用图标的方法：1、下载包并解压，在‘elegant_font’文件夹中会发现“HTMLCSS”子文件夹，把它复制到你的项目中。2、将连接添加到‘style.css’，html里添加一个图标，内容如下：<spanclass="glyphiconglyphicon-sear... 查看详情

现在主流的前端框架都有哪些？

Bootstrap(经典)2.Vue(灵活高效的JS框架)3.React(组件开发)4.angular(web应用开发框架)5.typescript(功能强大，语法简洁,JS的扩展)6.Element(快速搭建一个优雅的网站)7.webpack&parcel(应用打包工具)8.webassembly(模块编程，四大浏览器联袂支持)9.Layu... 查看详情

day14-前端之bootstrap框架

Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局，并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap？在Bootstrap出现之前... 查看详情

前端内容介绍

...改变网页内容的样式的。用来做外观的　　CSS框架我们学bootstrap（3）JavaScript　　网页上点击后查看详情

bootstrap用来干啥

跟jquerymobile框架类似。是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。通过使用它，我们将可以轻松地创建Web项目。分为Bootstrap基本结构、BootstrapCSS、Bootstrap布局组件和Bootstr... 查看详情

html5前端

....Ajax(异步数据交互在页面不刷新的情况下进行数据交互)6.BootStrap(前段UI框架快速搭建静态页面并支持不同设备)HTML概述一、什么是HTMLHTML是用来描述网页的查看详情

如何将css3动画添加到bootstrap中

...轻量级的轮播，不需要很多的功能。同时你的项目是采用Bootstrap，（一个最流行的开源前端框架）的话。你可以参考一下bootstrap官方组件。介绍Animate.css为了让我自己写的动画效果值得称赞，我用一个非常有名的开源的CSS3动画库... 查看详情

前端期末考试试题及参考答案(08)

...弟作者博客地址：http://blog.csdn.net/lfdfhl一、填空题在BootStrap中，表单、分页等都属于Bootstrap的______。Bootstrap是由______公司的设计师开发的一个前端开源框架。在页面引入html5shiv.min.js，用于让低版本的浏览器支持______... 查看详情

50个极好的bootstrap后台框架主题下载

参考技术Ahttp://sudasuta.com/bootstrap-admin-templates.html越来越多的设计师和前端工程师开始用bootstrap来作为网页项目的框架，在这一次的免费设计资源中，我们收集了一些bootstrap的主题希望大家会喜欢！Bootstrap是Twitter推出的一个用于... 查看详情

正文