bootstrap入门步骤

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="data: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="data: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="data:images/huoying.jpg" alt="..." style="width:100%;height:600px;"><div class="carousel-caption"><p>火影忍者2</p></div></div><div class="item"><img src="data:images/huoying.jpg" alt="..." style="width:100%;height:600px;"><div class="carousel-caption"><p>火影忍者3</p></div></div><div class="item"><img src="data: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">&laquo;</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">&raquo;</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>

bootstrap入门步骤相关推荐

Bootstrap入门（十三）组件7：导航条
Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航首先先 ...
python网络爬虫的基本步骤-黑客基础编写Python爬虫入门步骤
原标题:黑客基础编写Python爬虫入门步骤信息时代,数据就是宝藏.数据的背后隐含着无穷的宝藏,这些宝藏也许就是信息量所带来的商业价值,而大数据本身也将成为桌面上的筹码. 黑客花无涯带你走进黑客 ...
Bootstrap入门（三十）JS插件7：警告框
Bootstrap入门(三十)JS插件7:警告框通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...
Bootstrap入门（二十一）组件15：警告框
Bootstrap入门(二十一)组件15:警告框通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...
Bootstrap入门（二十九）JS插件6：弹出框
Bootstrap入门(二十九)JS插件6:弹出框加入小覆盖的内容,像在iPad上,用于存放非主要信息弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的首先我们引入 ...
Bootstrap入门（八）组件2：下拉菜单
Bootstrap入门(八)组件2:下拉菜单先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link hr ...
Mybatis理解与入门步骤
一.Mybatis的层次结构位置二.Mybatis,实体类,接口,映射文件的关系三.开发入门步骤准备数据库,创建表结构,添加一些数据创建工程,引入相关依赖编写实体类,和表结构对应,用于数据封 ...
python爬虫步骤-黑客基础编写Python爬虫入门步骤
原标题:黑客基础编写Python爬虫入门步骤信息时代,数据就是宝藏.数据的背后隐含着无穷的宝藏,这些宝藏也许就是信息量所带来的商业价值,而大数据本身也将成为桌面上的筹码. 黑客花无涯带你走进黑客 ...
学习平面设计的三个入门步骤
学习平面设计的三个入门步骤设计的学习可能有很多不同的路,由于这是有设计的多元化学问构造决议的,不论你以前是做什么的`,不论你曾经如何如何,在进入设计范畴之后,你以前的阅历都将影响你,你都将面临应战与 ...

bootstrap入门步骤

bootstrap入门步骤相关推荐

最新文章

热门文章