`

bootstrap-helloworld

 
阅读更多
bootstrap学习教程,搭建helloworld程序。引入css和js文件
   <link href="../css/bootstrap.min.css" rel="stylesheet">
   <script src="../js/1.11.3/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

入门级模板:引入了预编译版的 CSS 和 JavaScript 文件,页面只包含了一个 container 元素。

html代码:
导航条:
<div class="container">
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
页面代码
<div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
css代码:
body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}

分享到:
评论

相关推荐

    bootstrap入门helloworld

    "bootstrap入门helloworld"这个主题旨在帮助初学者快速掌握Bootstrap的基本用法,通过创建一个简单的"Hello, World!"页面来开启Bootstrap的学习之旅。 Bootstrap的核心特点在于其丰富的预设样式、组件和JavaScript...

    前端项目-bootstrap-growl.zip

    例如,他们可能使用`$.growl({ message: "Hello, world!" })`来显示一条简单的消息。通过调整参数,开发者可以定制通知的标题、图标、延迟关闭时间、定位等特性,以满足项目的特定需求。 总的来说,Bootstrap Growl...

    headless-drupal-angular-bootstrap-hello-world:由 Angular JS 和 Bootstrap 提供支持的无头 Drupal 网站的示例 Web 应用程序

    在提供的压缩包文件“headless-drupal-angular-bootstrap-hello-world-7.x-1.x”中,我们可以期待找到以下内容: 1. Drupal模块:可能包含与Angular JS和Bootstrap集成的Drupal模块,这些模块可能用于设置API端点或...

    bootstrap-5-dialog:Bootstrap 5对话框

    title: 'Hello World', message: '这是Bootstrap 5对话框的基本示例!', buttons: [{ label: '关闭', cssClass: 'btn-primary', action: function(dialogRef) { dialogRef.close(); } }] }); dialog.open()...

    angular-bootstrap-hello-world:你好,世界

    这是Angular + Bootstrap应用程序的模板,具有karma + mocha + chai规格测试和webdriverio e2e测试。准备节点 $ cd$ sudo apt-get install build-essential git$ git clone ...

    gatsbyV3-hello-world-starter-bootstrap

    盖茨比(Botstrap)的Hello World... cd my-hello-world-starter/gatsby develop 打开源代码并开始编辑! 您的站点现在在http://localhost:8000 ! 注意:您还将看到第二个链接: http://localhost:8000/___graphql 。

    angular-helloworld

    Angular和TypeScript Hello World项目 Hello World项目是Angular 2+入门项目,具有npm模块,配置,脚本和文件夹以及适当的路由,可以轻松开始Angular项目! 这是项目中的内容: Angular脚本和TypeScript配置已准备...

    bootstrap-show-modal:Bootstrap 4 jQuery插件包装器,用于在JavaScript中动态创建模式

    showModal ( { title : "Hello World!" , body : "A very simple modal dialog without buttons." } ) 警报对话框 $ . showAlert &#40; { title : "Hi" , body : "Please press ok, if you like or dislike cookies...

    自己整理的bootstrap_select

    这个压缩包文件 "自己整理的bootstrap_select" 可能包含了该插件的源代码、示例、CSS 样式表、JavaScript 文件以及可能的文档,帮助开发者理解和使用 Bootstrap Select。 Bootstrap Select 的核心功能和知识点主要...

    react-native-bootstrap-styles:用于React Native的Bootstrap样式库

    基本的“ Hello world”示例: import React , { Component } from ' react ' ; import { View , Text } from ' react-native ' ; import BootstrapStyleSheet from ' react-native-bootstrap-styles ' ; const ...

    FreePBX-HelloWorld

    FreePBX-HelloWorld 这个已经过期了。 在上开发替代版本 新版本适用于 12+,可能会使用一些 13+ 的功能。 新版本采用了新的TWBS(bootstrap)风格,符合​​FreePBX统一性准则。 新版本是用 BMO 编写的 FreePBX ...

    helm-hello-world

    从一个新的minikube实例开始, minikube delete && minikube start助焊剂2安装在MacOS上安装CLI brew install fluxcd/tap/flux 检查集群先决条件flux check --pre 引导程序flux bootstrap github \ --components=...

    jspm-react-es6-hello-world:一个使用jspm,React,Flux,Bootstrap,SASS和ES6的“ Hello World”应用程序

    一个使用jspm,React,Flux,Bootstrap,SASS和ES6的“ Hello World”应用程序。 安装 运行npm install , 运行jspm install , 运行npm run dev-server , 观察您好,世界! 在浏览器上输入文字! 发展 jspm-...

    Angular-Hello-World:使用CodeSandbox创建

    **Angular-Hello-World:使用CodeSandbox创建** Angular是一个由Google维护的开源JavaScript框架,用于构建单页应用程序(SPA)。它提供了丰富的功能,包括组件化、依赖注入、数据绑定和路由,使得开发复杂的Web...

    KibanaPlugin-HelloWorld:Kibana的Hello World插件

    你好,世界一个Kibana插件,旨在练习在Kibana...剧本yarn kbn bootstrap执行此操作以安装node_modules并在插件和Kibana中设置依赖项yarn plugin-helpers build执行此操作以创建可在Kibana中安装的此插件的可分发版本。

    个博客::writing_hand:Herman-HELLO WORLD,HERE IS ME

    【标题】"个博客:Herman-HELLO WORLD,HERE IS ME" 暗示了这是一个个人博客项目,作者以“Herman”为名向世界宣告他的存在。在IT行业中,个人博客通常用于分享技术知识、经验和见解,是开发者展示自我、交流思想的...

    janus-helloworld-plugin:Janus的最简单的插件。 旨在作为插件构建者的指导样本

    Janus“ hello world”插件弄清楚如何在Janus存储库构建脚本之外独立地为构建和,这是一个很大的麻烦,因此这里是使用自动工具构建它们的框架。 plugins /目录包含一个简单的插件,events /目录包含一个简单的事件...

    ReactHelloWorld(antd和react-bootstrap)

    最近的新项目准备使用React,找组件库的时候发现有antd和react-bootstrap等,想找一个antd的helloworld的demo,但偌大的网络硬是没有找到,最好类比react-bootstrap写了一个antd的demo。等分享给大家,不用再费心...

    Node.js-Bootstrap-Starter-Template:Node.js,Express,Pug,Twitter Bootstrap,入门模板

    Node.js引导程序入门模板 一个快速简单的Node.js + + + Twitter 5.0模板项目。 也可用于和 。 用法 克隆存储库。 打开命令提示符,导航到该文件夹​​,然后输入... | Hello world. 作者 科里·贝克尔(Kory Becker)

    前端框架利器——bootstrap

    &lt;h1&gt;Hello, world! &lt;script src="http://code.jquery.com/jquery-latest.js"&gt; &lt;script src="js/bootstrap.min.js"&gt; ``` #### 响应式设计与网格系统 Bootstrap的核心之一是其响应式设计能力。通过媒体查询和...

Global site tag (gtag.js) - Google Analytics