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你想要的组件啦!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
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' 在布局文件当中使用: <
随机推荐
- 快速搭建React的环境步骤详解
- 远程脚本 概述
- python+pyqt实现12306图片验证效果
- 不错的rss看样要学习了
- 基于Jquery实现仿百度百科右侧导航代码附源码下载
- .htaccess rewrite 规则详细说明
- MyBatis入门之增删改查+数据库字段和实体字段不一致问题处理方法
- 在Oracle中向视图中插入数据的方法
- JS代码防止SQL注入的方法(超简单)
- PHP版微信第三方实现一键登录及获取用户信息的方法
- 在Ubuntu系统下安装使用Python的GUI工具wxPython
- 在asp中通过getrows实现数据库记录分页的一段代码
- c# 获取数据库中所有表名称的方法
- mysql中将null值转换为0的语句
- 深入sql数据连接时的一些问题分析
- python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
- JS中三目运算符和if else的区别分析与示例
- asp中向文本框输出数据原样式的函数
- Java实现获得MySQL数据库中所有表的记录总数可行方法
- vue双向绑定简要分析