BootStrap前端框架使用方法详解

1.概念:

Bootstrap,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。

好处:

  • 1.定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
  • 2.响应式布局。

同一套页面可以兼容不同分辨率的设备。

2.使用步骤:

1.下载Bootstrap,官网地址:https://v3.bootcss.com

2.在项目中将这三个文件夹复制

3.创建html页面,引入必要的资源文件

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
      <title>Bootstrap HelloWorld</title>

      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

      <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
      <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
    <h1>你好,世界!</h1>

    </body>
    </html>

4.然后就可以去官网上copy你想要的组件啦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例

    本文实例讲述了TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法.分享给大家供大家参考,具体如下: 1-引入js文件和css文件 <!--图片上传--> <link href="/public/static/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <link href="/public/sta

  • Bootstrap框架建立树形菜单(Tree)的实例代码

    这里的Tree指的是树形菜单,这篇文章通过一个实例来讲解一下,在Bootstrap框架下怎么去建立一个树形菜单. 前提:先添加Bootstrap和JQ的引用 <link rel="stylesheet" type="text/css" href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="external nofollow" > <script

  • 基于Bootstrap框架菜鸟入门教程(推荐)

    Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 一.栅格系统 栅格系统的工作原理: "行(row)"必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding). 通过"行(ro

  • springboot整合jquery和bootstrap框架过程图解

    这篇文章主要介绍了springboot整合jquery和bootstrap框架过程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.4.1</version> </dependency>

  • 在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法

    在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单业务的明细数据的时候,看起来会比弹出窗口录入方便一些,也高大上一点.本篇主要介绍在Bootstrap开发框架中使用dataTable直接录入表格行数据. 1.基于表格直接录入数据和Winform的界面回顾 在开始Web界面直接录入表格行数据前,我们先来看看Winform界面的处理情况,如我在流程管理

  • python设计微型小说网站(基于Django+Bootstrap框架)

    一.项目背景: 为了回顾关于django的文件上传和分页功能,打算写一个微型的小说网站练练手.花了一个下午的时间,写了个小项目,发现其中其实遇到了许多问题,不过大部分通过debug之后就解决了,其他部分通过阅读了Pagination插件以及Bootstrap-FileInput插件的官方文档. 二.详细设计: 省去小说网站的用户模块的功能,小说网站主要的功能就是上传文件,在线阅读小说.针对这两个功能, 主要用到dajngo内置的Pagination模块,以及选择一个上传文件插件即可.因为用的是B

  • React BootStrap用户体验框架快速上手

    官方文档http://react-bootstrap.github.io/getting-started.html 安装 在终端cd到你的项目目录下执行:$ npm install react-bootstrap 然后需要我们手动引用css <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr

  • 使用vue框架 Ajax获取数据列表并用BootStrap显示出来

    最近在搞毕业设计想趁机学学前端知识,于是就应用了目前比较流行的vue框架来进行数据显示,使用BootStrap进行简单的样式编写 1.第一步肯定是包的导入了 目前对node.js还不是很了解,所以包都是手动下载导入的,没有用到那个nmp vue.min.js是vue的主包,vue-resource.js是开源的vue Ajax包,对ajax进行了封装 bootstrap既就是样式的相关css和js了 <script type="text/javascript" src="

  • BootStrap前端框架使用方法详解

    1.概念: Bootstrap,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的,它简洁灵活,使得 Web 开发更加快捷. 好处: 1.定义了很多的css样式和js插件.我们开发人员直接可以使用这些样式和插件得到丰富的页面效果. 2.响应式布局. 同一套页面可以兼容不同分辨率的设备. 2.使用步骤: 1.下载Bootstrap,官网地址:https://v3.bootcss.com 2.在项目中将这三个文件夹复制 3.创建html页面,引入必要的资

  • BootStrop前端框架入门教程详解

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. bootstrap 的学习非常简单,并且它所提供的样式又非常精美.只要稍微简单的学习就可以制作出漂亮的页面. bootstrap中文网:http://v3.bootcss.com/ bootstrap提供了三种类型的下载: -----------------------------------------------

  • Android中XUtils3框架使用方法详解(一)

    xUtils简介 xUtils 包含了很多实用的android工具. xUtils 支持大文件上传,更全面的http请求协议支持(10种谓词),拥有更加灵活的ORM,更多的事件注解支持且不受混淆影响... xUitls 最低兼容android 2.2 (api level 8) 今天给大家带来XUtils3的基本介绍,本文章的案例都是基于XUtils3的API语法进行的演示.相信大家对这个框架也都了解过, 下面简单介绍下XUtils3的一些基本知识. XUtils3一共有4大功能:注解模块,网络

  • Spring MVC框架配置方法详解

    本文实例为大家分享了Spring MVC框架配置方法,供大家参考,具体内容如下 1.概述 Spring MVC 作用:用来实现前端浏览器与后面程序的交互 Spring MVC 是基于Spring 的MVC框架,所谓MVC(model,controller,view) ,整个Spring MVC 作用就是,基于Spring 将model(数据)在controller(后台程序) ,view(前端浏览器)之间交互 至于Spring MVC优点缺点,了解不深 不作评价, 2.引用的jar包 既然是基于

  • vue前端框架—Mint UI详解(更适用于移动端)

    一.mintUI简介 mint是一个基于vue的前端UI框架,而它的样式比较类似于手机的样式,可以说是一个基于vue打包app的UI框架,使用mint框架可以给使用vue打包的app的用户更好的交互体验.mint已支持vue2.0. 二.安装和引入mintUI     在安装之前首先要对vue.js有所了解,有一个建立好的vue的项目以及安装好的node.js. 执行命令npm i mint-ui -S,出现以下界面代表安装成功. 引入muitUI: 在main.js中加入 import Min

  • JS组件Bootstrap导航条使用方法详解

    导航条是在您的应用或网站中作为导航标头的响应式元组件. 1.默认的导航条 导航条在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式 定制折叠模式与水平模式的阈值 根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值.通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求. 第一步: 最外面的容器nav标签,并添加nav-bar样式类,表示这里面属于导航条 <nav class="

  • bootstrap输入框组件使用方法详解

    本文实例为大家分享了bootstrap输入框组的具体使用方法,供大家参考,具体内容如下 1.基本用法 我们有时需要在输入框一侧或两侧添加额外的元素 这个时候只需要把所有元素都包裹在一个.input-group的div里面就可以 但是每个输入框组只能有一个input <div class="input-group"> <span class="input-group-addon">@</span> <input type=&q

  • bootstrap table表格使用方法详解

    本文实例为大家分享了bootstrap table表格的使用方法,供大家参考,具体内容如下 1.进入页面,根据指定的URL加载数据(json格式) 2.加载成功,根据$table.bootstrapTable({options})显示表格样式. 感觉还是挺漂亮的哈,OK,下面贴代码解释功能. 开始之前,当然要引用js啦 <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <lin

  • Android Volley框架使用方法详解

    本文主要从两个方面对Android Volley框架的使用方法进行讲解,具体内容如下 一.网络请求 1.get方式请求数据 // 1 创建一个请求队列 RequestQueue requestQueue = Volley.newRequestQueue(VolleyActivity.this); // 2 创建一个请求 String url = "http://api.m.mtime.cn/PageSubArea/TrailerList.api"; StringRequest stri

  • RollViewPager图片轮播效果开源框架使用方法详解

    RollViewPager是一个自动轮播的Viewpager,支持无限循环. 触摸时会暂停播放,直到结束触摸一个延迟周期以后继续播放. 看起来就像这样.指示器可以为点可以为数字还可以自定义,位置也可以变. 附上RollViewPager Github地址:https://github.com/Jude95/RollViewPager 使用Android Studio开发在gradle添加依赖: compile 'com.jude:rollviewpager:1.4.5' 在布局文件当中使用: <

随机推荐