bootstrap 学习笔记(3)---- 代码

这节讲的是代码:

1、基本实例

<code></code>  <pre></pre> <kbd></kbd>

应用如下

   1、For example, <code>section</code> should be wrapped as inline.
      2、To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
      3、<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

  结果如图:

2、表格

  a、为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。

代码:<table class="table"> ... </table>

  b、条纹装表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

  ****跨浏览器兼容性:条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被 Internet Explorer 8 支持

  代码:<table class="table table-striped"> ... </table>

如图:

  c、带边框的表格:添加 .table-bordered 类为表格和其中的每个单元格增加边框。

  代码:<table class="table table-bordered"> ... </table>

  d、鼠标悬停:通过.table-hover类,可以让鼠标悬停每一列做出响应

  代码:<table class="table table-hover"> ... </table>

  e、紧缩表格:通过.table-condensed类可以让表格更加紧凑,单元格的内补(padding)均会减半。

  代码:<table class="table table-condensed"> ... </table>

  f、表格颜色:可以为单元格或行设置颜色。success(绿色),active(灰色系),info(青色系),warning(黄色系),danger(红色系)

颜色如图:                                                                                 

3、相应式表格:

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

代码:<div class="table-responsive"> <table class="table"> ... </table> </div>

时间: 2024-08-29 14:32:55

bootstrap 学习笔记(3)---- 代码的相关文章

Bootstrap 学习笔记 之代码和表格 (3 day)

代码: Bootstrap 允许以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标签.如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre> 标签. 请确保当您使用 <pre> 和 <code> 标签时,开始和结束标签使用了 unicode 变体: < 和 >.  // 分别表示为:< 和 > 符号,

Bootstrap学习笔记(二)代码

pre { display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 1.42857143; color: #333; background-color: #f5f5f5; border: 1px solid #ccc } 1.代码 1.<code>:一般是针对于单个单词或单个句子的代码 Bootstrap的代码风格有三种: <code> <pre> <kbd&g

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

bootstrap学习笔记一: bootstrap初认识,hello bootstrap(下)

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

BootStrap 学习笔记二

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 IE 浏

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2

iOS: 学习笔记, 用代码驱动自动布局实例

iOS自动布局是设置iOS界面的利器. 本实例展示了如何使用自动布局语言设置水平布局, 垂直布局 1. 创建空白iOS项目 2. 添加一个控制器类, 修改YYAppDelegate.m文件 #import "YYAppDelegate.h" #import "YYViewController.h" @implementation YYAppDelegate - (BOOL)application:(UIApplication *)application didFin

iOS: 学习笔记, 用代码驱动自动布局实例(swift)

iOS自动布局是设置iOS界面的利器.本实例展示了如何使用自动布局语言设置水平布局, 垂直布局1. 创建空白iOS项目(swift)2. 添加一个控制器类, 修改YYAppDelegate.swift文件 @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application(application: UIApplication, didFi

BootStrap 学习笔记一

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 1.HTML5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2.为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签. <meta name="viewport" cont

BootStrap 学习笔记三

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 I