bootstrap学记 - 标题 文本 列表 表格

1. 文本对齐

text-left

text-right

text-center

2. 文本突出

想p突出显示,添加类名“.lead”实现,其作用就是 增大字号,加粗文本,而且对行高和margin也做相应的处理。

3. 文本颜色样式

Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表示强调,具本说明如下:

.text-muted:提示,使用浅灰色(#999)

.text-primary:主要,使用蓝色(#428bca)

.text-success:成功,使用浅绿色(#3c763d)

.text-info:通知信息,使用浅蓝色(#31708f)

.text-warning:警告,使用黄色(#8a6d3b)

.text-danger:危险,使用褐色(#a94442)

4. ul ol dl

list-unstyled

list-inline

dl-dt-dd-1

dl-dt-dd代码如上样式如图

dl-dt-dd-2

dt-dd同行(水平样式)

dt-dd水平显示(同行)

5. 代码之pre

pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。

6. table样式

Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:

   .table:基础表格

   .table-striped:斑马线表格

   .table-bordered:带边框的表格

   .table-hover:鼠标悬停高亮的表格

   .table-condensed:紧凑型表格

   .table-responsive:响应式表格

在Bootstrap中,对于基础表格是通过类名“.table”来控制。如果不添加任何类名,是无任何样式效果的。想得到基础表格,我们只需加“.table”类名<table class="table">

紧凑型表格--简单理解,就是单元格没内距或者内距更小。那么在Bootstrap中,通过类名“table-condensed”重置了单元格内距值。

table-condensed效果

7. table-tr

table行的样式

先实现一个小目标。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本人技拙,还望不吝赐教。 bookstrap笔记 1.BookStrap是轻量级的CSS基础代码。大部分前端...
    陈佳岳阅读 1,060评论 0 8
  • 一、在官网下载bootstrap 二、在页面引入bootstrap 1、bootstrap是基于html5和css...
    shallwego_阅读 323评论 0 0
  • bootstrap简介 什么是bootstrap? 2011年,twitter的“一小撮”工程师为了提高他们内部的...
    zjbao123阅读 1,180评论 0 2
  • Bootstrap Bootstrap 特点1、简洁、直观、强悍的前端开发框架, html、 css、 javas...
    小山居阅读 500评论 0 0
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,155评论 0 0