在HTML网页中引入Bootstrap前端框架

Bootstrap百度百科介绍:

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

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

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

<!-- 新 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>

然后将所有使用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  

原文地址:https://www.cnblogs.com/kjtt/p/9120881.html

时间: 2024-10-11 05:30:45

在HTML网页中引入Bootstrap前端框架的相关文章

Vue中引入bootstrap导致的CSS问题

最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.vue模块,其中的导航条使用的bootstrap的class和自己的class. <ul class="navbar-nav my-navBar" id="my-navBar"> 3. 在Header.vue中定义了一些ul li 和 a 标签的样式. ul.

如何在jsp中引入bootstrap

如何在jsp中引入bootstrap包: 1.首先在http://getbootstrap.com/上下载Bootstrap的最新版. 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. Download Source:下载源代码.点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript

bootstrap 前端框架学习笔记

1.认识一下 bootstrap 带来的优雅效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &

2017-3-23 网页中的表单 框架 标题栏小图标 描点 插入视频音频 简单的滚动条

(一)表单 1.<form action=""method="get/post"></form> 2.表单12个元素 文本类: <input type="text" value=""> - 文本框 <input type="password" value=""> - 密码框 <textarea></textarea>

在Vue-cli项目中引入Bootstrap

(1)到bootstrap官网下载所需版本的bootstrap.zip文件. (2)将bootstrap.min.css以及bootstrap.min.js解压到assets文件夹,另外还需要将fonts字体文件夹解压到src文件夹下面. (3)在main.js文件中通过 import './assets/bootstrap.min.css' import './assets/bootstrap.min' 引入bootstrap,引入完成之后,就可以在组件中使用bootstrap了. 另外需要注

在Java Web项目中引入Mondrian多维分析框架

一,Mondrian简介 Mondrian是一个开源项目,一个用Java写成的OLAP引擎.它用MDX语言实现查询,从关系数据库(RDBMS)中读取数据.然后经过Java API以多维的方式对结果进行展示. Mondrian的使用方式同JDBC驱动类似.可以非常方便的与现有的Web项目集成. Mondrian OLAP 系统由四个层组成,可分为从最终用户到数据中心, 顺序为: 1表现层(the presentation layer) 2维度层(the dimensional layer) 3集合

Bootstrap前端框架入门

bootstrap下载:http://v3.bootcss.com/getting-started/ bootstrap中文文档:http://www.bootcss.com/ jquery下载:http://jquery.com/download/ 工具:HBuilder 下载地址:http://www.dcloud.io/ 下面是我刚学习的例子,主要是熟悉bootstrap自带的class. login.html内容如下: <!DOCTYPE html> <html> <

bootstrap前端框架使用总结分享

1.bootstrap 排版 全局样式style.css: 1.移除body的margin声明 2.设置body的背景色为白色 3.为排版设置了基本的字体.字号和行高 4.设置全局链接颜色,且当链接处于悬浮":hover"状态时才会显示下划线样式 标题 h1-h6 HTML 中的所有标题标签, 到 均可使用.另外,还提供了 .h1 到 .h6 类选择器,为的是给内联(inline)属性的文本赋予标题的样式. 1.重新设置了margin-top和margin-bottom的值 2.h1~

BootStrap 前端框架介绍

Bootstrap简介 Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包.是一个CSS/HTML/JavaScript框架.Bootstrap 是基于HTML5和CSS3开发的,包含丰富的组件,根据这些组件可以快速的搭建一个漂亮.功能完备的网站.其中包括以下组件:下拉菜单.按钮组.导航.导航条等等.可以说 Bootstrap 是一个简洁简单的前端开发框架,可以让Web开发更迅速更简单. 学习和下载资料主要可以通过官方中文网 www.bootcss.com  . Boo