Bootstrap3(以下我就简称BT)环境搭建
从http://getbootstrap.com/getting-started/获取BT里面包含css fonts js 三个文件夹 在HTML文件头里引入这些就OK了.如果不想下载也可以用官方给出的CDN
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
BT网格系统
网格的意思就是把页面分割成格子按照每行分成12列(如果希望修改成24列等等可以LESS重编译自己定制). 网格系统可以根据设备的视口响应当小于767px的时候列就会垂直排列,当然列加起来等于12.下面看例子
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>Browser Show</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="shortcut icon" href="images/jigsaw.png"> <!-- Bootstrap --> <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style type="text/css"> [class *= col-] { background: #e8e8e8; border: 2px solid #000; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> </div> </body> </html>
这里的container 是让内容在页面的中间是一个容器
排版
排版我介绍一些常用到的.BT的默认字体是Helvetica 如果没有最后还有sans-serif. font-size 14px line-height 20px 段落的margin-bottom 10px
设置段落颜色代表不同语义
<p class="text-warning">warning</p> <p class="text-info">info</p> <p class="text-success">success</p>
表格
BT3中有4种表格的样式分别是table-striped 条纹背景
table-bordered 带边框的
table-hover 鼠标放上带高亮的
table-condensed 紧凑型表格
下面是代码演示
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>Browser Show</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="shortcut icon" href="images/jigsaw.png"> <!-- Bootstrap --> <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <table class="table table-striped"> <thead> <tr> <th>name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> </tbody> </table> <table class="table table-bordered"> <thead> <tr> <th>name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> </tbody> </table> <table class="table table-hover"> <thead> <tr> <th>name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> </tbody> </table> <table class="table table-condensed"> <thead> <tr> <th>name</th> <th>ID</th> </tr> </thead> <tbody> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> <tr> <td>mike</td> <td>123</td> </tr> </tbody> </table> </div> </body> </html>
也可以给每一行添加颜色 有3中样式 success warning info 这个上面已经介绍过了 和段落的一样
表单
BT3提供的表单可以让输入框圆角, 选中的时候会有蓝色光晕等
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>Browser Show</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="shortcut icon" href="images/jigsaw.png"> <!-- Bootstrap --> <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </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> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </body> </html>
这里注意的是.最好将输入框放到form-group中 为了增强搜索引擎的阅读必须有label标签 但是如何不让其显示可以添加.sr-only
水平排列的表单可以给form 添加form-horizontal类
可以通过input-lg input-sm控制输入框的高度 宽度是利用网格系统col-md-xx 来控制的
<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Enter email"> </div> </form>
可以再输入框的前面添加一些提示标记
<div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div>
按钮
BT3提供了.7中按钮的样式 不同颜色 也提供4种按钮的大小 其中一种是btn-block 这个意思就是 让按钮充满整个行
请看代码
[html] view plaincopy
<button type="button" class="btn">button</button> <button type="button" class="btn btn-primary btn-lg">button</button> <button type="button" class="btn btn-info btn-sm">button</button> <button type="button" class="btn btn-success btn-xs">button</button> <button type="button" class="btn btn-warning btn-block">button</button> <button type="button" class="btn btn-danger">button</button> <button type="button" class="btn btn-link">button</button>
感谢Glyphicons的工作人员的慷慨, 允许BT的使用者免费使用添加一个有情连接http://glyphicons.com/
在需要用到字体图标的地方添加以下代码
<span class="glyphicon glyphicon-search"></span>下拉菜单
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" id='drop1' data-toggle="dropdown">drop <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a href="">asda</a></li>
<li><a href="">aaaa</a></li>
<li><a href="">wwww</a></li>
</ul>
</div>给button 添加dropdown-toggle类 还要添加data-toggle属性为dropdown
按钮组
实现2边都是圆角然后中间按钮和2边的都是紧挨的
<div class="btn-group">
<button type="button" class="btn">11</button>
<button type="button" class="btn">22</button>
<button type="button" class="btn">33</button>
</div>可以添加btn-group-lg 省去了给每一个按钮添加lg 这样整个按钮组都变大了
如果想让按钮不是水平排列而是垂直只要添加btn-group-vertical就OK了
导航
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>更换成nav-pills 并添加nav-stacked 可以让导航变成垂直的 胶囊样式
导航条
navbar-fixed-top导航条固定在顶部
navbar-fixed-bottom固定在底部
这2个都需要你给body 添加margin 来覆盖掉默认的不然导航条会 遮盖主体内容
body { padding-top: 70px; }下面引用BT官方文档里的一段代码来演示BT的导航条是可以响应式的导航条.当你在手机上浏览的时候导航条会被折叠 条目会在右侧的一个小图标中, 你点击图标会出来
静止在顶部navbar-static-top
反色navbar-inverse
当你屏幕宽度变小时候会发生这个情况
右侧的3横条 所有导航里的条目就隐藏在这里
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<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">
<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</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li 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">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>分页
<ul class="pagination">
<li><a href="">«</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">»</a></li>
</ul>可以用pagination-lg pagination-sm来控制大小
巨幕
<div class="container">
<div class="jumbotron">
<h1>Hello CSDN</h1>
<p>This is a page for BT</p>
</div>
</div>
警告框
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<strong>Warning!</strong> You finished the mission</div>
alert-dismissible 的意思是带有关闭按钮的警告框
扫一扫
2709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
