bootstrap 学习
2018-06-24 01:07:12来源:未知 阅读 ()
通过这个我们可以了解
bootstarp
常用的一些知识点。
栅格
- .row 在.container 或者 .container-fluid
- .col-md-* ,.col-lg-*,.col-xs-*,col-sm-*
- 列的偏移 .col-md-offset-*
- 可以嵌套,嵌套后再分为12格
排版
h1~h6
<small></small>
- .lead 可以让包裹的p段落凸显出来
<mark>
内链的凸显出来方案- 无用的文本
<s>
- 插入的文本
<ins>
<u>
下划线- 语句加强
<strong>
<em>
斜体- 文本的对齐方式,text-left,text-center,text-right,text-justify,text-nowrap
- .text-lowercase,.text-uppercase,.text-capitalize 大小写以及驼峰
- 地址
- 引用:
<blockquote class=".blockquote-reverse">
,多引用<cite class="source Title">
- 列表
<ul><li>
有序<ol><li>
无样式.list-unstyled
内连.list-inline
描述<dl><dt><dd>
,水平的描述:.dl-horizontal
使用text-overflow
可以截断太长的短语
代码
- 内连代码
<code>
- 用于输入
<kbd>
- 多行
<pre>
- 变量
<var>
- 程序输出
<samp>
表格
-
.table
.table-striped
斑马线-
.table-borded
框子 -
.table-hover
鼠标悬停 .table-condensed
紧凑- 给
<tr><td>
设置的颜色:.active
,.success
,.info
,.warning
,.danger
- 表格响应式:.table-responsive
表单
基础例子
.form-control
来修饰<input>
,<textarea>
,<select>
,默认的宽度为100%<label>
包裹在div.form-group
- 内链表单
.form-inline
用来修饰<form>
- 前后扩展
div.input-group-addon
- 水平
.form-horizontal
<textarea>
中row 属性来修饰几行- 多选择&单选
- 禁用状态
div.disabled
, div.checkbox>labl>input
- checkbox 的内链
label.checkbox-inline
,label.radio-inline
- 不带文字的checkbox 或者radio,就是label 包裹的时候不写label>input
- 禁用状态
- 下拉框
.form-control
修饰<select>
- 属性
multiple
表示多选
- 静态文本
- 使用水平
.form-horizontal
修饰<form>
:<form class='form-horizontal'>
- 用栅格和
.control-label
来修饰<label>
:<label class='col-md-2 control-label'>
- 使用水平
- 禁用 .disabled ,如果是checkbox 或者 radio 的时候,也要使用disabled,最好不要使用form表单中的
<fieldset disabled>
,原因:<a>标签不受影响
- 只读 readonly 属性
- 给输入框加上颜色
div.has-success
,div.has-warning
,div.has-error
- 给输入框加上图标
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
加上的是图标-
<span class="input-group-addon">@</span>
加上文字
- 设置输出框的大小
input.form-control input-lg
- 设置输出组的大小(有label的时候),
div.form-group form-group-sm
- 水平上的大小通过栅格设置
按钮
.btn
设置基础按钮样式,如背景以及点击反馈- 设置按钮的颜色
.btn-default
:白色.btn-primary
:深蓝色.btn-success
:绿色.btn-info
:蓝色.btn-warning
:黄色.btn-link
:链接透明
- 大小
.btn-lg
>没有描述>.btn-sm
>.btn-xs
- 块状的框度100%
.btn-block
- 激活状态
.active
- 禁用
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
- a 标签的禁用
<a class='diabled'>
图片
- 圆角的,
.img-round
- 圆的,
.img-circle
- 画布
.img-thumbnail
- 图片响应式剧中
.img-responsive .center-block
辅助
文本颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
背景颜色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
关闭的按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
使用.close
来修饰<button>
三角
`<span class="caret"></span>`
div 的浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
内容居中
<div class="center-block">...</div>
说明:
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
浮动取消
<div class='clearfix'>
说明
```css
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}
```
显示隐藏
- .show
- .hide
说明:
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
<h1 class="text-hide">Custom heading</h1>
响应
根据屏幕宽度设置是否隐藏
1 .visible-*-*
2 .hidden-*
根据屏幕宽度设置display的属性
- .visible-*-block:display: block;
- .visible-*-inline:display: inline;
- .visible-*-inline-block:display: inline-block;
以下为组件的知识
组件
字体
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
下拉菜单
- 使用
.dropdown
修饰<div>
.dropdown-toggle
作为js的事件绑定data-toggle
绑定div内的列表dropdown-menu
修饰<ul>
<li>
列表可以用.dropdown-header
来分组- 使用
.divider
在分隔列表 - 使用
.disabled
来禁用
按钮组
- 用
.btn-group
来修饰div - 包裹多个
.btn-group
的工具组,使用.btn-toolbar
来修饰 - 对按钮组大小设置
- btn-group-xs
- btn-group-md
- wu
- btn-group-lg
- 垂直上的按钮
.btn-group-vertical
- 对齐
.btn-group-justified
下拉菜单
- 下拉菜单的关键在于
data-toggle='dropdown'
- 使用.dropup来修饰div实现向上
导航
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
- 用
nav nav-tabs
来修饰导航标签 - 用
nav nav-pills
胶囊,垂直时候加上.nav-stacked
- 去掉间隙,加上
nav-justified
导航条
- 用
navbar navbar-default
来修饰div或者nav - 如果导航条上存在form,那么给form 表单加上
navbar-form
- 按钮
navbar-btn
- 文本
navbar-text
- 链接
navbar-link
- 固定在顶部
navbar-fixed-top
或者底部navbar-fixed-bottom
- navbar 中可包裹一个container|container-fluid
- 反色
navbar-inverse
路径导航
原理通过css的:before和content添加的
使用:
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
输入组
- .input-group 修饰div
- .input-group-addon 修饰span 加载输入框上
- .form-control 修饰input ,表示框度为100%
- label 标签包裹
分页
- 使用
.pagination
来修饰<ul>
- 可使用
pagination-[size]
来修饰大小
翻页
- 使用
.pager
来修饰ul - 对齐使用
.previous
,.next
来修饰上页和下页
标签
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
违章
<span class="badge">
巨幕
<div class="jumbotron">
划分出空间来
面板
.panel
颜色 .panel-primary
结构:.panel-heading,.panel-body,.panel-footer
列表
.list-group 修饰<ul>
well
设置一个嵌入的效果.well
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- 毕业生想学习web前端开发,有什么好的发展方向吗? 2020-06-09
- 转行前端很迷茫,该怎么学习? 2020-06-06
- 前端学习记录 2020-06-05
- 前端如何学习? 2020-06-04
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash