计算机教程

当前位置:澳门娱乐场网址 > 计算机教程 > bootstrap知识点

bootstrap知识点

来源:http://www.ablakeforum.com 作者:澳门娱乐场网址 时间:2019-06-29 08:13

响应式表格

通过把任意的 .table 包在 .table-responsive class 内

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="col-sm-2 control-label">聚焦</label>
      <div class="col-sm-10">
         <input class="form-control" id="focusedInput" type="text" 
            value="该输入框获得焦点...">
      </div>
   </div>
   <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">
         禁用
      </label>
      <div class="col-sm-10">
         <input class="form-control" id="disabledInput" type="text" 
            placeholder="该输入框禁止输入..." disabled>
      </div>
   </div>
   <fieldset disabled>
      <div class="form-group">
         <label for="disabledTextInput"  class="col-sm-2 control-label">
            禁用输入(Fieldset disabled)
         </label>
         <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" 
               placeholder="禁止输入">
         </div>
      </div>
      <div class="form-group">
         <label for="disabledSelect"  class="col-sm-2 control-label">
            禁用选择菜单(Fieldset disabled)
         </label>
         <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
               <option>禁止选择</option>
            </select>
         </div>
      </div>
   </fieldset>
   <div class="form-group has-success">
      <label class="col-sm-2 control-label" for="inputSuccess">
         输入成功
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputSuccess">
      </div>
   </div>
   <div class="form-group has-warning">
      <label class="col-sm-2 control-label" for="inputWarning">
         输入警告
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputWarning">
      </div>
   </div>
   <div class="form-group has-error">
      <label class="col-sm-2 control-label" for="inputError">
         输入错误
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputError">
      </div>
   </div>
</form>

显示效果:

图片 1

水平表单

水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:

  • 向父 <form> 元素添加 class .form-horizontal
  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。
  • 向标签添加 class .control-label

Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select

未完待续

 

 

选择框(Select)

当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框。

  • 使用 <select> 展示列表选项,通常是那些用户很熟悉的选择列表,比如州或者数字。
  • 使用 multiple="multiple" 允许用户选择多个选项。

显示效果:

图片 2

精简表格

<table >

图片 3

<tr >

输入框焦点

当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow

响应式图像
<img src="..."  alt="响应式图像">

媒体查询
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

为了给段落添加强调文本,则可以添加 ,这将得到更大更粗、行高更高的文本

网格布局

<div >     <div >        <div ></div>        <div ></div>           </div>     <div >...</div>  </div>  <div >....

列偏移

<div  >

字体显示红色
<p >本行内容带有一个 warning class</p>

缩写
<abbr title="Real Simple Syndication" >RSS</abbr>
地址
<address>

  <strong>Some Company, Inc.</strong><br>    007 street<br>    Some City, State XXXXX<br>    <abbr title="Phone">P:</abbr> (123) 456-7890  </address>
引用
<blockquote >这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>

 

<h4>未定义样式列表</h4>  <ul >

<h4>内联列表</h4>  <ul >

<h4>水平的定义列表</h4>  <dl >

输入框(Input)

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。适当的 type 声明是必需的,这样才能让 input 获得完整的样式。

<form role="form">
  <div class="form-group">
    <label for="name">标签</label>
    <input type="text" class="form-control" placeholder="文本输入">
  </div>
 </form>

显示效果:

图片 4

基本的表格

<table >

表格类

下表样式可用于表格中:

描述
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑

 

 

 

 

 

条纹表格

<table >

精简表格

通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

<div class="row">
            <table class="table table-condensed">
                <caption class="text-center">精简表格布局</caption>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                    <tr>
                        <td>No.3</td>
                        <td>苏州</td>
                    </tr>
                    <tr>
                        <td>No.4</td>
                        <td>南京</td>
                    </tr>
                </tbody>
            </table>
        </div>

显示效果:

图片 5

图片 6

2.Bootstrap 表格

 

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:

