移动布局
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
布局容器
- container(class)
- container-fluid(class)
栅格系统
- 外层 row(class)
- 内层
- col-xs-(class) : 超小屏幕(手机)
- col-sm-(class) : 最大宽度750px (平板)
- col-md-(class) : 最大宽度970 (电脑桌面)
- col-lg-(class) : 最大宽度1170 (超大电脑桌面)
<div class="row">
<div class="col-md-4">三个小哥</div>
<div class="col-md-4">三个小哥</div>
<div class="col-md-4">三个小哥</div>
</div>
标题
h1-h6
在标题中可以设置标题头
<h1 class="page-header">标题1</h1>
段落
- lead(class)可以让段落突出显示
内联文本元素
- 标记 mark标签
- 删除文本 del标签
- 无用文本 s标签
- 插入文本 ins标签
- 带下划线文本 u标签
- 小号文本 small标签
- 着重文本 strong标签
- 斜体 em标签
对齐方式
- text-left (class)
- text-center
- text-right
- text-justify
- text-nowrap
英文大小写
- text-uppercase(class):全部大写
- text-lowercase(class):全部小写
- text-capitalize(class):英文首字母大写
缩略语
- 基本缩略语
鼠标悬停在缩略单词上,会展示title的全部内容
<abbr title="attribute">attr</abbr>
- initialism(class) 缩略语
initialism缩略语会使缩略语font-size变得小一些
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址信息
- address标签
- 每行以br标签结尾
<address>
<strong>Full Name</strong> <br>
<a href="mailto:#">xwx3135@126.com</a>
</address>
引用
- blockquote标签
- 相当于markdown的 >作用
<blockquote>这里是引用,哈哈哈哈</blockquote>
代码
1.内联代码 code标签
this is inline-code <code> <strong>邢伟新</strong> </code>
2.用户输入 kbd标签
<p>继续下一步操作请点击<kbd>enter</kbd></p>
3.代码块 pre标签
<pre><p>Sample text here...</p></pre>
表格
基本表格 table(class)
带边框的表格 table table-striped(class)
鼠标悬停 table table-hover(class)
紧缩表格 table table-condensed(class)
状态类,用于每行表格显示的颜色
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
- active(class) 鼠标悬停设置的颜色
- success(class) 成功的标识
- info(class) 普通的消息提示
- warning(class) 警告
- danger(class) 标识危险
- 响应式表格
在小于768px的屏幕上会出现滚动条,大于768px滚动条消失
<div class="table-responsive">
<table class="table">
...
</table>
</div>
表单
talk is cheap,show me code
- 基本表单
<form>
<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 class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
- 水平排列的表单
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label ">用户名:</label>
<div class="col-md-10">
<input type="text" class="form-control " placeholder="xingweixin">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" >密码:</label>
<div class="col-md-10">
<input type="password" class="form-control" placeholder="123">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<div class="checkbox">
<label>
<input type="checkbox"> cheak me out
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" type="submit">Submit</button>
</div>
</div>
</form>
按钮
1.可写成button的标签
<a class="btn btn-default" href="#">link </a>
<button class="btn btn-default">button</button>
<input type="button" value="inputBtn" class="btn btn-default">
<input type="submit" value="inputSubmit" class="btn btn-default">
2.预定义样式
<button class="btn btn-default">btn-default</button>
<button class="btn btn-primary">btn-primary</button>
<button class="btn btn-success">btn-success</button>
<button class="btn btn-info">btn-info</button>
<button class="btn btn-warning">btn-warning</button>
<button class="btn btn-danger">btn-danger</button>
<button class="btn btn-link">btn-link</button>
3.按钮尺寸
<button class="btn btn-info btn-lg">btn-info(大尺寸)</button> <br>
<button class="btn btn-warning">btn-warning(默认)</button> <br>
<button class="btn btn-danger btn-sm">btn-danger(小尺寸)</button> <br>
<button class="btn btn-default btn-xs" >btn-link(超小)</button>
4.块按钮牛
- btn-block (class):默认占用全屏膜,可以用col-md-3布局
5.激活状态按钮 active(class)
当按钮处于激活状态时，其表现为被按压下去.active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加
6.禁用状态
图片
图片相应式布局 img-responsive(class)
图片形状
- img-rounded(class)
- img-circle(class)
- img-thumbnail(class)
辅助类
1.情景文本颜色
<p class="text-muted">管理网保密须知text-muted</p>
<p class="text-primary">管理网保密须知text-primary</p>
<p class="text-success">管理网保密须知text-success</p>
<p class="text-info">管理网保密须知text-info</p>
<p class="text-warning">管理网保密须知text-warning</p>
<p class="text-danger">管理网保密须知text-warning</p>
2.情景背景色
<p class="bg-muted">管理网保密须知text-muted</p>
<p class="bg-primary">管理网保密须知text-primary</p>
<p class="bg-success">管理网保密须知text-success</p>
<p class="bg-info">管理网保密须知text-info</p>
<p class="bg-warning">管理网保密须知text-warning</p>
<p class="bg-danger">管理网保密须知text-warning</p>
3.三角符号
<span class="caret"></span>
