布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
.container :
<div class="container"> // 页面的两边留白 ... </div>
.container-fluid:
<div class="container-fluid"> // 100%宽度 两边不留白 ... </div>
栅格系统
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。
1：行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中。
2：行（row）在水平方向创建一组“列（column）。
3：内容应当放置于列（column）内，并且，只有列（column）”可以作为行（row）”的直接子元素。
4：如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（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 href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .c1 { background-color: red; height: 50px; border: 3px solid black; } /*媒体容器;限制屏幕大小*/ @media screen and (max-width: 600px) { .c1 { background-color: green; height: 50px; border: 3px solid black; } } </style> </head> <body> <!--两边留白的容器--> <div class="container"> <!--定义一行（12列）--> <div class="row"> <!--col-md：适用于中等屏幕（中等大小的电脑屏幕）--> <!--col-xs：适用于超小屏幕（手机屏幕）--> <!--一行的列数固定为12--> <div class="col-md-6 col-xs-6 c1"></div> <div class="col-md-6 col-xs-6 c1"></div> <br> <div class="col-md-3 c1"></div> <div class="col-md-9 c1"></div> <br> <div class="col-md-1 c1"> <div class="row"> <div class="col-md-6 c1"></div> <div class="col-md-6 c1"></div> </div> </div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> <div class="col-md-1 c1"></div> </div> <div class="row"> <div class="col-md-9 c1"></div> </div> </div> </body> </html>
常用标签和类
col-md-6 col-md-offset-3：将col-md-6元素向右偏移3个列的宽度。
<small>文本</small>：使用小号文本。
<abbr title="attribute">attr</abbr>:abbr标签是缩略语，带有title属性：鼠标移至上面有问号指针，鼠标悬停在缩略语上面，可以看到title里面的内容。
ps：可以为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
blockquote标签：内部采用引用样式。
footer标签：定义在blockquote标签内部，表明引用来源。
cite标签：定义在footer标签内部，表名来源的名称。
list-unstyled类：移除了默认的列表样式，（只会针对子元素）
pre标签：正确的显示代码，尖括号要左转义处理 <：< >：>
例子：
<!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 href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .c1 { background-color: red; height: 50px; border: 3px solid black; } </style> </head> <body> <div class="container"> <div class="row"> <!--将col-md-6元素向右偏移3个列的宽度。--> <div class="col-md-6 col-md-offset-3"> <h1>虹桥校区脱产七期最牛逼!</h1> <!--small：使用小号文本--> <h1>虹桥校区脱产七期最牛逼!<small>确实牛逼</small></h1> <p>电视剧发行的风景和史蒂<p class="lead">芬霍金说的，电视剧发</p>行的风景和史蒂芬霍金说的，电视剧发行的风景和史蒂芬霍金说的，电视剧发行的风景和史蒂芬霍金说的电视剧发行的风景和史蒂芬霍金说的</p> abbr: <!--鼠标悬停在‘egondsb’上会显示：egon同志就是一个大帅比（initialism把egondsb的字体变小）--> <abbr title="egon同志就是一个大帅比" class="initialism">egondsb</abbr> <blockquote> <p>20岁超越30岁，40岁，50岁的人,衣锦还乡,技多不压身</p> <footer>上海第一帅:<cite title="Source Title">Jason</cite></footer> </blockquote> <ul class="list-unstyled"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <pre><p>Sample text here...</p></pre> </div> </div> </div> </body> </html>
表格
table标签中添加的样式：
table类：为普通表格赋予基本的样式
table.hover类：让 <tbody> 中的每一行对鼠标悬停状态作出响应。
table-bordered 类：为表格和其中的每个单元格增加边框。
table-striped类：给 <tbody> 之内的每一行增加斑马条纹样式。
为行或单元格设置颜色：
active类：鼠标悬停在行或单元格上时所设置的颜色。
success类：标识成功或积极的动作。
info类：标识普通的提示信息或动作。
warning：标识警告或需要用户注意
danger：标识危险或需要用户注意
<!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 href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <table class="table table-hover table-bordered table-striped"> <thead> <tr class="info"> <th>name</th> <th>password</th> <th>hobby</th> </tr> </thead> <tbody> <tr class="danger"> <td class="text-center">Jason</td> <td>123</td> <td>学习</td> </tr> <tr class="warning"> <td>Egon</td> <td>123</td> <td>减肥</td> </tr> <tr class="success"> <td>Kevin</td> <td>123</td> <td>腰子汤</td> </tr> <tr class="active"> <td>Tank</td> <td>123</td> <td>吃生蚝</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
表单
form-control类：默认表单格式，设置在控件内部（如input）。
form-group类：包裹label和其他控件（input），获得很好的效果。
form-horizontal类：水平布局，设在form标签中，并且无需添加row类
校验状态：
has-warning类：input边框显示橙色。
has-error类：input边框显示红色。
has-success类：input边显示绿色。
ps：（.control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。）
<!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 href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="awesome/css/font-awesome.css"> <style> .c1 { margin-top: 100px; } body { background-color: #EEEEEE; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4 c1"> <form class="form-horizontal"> <div class="form-group has-error"> <h1 class="text-center">会员登录 <span class="glyphicon glyphicon-user"></span></h1> <label for="inputEmail3" class="col-sm-3 control-label ">用户名</label> <div class="col-sm-9 "> <input type="email" class="form-control " id="inputEmail3" placeholder="用户名"> <span class="error help-block">用户名错误</span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">密码</label> <div class="col-sm-9"> <input type="password" class="form-control" id="inputPassword3" placeholder="密码"> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-primary active">Sign in<i class="fa fa-bath" aria-hidden="true"></i></button> </div> </div> </form> </div> </div> </div> <script> // 光标移到input输入框内部时，清除span标签中的内容，并且删除警告校验状态 $('input').on('focus',function () { $(this).next().text('').parent().parent().removeClass('has-error') }) </script> </body> </html>
按钮
btn btn-default类：默认样式：白色
btn btn-primary类：首选项：蓝色
btn btn-success类：成功：绿色
btn btn-info类：一般信息：淡蓝色
btn btn-warning类：警告信息：橙色
btn btn-danger类：危险信息：红色
<!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 href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <button class="btn btn-success">button</button> <button class="btn btn-info">button</button> <button class="btn btn-warning">button</button> <button class="btn btn-danger">button</button> <button class="btn btn-primary">button</button> <a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a> </div> </div> </div> </body> </html>
字体图标
http://www.fontawesome.com.cn/
出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），
务必在图标和文本之间添加一个空格。
不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。
<!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 href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> span { color: green; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <span class="glyphicon glyphicon-heart"></span> <span class="glyphicon glyphicon-heart-empty"></span> </div> </div> </div> </body> </html>
下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <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> </div>
通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。
<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropup <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> <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> </div>
嵌套
想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。
<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div>
导航条
务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。
通过添加 .navbar-inverse 类可以改变导航条的外观。
<nav class="navbar navbar-default"> <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>
扫一扫
2894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
