Bootstrap-全局CSS样式

最新推荐文章于 2024-07-12 09:36:48 发布

weixin_33682719

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量264

点赞数

文章标签： javascript ViewUI

1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）

2.内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素

3.通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding

4.设置不同宽度屏幕时不同展示, 栅格类适用于与屏幕宽度大于或等于分界点大小的设备

<div class="row">
    <span class="col-md-4 col-xs-8">col-md-4</span>
    <span class="col-md-8 col-xs-4">col-md-8</span>
</div>

5.xs:手机(<768px), sm:平板(≥768px), md:桌面显示器(≥992px), lg:大桌面显示器(≥1200px)

6.col-lg|md|sm|xs-* 表示栅格中占几列(左右都有15px的padding)

7.col-lg|md|sm|xs-offset-* 表示栅格中偏移几列

8.col-lg|md|sm|xs-push-* 表示栅格中列向右移动多少列(相对定位 left: 16.6666%)

9.col-lg|md|sm|xs-pull-* 表示栅格中列向左移动多少列(相对定位 right: 16.6666%)

10.hn(n为1-6), 其中1-3的margin: 20px 0px 10px; 4-6的margin:10px 0px; 其中还有 .h1-.h6 的类

11.全局font-size: 14px; line-height: 1.428; 其中p元素还被设置了等于 1/2 行高（即 10px）的底部外边距(margin: 0px 0px 10px)

12.

　　.pull-left 左浮动

　　.pull-right 右浮动

　　.center-block 将此元素左右居中

　　.clearfix 清除浮动

　　.show, .hidden, .invisible 设置元素显隐

　　.visible-xs|sm|md|lg-* 设置什么设备时可见

　　.hidden-xs|sm|md|lg 设置什么设备时隐藏

　　.sr-only 只有屏幕阅读器才显示

　　.lead 加黑字体显示

　　.text-muted(灰色), .text-primary, .text-success, .text-info .text-warning, .text-danger 字体颜色设置

　　.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger 设置背景色

　　<small> 将字体大小设置为父容器字体大小的85%, 对应类 .small

　　<mark> 高亮字体背景显示, 对应类 .lead

　　<del> 被删除的文本

　　<s> 无用文本类似 <del>

　　<u> 为字体加下划线

　　<ins> 插入的文本(底部有下划线, 类似<u>)

　　<strong>, <b> 加粗文本(更改font-weight)

　　<em>, <i> 斜体

　　<abbr title="aaaaa"> 缩略语(bootstrap 会在其下加虚线鼠标悬停时显示其title)

　　.initialism 配合<abbr> (font-size: 90%; 所有字母会大写)

　　<address> 专用来写地址的标签(margin-bottom: 20px;)

