container容器
- Bootstrap需要为页面内容和栅格系统包裹一个.container的容器.其中有.container和.container-fluid两个为div增加的类名,第一个的宽高固定,第二个铺满视窗.因为一些属性的原因
这俩种容器不能互相嵌套.
栅格布局
- 每一行最多包含十二列
- 用(div).row类名来快速创建一个行
- 在.row下用.col-xs-4这样的类名创建列
- 你可以为.col-(用法[class*=“col-”])(意为包含该字符段的类名全部都会被选中)设置背景padding等等属性
各种布局对应的大小
- 手机 .col-xs-$
- 小屏幕 .col-sm-$
- 中等屏幕.col-md-$
- 大屏幕 .col-lg-$
列偏移
例如使用.col-md-offset-$的类名就能实现列的右移.原理是通过设置类名后的数字为元素加上一个对应大小的左外边距(margin-left)
例如,给在.row下的一个div加上.col-md-offset-4就可以把这个元素向右偏移四个单位
以下是代码
<div class="row"> <div class="col-md-4">.col-md-4</div> //这是原位置 <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> //这是偏移四个单位后的位置 </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 . col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
列的嵌套
在一个列中再添加一个.row 以及一组.col-sm-$就可以实现列的嵌套,*被嵌套的.col-md- $ 元素不能超过十二个
以下是简单的实现代码
<div class="row"> //外层row | <div class="col-sm-9"> | Level 1: .col-sm-9 | <div class="row"> //内层row | | <div class="col-xs-8 col-sm-6"> | | Level 2: .col-xs-8 .col-sm-6 | | </div> | | <div class="col-xs-4 col-sm-6"> | | Level 2: .col-xs-4 .col-sm-6 | | </div> | </div> | </div> </div>
列排序
使用的是.col-md-pull-
(
向
左
移
动
(向左移动
(向左移动个单位) 和 .col-md-push-
(
向
右
移
动
(向右移动
(向右移动个单位)的类就可以改变元素的排列
以下是简单的实现代码
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> //这个块本来在左边,现在被向右移动了三个单位 <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> //这个快本来在右边,现在被向左移动了三个单位 </div>
排版
标题
bootstrap拥有<h1>-<h6>
标签,还拥有.h1
- .h6
的类,这是为了可以给inline元素提供样式
标题内还可以包含标签,或者被设为.small类的元素,可以用来标记副标题
h1. Bootstrap headingSecondary text
h2. Bootstrap headingSecondary text
h3. Bootstrap headingSecondary text
h4. Bootstrap headingSecondary text
h5. Bootstrap headingSecondary text
h6.Bootstrap headingSecondary text
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
页面主体
bootstrap将全局的font-size
默认为14px,line-height
默认为1.428
这些属性直接被赋予元素和所有的block元素.
元素被默认等于0.5倍的行高(即10px)和底部外边距
中心内容
可以添加.lead让段落突出显示
主要是引用在一堆<p>
中
<p class="lead">xxx</p> //本行会被强调 <p> xxx</p>
内联文本元素
-
<mark>
可以让元素背景颜色变化 -
<del>
删除线 -
<s>
无用的文本 -
<ins>
插入文本 -
<u>
带下划线的文本
以下是通过HTML自带的标签可以为元素增加一些样式
小号文本,标签包裹,其中的文本大小是父容器字体的85%,
行内元素可以被
<strong>
强调
<em>
斜体
引用
- 可以将元素包裹在
<blockquote>
中即可表现出引用框的样式,这里建议包裹<p>
元素 - 加入
<footer>
,标明引用来源,来源的名称请使用<cite>
标签包裹
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> //段落内容 <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> //这里用footer包裹整个引用,它会在前面自动加横线,然后在里面包裹cite表示名称 </blockquote>```
- 可以使用
.blockquote-reverse
类名让引用框右对齐
代码
内联代码
通过<code>
标签包裹内联的代码段
比如
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<!-- 导航栏 -->
<div class="container">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i class="st"></i>
<i class="ed"></i>
<i class="rd"></i>
</label>
<div class="logo"><a href="#">MINECRAFT</a></div>
<div class="nav-wrapper">
<ul>
<li class="st"><a href="#">GAMES</a></li>
<li class="ed"><a href="#">COMMUNITY</a></li>
<li class="rd"><a href="#">MERCH</a></li>
<li class="last"><a href="#">SUPPORT</a></li>
</ul>
</div>
</nav>
</div>
</body>
</code>
用户输入
通过<kbd>
标签标记用户通过键盘输入的内容(可以做出指导按键的效果)
比如ctrl+alt
<kbd><kbd>ctrl</kbd>+<kbd>alt</kbd></kbd>
代码块
-
多行代码请用
<pre>
标签,其中的 ‘<’ 和 ‘>’ 请做转义处理,用字符代码代替 -
还可以使用
.pre-scrollable
类,它会默认max-height="350px"
,并在垂直方向显示滚动条
变量
用<var>
标签来标记
例如
x+4=y
<var>x</var>+4=<var>y</var>
表格
基本例子
bootstrap中使用.table
类来为<table>
元素赋予少量的样式
条纹状表格
table-striped
可以给<tbody>
之内的每一行增加斑马条纹样式
带边框的表格
.table-bordered
类可以为表格和其中的每个单元格增加边框
紧缩表格
通过添加 .table-condensed
类可以让表格更加紧凑,单元格中的padding会比标准表格减半
表单元素
基本例子
所有设置了 .form-control
类的 <input>
、<textarea>
和 <select>
元素都将被默认设置宽为 100%;
。 将 <label>
元素和前面提到的控件包裹在 .form-group
中可以使控件拥有最好的排列方式。
<div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="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>```
内联表单
为<form>
元素添加.form-inline
类可以使其内容左对齐,同时变成inline-block
级别的控件.但是只适用于窗口大于等于768px时
注意!
在bootstrap中,输入框和单选多选框默认
width:100%:
,而带有.form-inline
属性父容器的输入框和多选单选框宽度会被默认设置为auto.所以请根据自己的使用需要进行重新布局
对于每个输入控件要添加<lable>
标签,否则浏览器可能无法正常识别
水平排列表单
为<form>
标签加上.form-horizontal
类名,接着就可以为<label>
标签以及其中的控件组加上栅格系统的类名,这个时候无需再创建.row的父容器,控件们就会表现栅格系统的行为
图中的文本框名称是两个<label>
标签,在使用了.form=horizontal
类名后,给其加上对应的栅格类名,就可以让该输入跨和label在一行内显示,这样会出现点击email选中后面输入框的效果
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>