bootstrap 学习

2018-06-24 01:07:12来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

通过这个我们可以了解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

表单

基础例子

  1. .form-control 来修饰<input>,<textarea>,<select>,默认的宽度为100%
  2. <label>包裹在div.form-group
  3. 内链表单.form-inline用来修饰<form>
  4. 前后扩展div.input-group-addon
  5. 水平.form-horizontal
  6. <textarea> 中row 属性来修饰几行
  7. 多选择&单选
    1. 禁用状态div.disabled
    2. div.checkbox>labl>input
    3. checkbox 的内链label.checkbox-inline,label.radio-inline
    4. 不带文字的checkbox 或者radio,就是label 包裹的时候不写label>input
  8. 下拉框
    1. .form-control修饰<select>
    2. 属性multiple表示多选
  9. 静态文本
    1. 使用水平.form-horizontal修饰<form>:<form class='form-horizontal'>
    2. 用栅格和.control-label来修饰<label><label class='col-md-2 control-label'>
  10. 禁用 .disabled ,如果是checkbox 或者 radio 的时候,也要使用disabled,最好不要使用form表单中的<fieldset disabled>,原因:<a>标签不受影响
  11. 只读 readonly 属性
  12. 给输入框加上颜色div.has-success,div.has-warning,div.has-error
  13. 给输入框加上图标
    1. <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> 加上的是图标
    2. <span class="input-group-addon">@</span>加上文字
  14. 设置输出框的大小input.form-control input-lg
  15. 设置输出组的大小(有label的时候),div.form-group form-group-sm
  16. 水平上的大小通过栅格设置

按钮

  1. .btn 设置基础按钮样式,如背景以及点击反馈
  2. 设置按钮的颜色
    1. .btn-default:白色
    2. .btn-primary:深蓝色
    3. .btn-success:绿色
    4. .btn-info:蓝色
    5. .btn-warning:黄色
    6. .btn-link:链接透明
  3. 大小 .btn-lg>没有描述>.btn-sm>.btn-xs
  4. 块状的框度100% .btn-block
  5. 激活状态 .active
  6. 禁用 <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
  7. a 标签的禁用<a class='diabled'>

图片

  1. 圆角的,.img-round
  2. 圆的,.img-circle
  3. 画布.img-thumbnail
  4. 图片响应式剧中 .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">&times;</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();
}
```

显示隐藏

  1. .show
  2. .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的属性

  1. .visible-*-block:display: block;
  2. .visible-*-inline:display: inline;
  3. .visible-*-inline-block:display: inline-block;

以下为组件的知识

组件

字体

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

下拉菜单

  1. 使用.dropdown修饰<div>
  2. .dropdown-toggle 作为js的事件绑定
  3. data-toggle 绑定div内的列表
  4. dropdown-menu修饰<ul>
  5. <li> 列表可以用.dropdown-header 来分组
  6. 使用.divider 在分隔列表
  7. 使用.disabled来禁用

按钮组

  1. .btn-group 来修饰div
  2. 包裹多个.btn-group的工具组,使用.btn-toolbar来修饰
  3. 对按钮组大小设置
    1. btn-group-xs
    2. btn-group-md
    3. wu
    4. btn-group-lg
  4. 垂直上的按钮 .btn-group-vertical
  5. 对齐.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>
  1. nav nav-tabs 来修饰导航标签
  2. nav nav-pills 胶囊,垂直时候加上.nav-stacked
  3. 去掉间隙,加上nav-justified

导航条

  1. navbar navbar-default来修饰div或者nav
  2. 如果导航条上存在form,那么给form 表单加上navbar-form
  3. 按钮navbar-btn
  4. 文本navbar-text
  5. 链接 navbar-link
  6. 固定在顶部navbar-fixed-top或者底部 navbar-fixed-bottom
  7. navbar 中可包裹一个container|container-fluid
  8. 反色 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>

输入组

  1. .input-group 修饰div
  2. .input-group-addon 修饰span 加载输入框上
  3. .form-control 修饰input ,表示框度为100%
  4. label 标签包裹

分页

  1. 使用.pagination来修饰<ul>
  2. 可使用pagination-[size]来修饰大小

翻页

  1. 使用.pager来修饰ul
  2. 对齐使用.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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS3 transition 浏览器兼容性

下一篇:谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!