　　<blockquote> 引用(border-left: 5px solid #eee; padding: 10px 20px;)

　　blockquote footer, blockquote small {font-size: 80%; color: #777; 且之前会加"--"}

　　.blockquote-reverse 右对齐

　　.help-block 字体浅色

　　.text-muted：提示, 使用浅灰色（#999）

.text-primary：主要, 使用蓝色（#428bca）

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

　　.text-info：通知信息, 使用浅蓝色（#31708f）

　　.text-warning：警告, 使用黄色（#8a6d3b）

　　.text-danger：危险, 使用褐色（#a94442）

13.文本对齐

　　.text-left, .text-center, .text-right, .text-justify(两端对齐), .text-nowrap

14.改变大小写

　　text-lowercase(小写), text-uppercase(大写), text-capitalize(单词首字母大写)

15.ul li

　　.list-unstyled 无前缀

　　.list-inline li {display: inline-block; padding: 0px 5px;} 无前缀且水平排列, 为水平导航而生

16.dl dt dd

　　dt {font-weight: 700} 会加粗字体

　　dl.dl-horizontal 让dt和dd显示在一行, 且margin-bottom:20px;17.代码

　　<code> 红色字体且有灰色背景

　　<kbd> 键盘

　　<var> 标记变量

　　<samp> 标记程序输出内容

　　<pre> 原样输出

　　　　pre.pre-scrollable 表示max-height 为 350px, 并在垂直方向展示滚动条

18.表格

　　.table 少量的内补（padding）和水平方向的分隔线 {width: 100%; maring-bottom: 20px;}

　　.table th|td {padding: 8px;}

　　.table .table-striped 为表格增加斑马线(奇数灰色背景)

　　.table .table-bordered 为表格每个单元格增加边框

　　.table .table-hover 鼠标悬停时 tbody中对应行背景加深

　　.table .table-condensed 表格更紧凑

　　.active, .success, .info, .warning, .danger 表格背景颜色

19.响应式表格: 将任何 .table 元素包裹在 .table-responsive 元素内即可创建

20..sr-only 是除了屏幕阅读器外, 其他设备上隐藏该元素

21.所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%

22. 将 label 元素和.form-control类的控件包裹在 .form-group 中可以获得最好的排列

23..checkbox, .radio {display: block; margin-bottom: 10px; margin-top: 10px; position: relative;}

24.checkbox实例

<div class="checkbox">
    <label>
        <input type="checkbox"> Check me out
    </label>
</div>

25.input实例, 其中form-group-lg|form-group|form-group-sm用来控制控件大小

<div class="form-group">
    <label for="username">用户名</label>
    <input type="text" id="username" class="form-control" placeholder="请输入用户名" />
</div>

26.为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件, 只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）

27.输入框和单选/多选框控件默认被设置为 width: 100%, 在内联表单(form-inline), 我们将这些元素的宽度设置为 width: auto, 因此, 多个控件可以排列在同一行

28.实现如下效果(使用input-group, input-group-addon, input-group-btn, form-control)

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for ..." />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default">GO！</button>
            </span>
        </div>

29.通过为表单添加 .form-horizontal(其内label必须用control-label) 类, 并联合使用 Bootstrap 预置的栅格类, 可以将 label 标签和控件组水平并排布局, 这样做将改变 .form-group 的行为, 使其表现为栅格系统中的行（row）, 因此就无需再额外添加 .row 了, 此时如果需要在表单中将一行纯文本和 label 元素放置于同一行, 为 <div class="col-*-*">下的<p> 元素添加 .form-control-static 类即可, 若左侧为label, 此时label需要加"control-label"类(text-align: right;)

30.使用.form-horizontal实现以下效果

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

31. <form>, <form class="form-inline">, <form class="form-horizontal">

32..radio, .checkbox是加在外层div上, .radio-inline, .checkbox-inline要加在label上, 即使disabled属性也是加在label上

33..has-success, .has-warning, .has-error都是加在form-goup上或者form-control父级上的

34.高度通过.input-lg, 默认, input-sm 控制控件大小 (可用于input, select, textarea);

35.宽度通过栅格控制 .form-group表现为row

36.form-group has-success has-feedback, 此时需要在form-control的控件之后加个span, 且class有form-control-feedback

37.按钮通过.btn-lg, 默认, .btn-sm, .btn-xs来控制高度大小

38.设置 .btn-block 来控制宽度

39..active 也可以装饰 btn

40.为btn添加禁用

　　1.添加disabled类

　　2.添加disabled属性

关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

41..image-responsive, .image-rounded, .image-circle, .image-thumbnail

42.简单下拉列表(dropup可以控制三角符号向上, caret为三角符号)

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>下拉菜单</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-default" data-toggle="dropdown">导航 <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="http://www.baidu.com">百度</a></li>
                <li><a href="http://www.163.com">网易</a></li>
            </ul>
        </div>
    </div>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

43.下拉菜单组成

　　1.外层菜单类包含.dropdown, 若想向上弹出可以使用 "dropdown dropup"

　　2.按钮增加 data-toggle="dropdown"属性

　　3.增加菜单列表 <ul class="dropdown-menu"></ul>

44.菜单中分隔线可以用 <li class="divider"></li>

45.下拉菜单头部介绍可以用 <li class="dropdown-header">第一部分菜单</li>

46.dropdown-menu-left|right 表示菜单左右对齐

47.在下拉列表(dropdown-menu)的li中可以使用disabled, active等类

48.按钮组:btn-group/btn-group-vertical, 按钮组大小btn-group-lg|默认|sm|xs

49.工具栏:btn-toolbar(可以包含多个btn-group)

50.使用btn-group制作如下效果只需要把当初制作下拉菜单的“dropdown”的容器换成"btn-group", 并且和普通的按钮放在同一级

51.在btn-group基础上使用btn-group-justified来等分菜单

52.制作导航主要通过“.nav”样式, 默认的“.nav”样式不提供默认的导航样式, 必须附加另外一个样式才会有效, 比如“nav-tabs(切换标签)”、“nav-pills(胶囊型)”之类

53.nav下可以为li添加disabled, active等类

54.制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可

55.制作自适应导航只需要在"nav-tags/nav-pills"的基础上添加一个"nav-justified"类名即可

56.类似下拉菜单导航也可以加 .nav-divider 做分隔线

57.制作导航条

　　1.在导航上新增 .navbar-nav 类

　　2.在导航外层增加类为 .navbar .navbar-default 的标签

58.

        <div class="navbar navbar-default">
            <div class="navbar-header">
            <a class="navbar-brand">易乐迅</a>
            </div>
            <ul class="nav nav-pills navbar-nav">
                <li><a href="http://www.baidu.com">百度</a></li>
                <li class="active"><a href="http://www.baidu.com">百度</a></li>
                <li><a href="http://www.baidu.com">百度</a></li>
                <li><a href="http://www.baidu.com">百度</a></li>
                <li class="btn-group dropdown">
                        <a href="http://alibaba.com" class="dropdown-toggle" data-toggle="dropdown">
                            阿里巴巴
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="http://www.baidu.com">百度</a></li>
                            <li class="active"><a href="http://www.baidu.com">百度</a></li>
                            <li><a href="http://www.baidu.com">百度</a></li>
                            <li><a href="http://www.baidu.com">百度</a></li>
                        </ul>
                </li>
            </ul>
        </div>

59.

　　.nav, .nav-tags, .nav-pills, .nav-stacked, .nav-divider, .nav-header, .nav-justified 导航常用类

　　.navbar, .navbar-default, .navbar-inverse, .navbar-nav, .navbar-header, .navbar-brand, .navbar-form, navbar-left, navbar-right, navbar-btn, navbar-link, navbar-text, navbar-fixed-top, navbar-fixed-bottom

　　.navbar-toggle, .collapse, .navbar-collapse

60.响应式导航条

    <div class="navbar navbar-default">
        <div class="navbar-header">
            <div class="navbar-header">
                <a class="navbar-brand" href="http://www.yilexun.com">易乐迅</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".my-nav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>
        <div class="collapse navbar-collapse my-nav">
            <ul class="nav navbar-nav">
                <li class="active"><a href="##">网站首页</a></li>
                <li><a href="##">系列教程</a></li>
                <li><a href="##">名师介绍</a></li>
                <li><a href="##">成功案例</a></li>
                <li><a href="##">关于我们</a></li>
            </ul>
        </div>
    </div>

61.使用.pagination, .pagination-lg|sm, ul, li, a来创建分页

62..pager, .previous, .next 只显示上一页下一页可使用.previous, .next来居左居右

63.标签(比如显示hot) .label, .lable-default, .lable-primary, .lable-info, .label-success, .label-warning, .label-danger

64.徽章(比如显示消息数目) .badge,

65.缩略图 .thumbnail, .caption

　　结构如下:

　　　　1.最外层 .col-*-*

　　　　2.第二层 a class="thumbnail"

　　　　　　3.第三层 img

　　　　4.第二层 div caption

　　　　　　5.h3, p等

66.警示框 .alert, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-dismissable,

67.可关闭警示框外层alert需设置.alert-dismissable, 内层button设置.close, data-dismiss="alert"

68.在警示框内添加链接内容增加 alert-link 即可

69.进度条

　　1.基本外层 .progress, 内层 .progress-bar

　　2.彩色内层加 .progress-bar-success|info|warning|danger

　　3.条纹外层加 .progress-striped, 也可内层加 .progress-bar-striped

　　4.动态条纹内外层在条纹基础上选一个加 active

　　4.加label 加在内层div标签中即可

70.媒体对象

　　1.最外层 .media

　　2.第二层 a.pull-left|pull-right

　　　　3.第三层 img.media-object

　　4.第二层 div.media-body

　　　　5.第三层 hn.media-heading

　　　　6.第三层 <div>...</div>

71.媒体对象列表 ul.media-list li.media

72.列表组

　　1.列表组容器 .list-group

　　2.列表项 .list-group-item

　　3.自定义列表项 list-group-item-heading, list-group-item-text

　　4.列表项背景色 list-group-item-success|info|warning|danger

73.面板

　　2.面板内容 .panel-heading, .panel-body, .panel-footer

74.JavaScript, Bootstrap依赖jQuery, 需先加载jQuery

75.Bootstrap3.2中提供了12种JavaScript组件, 分别对应单独JS文件, 若想全部导入, 直接引用Bootstrap.min.js即可

76.动画过渡 transition.js, 过渡都是采用CSS3来实现的, 所以IE6-8是不具备效果的

77.模态弹出框 modal.js

　　1.第一层 .modal

　　2.第二层 .modal-content

　　3.第三层 .modal-header(其中关闭按钮需要加 data-dismiss="modal"), .modal-body, .modal-footer

78.data-toggle="modal" data-target="#mymodal"

79.在.modal上使用fade类为弹框加过渡效果

80.data-show表示初始化时弹框是否显示 data-backdrop 如果为static则点击背景元素时不会关闭此弹框 data-keyboard 如果为false 则无法通过ESC关闭

81.a标签的href也可作为data-target

weixin_33682719

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap-全局CSS样式

1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）2.内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素3.通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素...
复制链接

扫一扫