Bootstrap【Bootstrap基础学习】01 Bootstrap的CSS

Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以必要利用 HTML5
文书档案类型。

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

为了让 Bootstrap
开发的网站对活动装备友好,确认保障适当的绘图和触屏缩放,必要在网页的 head
之中添加 viewport meta 标签,如下所示:

<meta name="viewport" content="width=device-width, //视口宽度为设备宽度
                                     initial-scale=1.0, //缩放程度
                                     maximum-scale=1.0, //最大缩放级别(可选)
                                     user-scalable=no">//禁止页面缩放(可选)

Bootstrap
使用 Normalize 来建立跨浏览器的一致性。Normalize.css
是2个非常的小的 CSS 文件,在 HTML
成分的暗许样式中提供了更好的跨浏览器一致性。

至于布局

Bootstrap
提供了一套响应式、移动装备优先的流式网格系统,随着显示屏或视口(viewport)尺寸的加码,系统会活动分成最多12列。

img-responsive 用于img元素

container 用于包裹页面上的始末的成分

  • 行需求放在container,并用来创立列的水平组。
  • 预约义的网格类,比如 .row 和 .col-xs-4,可用于赶快创制网格布局。
  • Bootstrap 1
  • 队列可相互嵌套,嵌套后的自适应以父级成分为准,而不是装备宽度
  • 要开创四个分外的列,则应用四个 col-xs-4,要是12个列就12个col-xs-1
    <div class="container">
       <div class="row">
          <div class="col-xs-6 col-md-2 col-md-offset-1"></div>
          <div class="col-xs-6 col-md-3"></div>
          <div class="col-xs-6 col-md-3"></div>
          <div class="col-xs-6 col-md-3"></div>
       </div>
       <div class="row">...</div>
    </div>
    <div class="container">....    
    <!--以上代码在手机上就是两行两列,在电脑上是一行四列,其中第一列前面有空白,比其它列宽度小三分之一-->
    //可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示,col-md-push-6按照我个人的理解,是在左面浮动了6列,然后再插入元素,col-md-pull-3则是在右边浮动了3列,然后从右往左插入元素
    

传播媒介询问是不行了不起的”有原则的 CSS
规则”。它只适用于部分基于某个规定条件的
CSS。假如满足那多少个条件,则使用相应的体制。

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
//对于所有带有 min-width: @screen-sm-min 的设备,如果屏幕的宽度小于 @screen-sm-max,则会进行一些处理。

有关排版

  • 关于文本

    <small>本行内容是在标签内</small><br>
    <strong>本行内容是在标签内</strong><br>
    <em>本行内容是在标签内,并呈现为斜体</em><br>
    <p class="text-left">向左对齐文本</p>
    <p class="text-center">居中对齐文本</p>
    <p class="text-right">向右对齐文本</p>
    <p class="text-muted">本行内容是减弱的</p>灰
    <p class="text-primary">本行内容带有一个 primary class</p>蓝
    <p class="text-success">本行内容带有一个 success class</p>绿
    <p class="text-info">本行内容带有一个 info class</p>深蓝
    <p class="text-warning">本行内容带有一个 warning class</p>黄
    <p class="text-danger">本行内容带有一个 danger class</p>红
    
  • Bootstrap 定义 <abbr>
    成分的样式为体今后文书尾部的一条虚线边框,当鼠标悬停在地点时会彰显完整的文书(只要您为
    <abbr> title
    属性添加了文件)。为了博取2个更小字体的公文,请添加 .initialism 到
    <abbr>。

    <abbr title="World Wide Web">WWW</abbr><br>
    <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
    
  • 接纳 <address> 标签,您能够在网页上展现联系音讯。

  • 选取<Blockqoute>标签作为引用

    <blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>
    
  • list-unstyled用于未定义样式列表ul,list-inline用于水平列表ul

  • pre-scrollable使pre可滚动

  • <code>内联突显代码,<pre>展现多行代码

