bootstrap入门
bootstrap其实是一个项目 或者叫做框架
是能制作自适应平台 一个页面可以自动根据显示设备的分辨率 调整显示方式
1.超大分辨率显示器1920
2.普通1024–1920
3.ipad768X1024
4.手机
开发工具:eclipse netbeans vs webstrom
1.将bootstrap下载到本地 解压缩
http://www.bootcss.com
Bootstrap把设备屏幕分辨率分为几种
@media (min-width: 1200px)
@media screen and (max-width: 767px)
@media (min-width: 768px)
@media (max-device-width: 480px) and (orientation: landscape)
bootstrap是将设备进行大小分别之后,对每种设备写好了一些基本样式,我们只需要重构
bootstrap将屏幕分割为12个等宽的列 每一个列是col-md-1 根据内容需要进行列的重新分配
三个两列 一个六列 三个col-md-2 一个col-md-6
只要为列的屏幕选择了适应
col-md-*普通分辨率
col-xs-*
col-lg-*
col-sm-*手机
Bootstrap 将设备进行了大小分别之后,对应每种设备写好了一些基本的样式,我们只需要重构
Bootstrap将屏幕分割为12个等宽的列。
对于普通的PC端,每一个列是一个col-md-1
要为对应的屏幕选择了对应的列的类型,永远不会有横向滚动条
因为bootstrap 会让css样式自动适应屏幕。
要为对应的屏幕选择了对应的列的类型,永远不会有横向滚动条,因为bootstrap 会让css样式自动适应屏幕。
app(andriod ios html 5)
用户数量:产品(快,预付款避免产品未出就死(拨号上网)) 圈钱 改版
ASDL
PHP
bootstrap版本差异
bootstrap文件结构:1:bootstrap.css:没有进行优化的css样式文件 便于我们进行开发
2:bootstrap.maincss:优化过的css样式 用于产品成型之后
3:botstrap.js:JavaScript文件
4:bootstrap.main.js:产品成型后使用的js文件
5: bootstrap如果想使用js特效 必须依赖于jquery并且jquery要在bootstrap.js之前导入
js文件作用:特效
banner播放:鼠标点景文本框,文本框提示消失 点击菜单出现下拉菜单
导入jquery文件 版本要匹配
bootstrap工作原理
1:一个屏幕等分为12列 通过控制12个列进行布局设计
2:已经给出了很多好的效果,只需要调用他的类样式
bootdtrap的类样式:使用container默认居中
bootstrap:form table
banner图片切换 javascript编写 做成了模块 可以直接使用
设置a标签的hover时 不要给其加入行内样式 否则会无显示
table:多用于后台管理
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap第一课</title>
<!-- 导入bootstrap的css文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
<!-- js文件一定要在jquery文件之前导入 且必须在bootstrap.js文件之前,且版本必须匹配 最好放在最下面最后加载-->
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/jquery-3.1.0.min.js"></script>
<style>
/*重构 */
.container{margin:0;}
.row{padding:0;margin:0;}
.col-md-1{border:solid red 1px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
bootstrap第一个模块
</div>
<div class="col-md-4">
bootstrap第二个模块
</div>
<div class="col-md-4">
bootstrap第三个模块
</div>
</div>
</div>
<hr/>
<div class="container">
<div class="row">
<div class="col-md-1">
1
</div>
<div class="col-md-1">
2
</div>
<div class="col-md-1">
3
</div>
<div class="col-md-1">
4
</div>
<div class="col-md-1">
5
</div>
<div class="col-md-1">
6
</div>
<div class="col-md-1">
7
</div>
<div class="col-md-1">
8
</div>
<div class="col-md-1">
9
</div>
<div class="col-md-1">
10
</div>
<div class="col-md-1">
11
</div>
<div class="col-md-1">
12
</div>
</div>
</div>
<hr/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="images/huoying.jpg" class="img-responsive"/>
bootstrap第一个模块
</div>
<div class="col-sm-4">
bootstrap第二个模块
</div>
<div class="col-sm-4">
bootstrap第三个模块
</div>
</div>
</div>
</body>
</html>
导航栏代码
<!--导航栏 -->
<nav class="navbar navbar-default hidden-xs navbar-fixed-top">
<div class="container-fluid">
<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="">微创圈</a>
</div>
<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" role="search">
<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>
</nav>
banner图片切换代码
<!--banner图片(可切换) -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" >
<div class="item active">
<img src="images/huoying.jpg" alt="第一张图片" title="no1" style="width:100%;height:600px;">
<div class="carousel-caption"><!--capation:标题字幕 -->
<p>火影忍者1</p>
</div>
</div>
<div class="item">
<img src="images/huoying.jpg" alt="..." style="width:100%;height:600px;">
<div class="carousel-caption">
<p>火影忍者2</p>
</div>
</div>
<div class="item">
<img src="images/huoying.jpg" alt="..." style="width:100%;height:600px;">
<div class="carousel-caption">
<p>火影忍者3</p>
</div>
</div>
<div class="item">
<img src="images/huoying.jpg" alt="..." style="width:100%;height:600px;">
<div class="carousel-caption">
<p>火影忍者4</p>
</div>
</div>
</div>
</div>
<!-- Controls 控制左右翻滚 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
表格一般后台使用表格 前端尽量不要使用
<!-- 表格 -->
<div class="container">
<div class="row">
<table class="table table-bordered table-hover table-responsive">
<thead>
<tr class="warning">
<th>ID</th>
<th>nanme</th>
<th>sex</th>
<th>address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>nikita</td>
<td>女</td>
<td>襄阳HDAKSJHKLSDHJFLAKSJHDFLAKSDHJLAJ</td>
</tr>
<tr>
<td>2</td>
<td>nikita</td>
<td>女</td>
<td>襄阳</td>
</tr>
<tr>
<td>3</td>
<td>nikita</td>
<td>女</td>
<td>襄阳</td>
</tr>
<tr>
<td>4</td>
<td>nikita</td>
<td>女</td>
<td>襄阳</td>
</tr>
</tbody>
<!--两种方法做分页显示 -->
<tfoot>
<tr class="active">
<td colspan="4" class="text-center" >
<nav>
<ul class="pagination pagination-lg">
<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>
</td>
</tr>
<tr>
<td colspan="4" >
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups" style="margin:0 auto;width:300px;">
<div class="btn-group">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-remove"></span></button>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
form表单
<!-- form表单 -->
<!-- <div class="container"> --> <!-- 不加container的居中-->
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form action="" >
<div class="form-group">
<label for="ExampleInputEmail">用户名</label>
<input type="text" name="username" class="form-control"/>
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" name="stuemail" placeholder="email" class="form-control" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile" >
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label><input type="checkbox"> Check me out</label>
<label><input type="checkbox"> Check me out</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-3">
</div>
</div>
<!-- </div> -->
底部
<!-- 底部 -->
<style>
.list-group-item{border:0;padding:6px 10px;}
</style>
<div class="row" style="border-top: solid #ccc 1px;margin-top:100px;">
<div class="container" >
<div class="col-md-5" >
<h4>老彭的学堂</h4>
<p>哈法拉克的合法开始就打发就开始对符合哈佛卢卡斯的合法开始哈佛路看到和法律考试的机会</p>
</div>
<div class="col-md-7">
<div class="col-md-4">
<ul class="list-group">
<li class="list-group-item"><h4>友情链接</h4></li>
<li class="list-group-item">华中师范大学</li>
<li class="list-group-item">华中科技大学</li>
<li class="list-group-item">武汉科技大学</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-group">
<a href="" class="list-group-item"><h4>友情链接</h4></a>
<a href="" class="list-group-item">华中师范大学</a>
<a href="" class="list-group-item">华中师范大学</a>
<a href="" class="list-group-item">华中师范大学</a>
</ul>
</div>
</div>
</div>
</div>