标签 描述
<table> 为表格添加基础样式。
<thead> 表格标题行的容器元素(<tr>),用来标识表格列。
<tbody> 表格主体中的表格行的容器元素(<tr>)。
<tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。
<td> 默认的表格单元格。
<th> 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。
<caption> 关于表格存储内容的描述或总结。

 

 

 

 

 

 

 

表单布局

  • 向父 <form> 元素添加 role="form"
  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
  • 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control
<form role="form">     <div >        <label for="inputfile">文件输入</label>        <input type="file" id="inputfile">        <p >这里是块级帮助文本的实例。</p>     </div>
</div>

关于bootstrap组件知识点目录:

边框表格

<table >

禁用的字段集 fieldset

对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

图片 7

悬停表格

通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:

<div class="row">
            <table class="table table-hover">
                <caption class="text-center">悬停表格布局</caption>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                    <tr>
                        <td>No.3</td>
                        <td>苏州</td>
                    </tr>
                    <tr>
                        <td>No.4</td>
                        <td>南京</td>
                    </tr>
                </tbody>
            </table>
        </div>

显示效果:

图片 8

悬停表格

<table >

禁用的输入框 input

如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

  • <code> 标签。如果您想要内联显示代码,那么您应该使用 <code> 标签。
  • <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre> 标签。

基本的表格

如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:

<div class="row">
            <table class="table">
                <caption class="text-center">基本表格布局</caption>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                </tbody>
            </table>
        </div>

显示效果:

图片 9

内联表单

<form  role="form">
  • 默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,您需要在表单控件上设置一个宽度。
  • 使用 class .sr-only,您可以隐藏内联表单的标签。
<label  for="inputfile">文件输入</label>

表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块,请在 <input> 后使用 .help-block

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

显示效果:

图片 10

表单布局

Bootstrap 提供了下列类型的表单布局:

  • 垂直表单(默认)
  • 内联表单
  • 水平表单

4.Bootstrap 按钮

以下样式可用于<a>, <button>, 或 <input> 元素上:

描述
.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式(未被操作)
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击
.disabled 禁用按钮

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!-- 标准的按钮 -->
<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>

显示效果:

图片 11

前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多。

复选框((Checkbox)和单选框(Radio)

复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

  • 当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio
  • 对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。

显示效果:

图片 12

  1. Bootstrap--代码显示
  2. Bootstrap--表格
  3. Bootstrap--表单
  4. Bootstrap--按钮
  5. Bootstrap--图片
  6. Bootstrap--辅助类
  7. Bootstrap--响应式实用工具
  8. Bootstrap--字体图标
  9. Bootstrap--下拉菜单
  10. Bootstrap--按钮组
  11. Bootstrap--按钮下拉菜单
  12. Bootstrap--输入框组
  13. Bootstrap--导航元素
  14. Bootstrap--导航栏
  15. Bootstrap--面包屑导航
  16. Bootstrap--分页
  17. Bootstrap--标签
  18. Bootstrap--徽章
  19. Bootstrap--超大屏幕
  20. Bootstrap--页面标题
  21. Bootstrap--缩略图
  22. Bootstrap--警告
  23. Bootstrap--进度条
  24. Bootstrap--多媒体对象
  25. Bootstrap--列表组
  26. Bootstrap--面板
  27. Bootstrap--Wells

可选的表格类

除了基本的表格标记和 .table class,还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

1.Bootstrap 代码

Bootstrap 允许您以两种方式显示代码:

  • 第一种是 <code> 标签。如果您想要内联显示代码,那么您应该使用 <code> 标签。
  • 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre> 标签。

请确保当您使用 <pre> 和 <code> 标签时,开始和结束标签使用了 unicode 变体: < 和 >

    <div class="container">
        <div class="row">
            <p><code>&lt;select&gt;</code></p>
            <pre>
                &lt;div&gt;
                Hello World!
                &lt;/div&gt;
            </pre>
        </div>
    </div>

显示效果:

图片 13

 

本文由澳门娱乐场网址发布于计算机教程,转载请注明出处:bootstrap知识点

关键词:

上一篇:javascript的window.open()详解

下一篇:没有了