bootstrap筆記

時間 2019-11-06
原文原文鏈接
<!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>
相關標籤/搜索
Bootstrap學習筆記
筆記
bootstrap
bootstrap+bootstrap+scss
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。