BootStrap前端框架使用方法详解

2024-10-26 23:48:19

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你想要的组件啦！

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

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
React BootStrap用户体验框架快速上手

官方文档http://react-bootstrap.github.io/getting-started.html 安装在终端cd到你的项目目录下执行:$ npm install react-bootstrap 然后需要我们手动引用css  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr
基于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>
python设计微型小说网站(基于Django+Bootstrap框架)

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

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

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' 在布局文件当中使用: <

BootStrap前端框架使用方法详解

相关推荐

随机推荐