博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一:bootstrap排版
阅读量:6836 次
发布时间:2019-06-26

本文共 1940 字,大约阅读时间需要 6 分钟。

标题:

段落正文

  

1、全局文本字号为14px(font-size)。

2、行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能)。

3、颜色为深灰色(#333);

4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;(font-family)

 

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;background-color: #fff;}

强调内容(.lead)

<small>标签

  1、行高都是1,而且font-weight设置了normal变成了常规效果(不加粗),同时颜色被设置为灰色(#999)。

  2、由于<small>内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;

<strong><b>标签

<em><i>标签

<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

强调相关的类   

  • .text-muted:提示,使用浅灰色(#999)
  • .text-primary:主要,使用蓝色(#428bca)
  • .text-success:成功,使用浅绿色(#3c763d)
  • .text-info:通知信息,使用浅蓝色(#31708f)
  • .text-warning:警告,使用黄色(#8a6d3b)
  • .text-danger:危险,使用褐色(#a94442)

文本对齐风格

Bootstrap通过定义四个类名来控制文本的对齐风格:

  ☑   .text-left:左对齐

  ☑   .text-center:居中对齐

  ☑   .text-right:右对齐

  ☑   .text-justify:两端对齐

列表

  去点(.list-unstyled)  除了项目编号之外,还讲列表左边距清0

  内联 (.list-inline)    把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。

  水平(.dl-horizontal)

              1、将dt设置了一个左浮动,并且设置了一个宽度为160px

              2、将dd设置一个margin-left的值为180px,达到水平的效果
              3、当标题宽度超过160px时,将会显示三个省略号

@media (min-width: 768px) {
.dl-horizontal dt {float: left;width: 160px;overflow: hidden;clear: left;text-align: right;text-overflow: ellipsis;white-space: nowrap; }.dl-horizontal dd {
margin-left: 180px; }}

 

  定义

表格

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

  ☑  .table:基础表格

  ☑  .table-striped:斑马线表格

  ☑  .table-bordered:带边框的表格

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

  ☑  .table-condensed:紧凑型表格

  ☑  .table-responsive:响应式表格

  特别提示:除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给tr元素添加其他颜色样式时,在”.table-hover”表格中也要做相应的调整。

  斑马线表格

  带边框的表格

  鼠标悬停高亮表格

  紧凑型表格

  响应式表格

Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。示例如下:

 

转载于:https://www.cnblogs.com/whiskey/p/6559927.html

你可能感兴趣的文章
错误总结
查看>>
Delphi7 (第一天:类的编写)续
查看>>
单片机基础
查看>>
ZOJ 1027 Human Gene Functions(动态规划LCS)
查看>>
变量、中文-「译」javascript 的 12 个怪癖(quirks)-by小雨
查看>>
合作开发用到的几个 设计模式
查看>>
[iOS] 在UIToolBar中增加UILabel等控件(xib/storyboard图形界面方式)
查看>>
宋体节点hdoj 1520 Anniversary party(树形dp)
查看>>
优化网站设计(七):避免在CSS中使用表达式
查看>>
让你的网站拥有微博(weibo.com)关注图标
查看>>
hadoop基本命令
查看>>
若不能连接到sql server的localhost
查看>>
JavaScript无提示关闭窗口(兼容IE/Firefox/Chrome)
查看>>
Winform窗口里的嵌入WPF的UserControl,关闭Winform父窗体的方法
查看>>
JavaScript – 6.JS面向对象基础(*) + 7.Array对象 + 8.JS中的Dictionary + 9.数组、for及其他...
查看>>
格式资料python sqlalchemy 查询结果转化为 Json格式
查看>>
超链接浏览<meta name="format-detection"/> 的用法
查看>>
请求网络网络编程
查看>>
文件目录Android SDK目录结构
查看>>
Asp.net Web.Config - 配置元素customErrors
查看>>