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：多用于后台管理
代码
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap第一课title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
<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 navigationspan>
<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="#">Linka>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="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
<li role="separator" class="divider">li>
<li><a href="#">One more separated linka>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">Submitbutton>
form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Linka>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="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
ul>
li>
ul>
div>
div>
nav>
banner图片切换代码
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >
<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>
<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">
<p>火影忍者1p>
div>
div>
<div class="item">
<img src="images/huoying.jpg" alt="..." style="width:100%;height:600px;">
<div class="carousel-caption">
<p>火影忍者2p>
div>
div>
<div class="item">
<img src="images/huoying.jpg" alt="..." style="width:100%;height:600px;">
<div class="carousel-caption">
<p>火影忍者3p>
div>
div>
<div class="item">
<img src="images/huoying.jpg" alt="..." style="width:100%;height:600px;">
<div class="carousel-caption">
<p>火影忍者4p>
div>
div>
div>
div>
<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">Previousspan>
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">Nextspan>
a>表格一般后台使用表格 前端尽量不要使用
<div class="container">
<div class="row">
<table class="table table-bordered table-hover table-responsive">
<thead>
<tr class="warning">
<th>IDth>
<th>nanmeth>
<th>sexth>
<th>addressth>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>nikitatd>
<td>女td>
<td>襄阳HDAKSJHKLSDHJFLAKSJHDFLAKSDHJLAJtd>
tr>
<tr>
<td>2td>
<td>nikitatd>
<td>女td>
<td>襄阳td>
tr>
<tr>
<td>3td>
<td>nikitatd>
<td>女td>
<td>襄阳td>
tr>
<tr>
<td>4td>
<td>nikitatd>
<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="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>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">1button>
<button type="button" class="btn btn-default">2button>
<button type="button" class="btn btn-default">3button>
<button type="button" class="btn btn-default">4button>
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表单
<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 inputlabel>
<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 outlabel>
<label><input type="checkbox"> Check me outlabel>
div>
<button type="submit" class="btn btn-default">Submitbutton>
form>
div>
<div class="col-md-3">
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>