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

哈喽,欢迎观看我的第一篇文档

  • 个人简介
  • 今天我们学习Bootstrap(界面工具集)
  • 下载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 ,敲回车即可
    Bootstrap,界面工具集,引入,下载_第1张图片

  2. cmd(运行) 里面输入 npm install bootstrap@3 回车,就显示已经下载
    Bootstrap,界面工具集,引入,下载_第2张图片

  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>Documenttitle>
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>
		    
        <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="#">iOSa>li>
                            <li><a href="#">SVNa>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="#">jmetera>li>
                                    <li><a href="#">EJBa>li>
                                    <li><a href="#">Jasper Reporta>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>

效果

在浏览器中打开的效果图,点击后弹一个下拉菜单
Bootstrap,界面工具集,引入,下载_第3张图片

模板

在菜鸟教程里复制该区域

  1. 放到编辑器保存
  2. 浏览器打开即可。
    Bootstrap,界面工具集,引入,下载_第4张图片

结束

祝大家学习愉快,下期见

你可能感兴趣的:(bootstrap,前端,javascript,html,jquery)