bootstrap笔记 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--以移动设备为优先-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" >
    <title>BootStrap</title>
    <!--引入外部的bootstrap中的css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!--jQuery文件务必在bootstrap.min.js之前引入-->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!--再引入bootstrap.min.js-->
    <script src="bootstrap/js/bootstrap.min.js"></script>

</head>
<body style="background:gray;">
 
    <!--布局容器-->
    <!--contailner 固定宽度为1170px-->
    <div class="container" style="background: #ffffff;">
        大家好
    </div>
    <!--fluid宽度为100%-->
    <div class="fluid" style="background: #ffffff">
        同志们辛苦了
    </div>
       
    <!--排版容器-->
    <!--<h1-h6>-->
    <!--.page-header设置页头-->
    <h1 class="page-header">为人民服务</h1>
    <!--small小一号标题-->
    <!--big大一号标题-->
    <p>
        p默认定义文字大小为12像素
        行距也已经定义好了
    </p>
    <strong>推荐使用的加粗</strong>
    <em>推荐使用的倾斜</em>
    <del>推荐使用的删除</del>

    <!--文本对齐方式-->
    .text-left左对齐
    .text-center居中
    .text-uppercase英文大写
    .text-lowercase英文小写
    .text-capitalize首字母大写

    <!--列表-->
    .list-unstyled 去掉列表前面的符号和原有的格式
    .list-inline 变横向排列
    dl dt dd 自定义列表
    .dl-horizontal 横向列表

    <!--表格-->
    .table表格的一个基类，如果加其他的样式。都在此之上
    .table-bordered 给表格加上外边框
    .table-hover 鼠标悬停效果
    .table-striped 斑马线效果，隔行换色
    .table-condensed 变紧凑

    <!--响应式表格-->
    .table-responsive 给table的父元素加，不是加在table里面 响应式表格 如果内容不能完全显示，自动加滚动条

    状态类设置的行或单元格
    .active 鼠标悬停在单元格时所设置的颜色
    .success标识成功或积极的动作
    .info标识普通的提示信息或动作
    .warning标识警告或需要用户注意
    .danger标识危险或潜在的带来负面影响的动作

    <!--响应式图片-->
    .img-responsive
    .img-circle 椭圆
    .img-rounded 圆角矩形
    .img-thumbnail 给图片加圆角边框

    <!--栅格系统-->
    栅格系统一定要放入容器中
    <div class="container"></div>
    <div class="container-fluid"></div>
    栅格系统，浏览器窗口自动分配最多12列，如果满了，会换到下一行
    栅格系统由row col组成

    <!--偏移-->
    col-md-offset-x 向右偏移x个列

    <!--排序-->
    col-xs/sm/md/lg-pull-x 向左偏移
    col-xs/sm/md/lg-push-x 向有偏移

    <!--文本颜色-->
    .text-muted
    .text-success
    .text-info
    .text-primary
    .text-waring
    .text-danger

    <!--下拉三角-->
    <span class="caret"></span>

    <!--快速浮动-->
    .pull-left 左浮动
    .pull-right 右浮动
    .clearfix 清除浮动

    <!--表单-->
    .form-control 圆角边框
    .form-group 给外面包裹的盒子加
    .checkbox-inline 给label标签加
    .redio-inline给label标签加

    .form-horizontal响应式表单
</body>
</html>

 

posted @ 2018-08-29 09:50  道高一尺  阅读(221)  评论(0)    收藏  举报