Bootstrap,界面工具集,引入,下载

个人简介

新人一枚,前端工作者,乐于分享,希望能跟大家一起学习一起深造。
有其他分享的内容或不懂得可以私信我。

今天我们学习Bootstrap(界面工具集)

Bootstrap,来自 Twitter (推特),是目前最受欢迎的前端框架(它算半个框架,像Vue、微信小程序等等,这些才是框架。它叫界面工具集)。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

本文章将向您讲解 Bootstrap 框架的基础,通过学习这些内容,您将可以轻松地创建 Web 项目。
你结合本文章和菜鸟教程一起看,只要认真看保准学会。
这是菜鸟教程官网:菜鸟教程官网
Bootstrap有3和4版本,通用没事,看哪个都可,我目前用3版本的。
bootstrap3.0

下载Bootstrap

先下载会下载Bootstrap
Bootstrap官网下载就可,bootstrap下载需求看自己需要结合本文章。
我是用npm方法下载的

  1. 在需要下载的文件夹,点击此处输入cmd ,敲回车即可

    打开运行

  2. cmd(运行) 里面输入 npm install bootstrap@3 回车,就显示已经下载

    输入命令

  3. 报错就是代码输入的不对,空格也要写上去

  4. 下载就算完成了,打开编辑器,引入。

引入

新建一个html文件,在里面输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

在标准的html文章里引入分两种,一种不需要引入jq文件,一种需要引入,需要引入必须先 引入jQuery文件,在引入bootstrap.css。

打开下载好的文件在node_modules文件夹里面找到dist文件夹,这里面才有我们需要的

css文件:bootstrap.css或bootstrap.min.css
js文件:bootstrap.js或bootstrap.min.js
住::(min.css/min.js) 都是简化版:把一些不必要的空格,换行删掉,就是给机器看的文件)
引入哪个都行,在自己

官网下载jQuery
jQ3.6.0版本下载 jquery-3.6.0.js

  1. 在编辑器中引入 ,在 head 标签里面添加
	<head>
		    <!-- jq优先级要高 先引入jq -->
        <script src="../css/bootstrap-3.4.1-dist/js/jquery-3.6.0.js"></script>
		<link rel="stylesheet" href="文件路径/bootstrap.min.css"> 
   		<script src="文件路径/bootstrap.min.js"></script>
    </head>

下面直接撸代码

敲代码

在 body 身体里面写入

默认头部导航栏

 <!-- 头部导航 -->
        <div class="header">
            <nav class="navbar navbar-default" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">菜鸟教程</a>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">iOS</a></li>
                            <li><a href="#">SVN</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    Java <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">jmeter</a></li>
                                    <li><a href="#">EJB</a></li>
                                    <li><a href="#">Jasper Report</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">分离的链接</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">另一个分离的链接</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>

效果

在浏览器中打开的效果图,点击后弹一个下拉菜单

在这里插入图片描述

模板

在菜鸟教程里复制该区域

  1. 放到编辑器保存
  2. 浏览器打开即可。

    模板

结束

祝大家学习愉快,下期见

相关文章

学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习...
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面...
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生...
Can’t connect to local MySQL server through socket \'/v...
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 ...
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服...