前端框架之Bootstrap

框架概述：

bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

框架包含内容：

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本

支持组件：

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：

下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

支持插件：

Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：

模式对话框、标签页、滚动条、弹出框等。

部分代码：

!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"><!--引入插件库 --><link rel="stylesheet" href="./css/index.css"><!--引入插件库 --><script src="./jquery-3.2.1/jquery.js"></script><script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><script src="./js/Chart.js"></script><script src="./js/script.js"></script>

<div class="navbar-collapse collapse"><ul class=" nav navbar-nav"><li class="active"><a href="index.html"> <span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页</a></li><li><a href="user_list.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li><li><a href="content.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;内容管理</a></li><li><a href="tag.html"><span class="glyphicon glyphicon-tag"></span>&nbsp;&nbsp;标签管理</a></li></ul><ul class=" nav navbar-nav navbar-right"><li class="dropdown"><a id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">admin<span class="caret"></span></a><ul class="dropdown-menu" ><li><a href=""> <span class="glyphicon glyphicon-screenshot"></span>&nbsp;&nbsp;前台首页</a></li><li><a href=""> <span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;个人主页</a></li><li><a href=""> <span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li><li><a href=""> <span class="glyphicon glyphicon-credit-card"></span>&nbsp;&nbsp;账户中心</a></li><li><a href=""> <span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;我的收藏</a></li></ul></li><li><a href="#bbs"> <span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li></ul></div>

前端框架之Bootstrap相关推荐

Web前端框架学习—Bootstrap
零. 写在前面 Bootstrap是一个非常好的前端框架,在前端时间的小项目中需要使用Bootstrap做前端,于是就学习了一下,觉得非常好用,推荐给新手. 一. 什么是Bootstrap? Boot ...
前端框架之bootstrap框架基本介绍及常用UI框架
前端框架之:bootstrap框架基本使用下载地址:https://v3.bootcss.com/getting-started/ Bootstrap框架版本: 2.x 3.x 4.x // 推荐使 ...
Python 前端框架【Bootstrap】
Bootstrap Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框 ...
【JavaWeb】前端框架之Bootstrap
文章目录 1 概念 2 快速入门 3 响应式布局 4 CSS样式和JS插件 1 概念 BootStrap是前端开发框架,基于HTML.CSS.JavaScript. 优点: 定义了很多CSS样式和JS ...
前端框架之bootstrap学习(一)
Bootstrap介绍 2011年8月,Twitter的设计师Mark Otto和Jacob Thornton发布了一个前端开发工具:Bootstrap.2012年2月,Bootstrap 2.0发布 ...
【Bootstrap】＜前端框架＞Bootstrap布局容器栅格网格系统
目录一.Bootstrap概述: 二.Bootstrap HTML模板: 三.布局容器和栅格网格系统: 1.布局容器: 2.栅格网格系统: 2.1 媒体查询: 2.2 栅格参数: 2.3 列组合: ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：让按钮看起来像个链接 (仍然保留按钮行为)...
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...