前端框架之Bootstrap框架
下载地址：https://v3.bootcss.com/，下载Bootstrap3版本
下载之后把文件中不需要的文件都删掉
需要获取的样式代码，可以直接从这些地方找到，然后复制
一、HTML页面导入文件，因为Bootstrap要依赖于jquery，所以也要把jquery导进来
二、布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器。有两种：
一、 container 左边和右边留有空白的容器布局
二、 container-fluid 类似于100%宽度，占据全部视口的容器
三、栅格系统
系统会自动将一行分为12列
行(row),列(column)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head>
<body> <!--导航条样式-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav> <div class="container">
<div class="row">
<!--左侧框-->
<div class="col-md-3"> <div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div> <!--右侧框-->
<div class="col-md-9">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">图书管理系统
<span class="glyphicon glyphicon-book pull-right"></span>
</h3>
</div> <div class="panel-body">
<!--搜索框-->
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">搜索</button>
</span>
</div><!-- /input-group -->
</div>
<!--按钮-->
<button type="button" class="btn btn-success pull-right">新建</button> <br>
<br>
<br> <!--表格-->
<table class=" table table-bordered table-hover table-striped">
<thead>
<tr>
<th>编号</th>
<th>书名</th>
<th>价格</th>
<th>作者</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>三国演义</td>
<td>199.99</td>
<td>罗贯中</td>
<td class="text-center">
<a href="" class="btn btn-primary btn-sm">编辑</a>
<a href="" class="btn btn-danger btn-sm">删除</a>
</td>
</tr>
<tr>
<td>1</td>
<td>三国演义</td>
<td>199.99</td>
<td>罗贯中</td>
<td class="text-center">
<a href="" class="btn btn-primary btn-sm">编辑</a>
<a href="" class="btn btn-danger btn-sm">删除</a>
</td>
</tr>
</tbody>
</table>
<!--分页-->
<div class="text-center">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div> </div> </div>
</div> </div>
</div>
</body>
</html>
图书馆系统
四、表格
table-bordered为表格和每个单元格增加边框
table-hover 为每一行对鼠标悬停状态做出相应
table-striped 给tbody内的每一行增加斑马条纹样式
前端框架之Bootstrap框架的更多相关文章
- 实战web前端之：Bootstrap框架windows下安装与使用
Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活.它基于HTML.CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应.Boots ...
- 前端基础 之 Bootstrap框架
浏览目录 Bootstrap介绍 为什么要使用Bootstrap? Bootstrap环境搭建 布局容器 栅格系统 Bootstrap全局样式 一.Bootstrap介绍 Bootstrap是Twit ...
- day01 前端bootstrap框架
day01 django框架之bootstrap框架 今日内容概要 前端框架之bootstrap 该框架支持cv编写前端页面 利用socket模块编写一个简易版本的web框架 利用wsgiref模块编 ...
- 响应式布局与bootstrap框架
原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...
- [技术博客]采用Bootstrap框架进行排版布局
[技术博客]采用Bootstrap框架进行排版布局 网页的前端框架有很多很多种,比如Bootstrap.Vue.Angular等等,在最开始其实并没有考虑到框架这回事,开始阅读往届代码时发现其部分采用 ...
- Web前端学习笔记：Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...
- python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示
python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...
- 前端（三大框架、Bootstrap，jQuery，自整理）
前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...
- 前端框架之bootstrap及相关技术网站
1.web框架之bootstrap bootstrap来源Twitter,是一个CSS/HTML框架,它是基于HTML,CSS,JavaScript下的,使用简洁,当中提供了很多HTML和CSS 如用 ...
随机推荐
- luogu_1156: 垃圾陷阱
洛谷1156:垃圾陷阱 题目描述: 一头牛在一个井里,深度为\(D(1\leq D\leq100)\) 每过一段时间会往井里投掷一个物品,牛可以选择将其堆起来或者吃掉,吃掉可以增加生命值(生命值随时间 ...
- React的基本使用
一.初始化和安装依赖 ①建立项目文件夹 mkdir react-democd react-demo ②在项目里执行命令:初始项目 npm init -y ③安装相关依赖 npm install --s ...
- Filters in ASP.NET Core
Filters in ASP.NET Core allow code to be run before or after specific stages in the request processi ...
- [RN] React Native Fetch请求设置超时
一.实现思路 根据Promise.race的特性,我们在Promise.race里面添加两个任务,一个是正常的网络请求任务A,另外一个便是网络延时任务B,网络延时可以利用setTimeout方法实现. ...
- 洛谷 P5269 欧稳欧再次学车 题解
P5269 欧稳欧再次学车 题目背景 请自行脑补一张欧稳欧学车的图 题目描述 欧稳欧学车时经常用一辆橡树车练习.这辆橡树车共有 \(N\) 个挡位,欧稳欧每秒可以把挡位增加或减少 \(1\),初始时( ...
- python requests 保存图片
html = requests.get('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec ...
- 性能测试-cpu负载和cpu利用率
概述 做压力测试的时候,我们经常会关注两个指标,CPU利用率和CPU负载 Linux中,进程分为三种状态: 阻塞的进程blocked process 可运行的进程runnable process 正在 ...
- Mysql中联合索引的最左匹配原则(百度)
创建联合索引时列的选择原则 经常用的列优先(最左匹配原则) 离散度高的列优先(离散度高原则) 宽度小的列优先(最少空间原则) 在Mysql建立多列索引(联合索引)有最左前缀的原则,即最左优先.如果我们 ...
- Google Kick Start 2019 C轮 第一题 Wiggle Walk 题解
Google Kick Start 2019 C轮 第一题 Wiggle Walk 题解 题目地址:https://codingcompetitions.withgoogle.com/kickstar ...
- 响应: 500 OOPS: vsftpd: refusing to run with writable root inside chroot()
原vsftpd服务器的系统从centos6.8升级到centos7.2.vsftpd使用yum方式安装,用户采用系统用户登录.由于系统升级到centos7,yum安装的vsftpd版本改变.因此按ce ...