关于表格

  • Bootstrap 2
  • Bootstrap 3
  • 通过把自由的 .table 包在 .table-responsive class
    内,您能够让表格水平滚动以适应小型设备(小于 768px)。当在抢先 768px
    宽的重型装备上查看时,您将看不到任何的歧异。

    <div class="table-responsive">
       <table class="table">
          <caption>响应式表格布局</caption>
          <thead>
             <tr>
                <th>产品</th>
                <th>付款日期</th>
                <th>状态</th>
             </tr>
          </thead>
          <tbody>
             <tr>
                <td>产品1</td>
                <td>23/11/2013</td>
                <td>待发货</td>
             </tr>
          </tbody>
       </table>
    </div>      
    

有关表单

  • 在form上丰裕属性role=”form”就会选拔Bootstrap基本的表单结构,此时私下认可为垂直表单
  • 把标签和控件放在2个分包 class .form-group 的 <div>
    中。那是收获最佳距离所必备的。
  • 向装有的文本元素 <input>、<textarea> 和 <select>
    添加 class .form-control

    • <textarea class="form-control" rows="3"></textarea>
      <label for="name">可多选的选择列表</label>
            <select multiple class="form-control">
               <option>1</option>
               <option>2</option>
               <option>3</option>
               <option>4</option>
               <option>5</option>
           </select>
      
  • 在form加上类calss=form-inline,那么表单成分就会变成内联的

  • 在form加上类class=form-horizontal,那么表单元素就会变成水平的

    • 安装表单控件padding和margin值
    • 更改“form-group”的表现方式,类似于网格系统的“row”。

    • 向标签添加 class .control-label

  • 复选框和单选框
    • 对一一日千里复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们呈现在同一行上。
  • 当你要求在贰个程度表单内的表单标签后放置纯文本时,请在 <p>
    上应用 class .form-control-static
  • 剥夺的输入框 input,若是你想要禁止使用2个输入框
    input,只必要简单地添加 disabled 属性

  • 对 <田野(field)set> 添加 disabled 属性来剥夺 <田野(field)set>
    内的保有控件。

  • Bootstrap
    包蕴了错误、警告和成功新闻的辨证样式。只需求对父成分简单地加上适当的
    class(.has-warning、 .has-error 或
    .has-success
    )即可使用表达状态。
  • .input-lg 和.input-sm能够变动输入框的万丈样式
  • help-block   Bootstrap
    表单控件能够在输入框 input
    上有多少个块级匡助文本。为了抬高一个占有整个宽度的剧情块,请在
    <input> 后选拔 .help-block

    <input class="form-control" type="text" placeholder="">
       一个较长的帮助文本块,超过一行,
       需要扩展到下一行。本实例中的帮助文本总共有两行。
    

有关按钮

 

<button type="button" class="btn btn-default">默认按钮</button>

<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>

<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>

<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>

<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>

<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>

<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

 

按钮的大小

<p>
   <button type="button" class="btn btn-primary btn-lg">
      大的原始按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary">
      默认大小的原始按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-sm">
      小的原始按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-xs">
      特别小的原始按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg btn-block">
      块级的原始按钮
   </button>
</p>

class为active表示激活按钮

class为disabled表示禁止使用按钮

在a和input上利用按钮class也能弄成按钮的规范,不过考虑到跨浏览器的难点要么在button上比较好

至于图片

有关图片的样式除了在此以前提到的img-responsive用于图片的自适应之外还有以下四个样式
.img-rounded 圆角图片

.img-circle 圆形图片

.img-thumbnail 缩略图功用

 

有关任何样式类

  • .pull-left左浮动
  • .pull-right右浮动
  • center-block内容居中
  • .clearfix清除浮动
  • .caret显示下拉式
  • .close关闭图标

关于差异装备

Bootstrap 4

 

Bootstrap 5

相关文章