1. BootStrap

• BootStrap的使用
  Bootstrap是一套現成的CSS樣式集合，Bootstrap 是最受歡迎的HTML、CSS和JS框架，用于開發響應式布局、移動設備優先的WEB項目。

  1.特點：1.簡潔、直觀、強悍的前端開發框架，html、css、javascript 工具集，讓web開發更速、簡單。2.基于html5、css3的bootstrap，具有大量的誘人特性：友好的學習曲線，卓越的兼容性，響應式設計，12列格網，樣式向導文檔。3.自定義JQuery插件，完整的類庫，bootstrap3基于Less，bootstrap4 基于Sass的CSS預處理技術。4.Bootstrap 響應式布局設計,讓一個網站可以兼容不同分辨率的設備。Bootstrap 響應式布局設計，給用戶提供更好的視覺使用體驗。5.豐富的組件。2.使用：載入Bootstrap的css：<link href="css/bootstrap.min.css" rel="stylesheet">如果要使用Bootstrap的js插件，必須先調入jQuery：<script src="js/jquery-3.4.1.js"></script> 包括所有bootstrap的js插件或者可以根據需要使用的js插件調用：<script src="js/bootstrap.min.js"></script>3.html標準模板中內容：使用X-UA-Compatible來設置IE瀏覽器兼容模式 最新的渲染模式：<meta http-equiv="X-UA-Compatible" content="IE=edge"> viewport表示用戶是否可以縮放頁面； width指定視區的邏輯寬度； device-width指示視區寬度應為設備的屏幕寬度； initial-scale指令用于設置Web頁面的初始縮放比例；initial-scale=1則將顯示未經縮放的Web文檔；<meta name="viewport" content="width=device-width, initial-scale=1">

• 布局容器

  1..container 類用于固定寬度并支持響應式布局的容器。2..container-fluid類用于100%寬度，占據全部視口（viewport）的容器。

• 柵格網格系統

  行 row 列 column行：.row列：col-xs-列數 col-sm-列數 col-md-列數 col-lg-列數1.列組合：列組合簡單理解就是更改數字來合并列（原則：列總和數不能超12，大于12,則自動換到下一行。），有點類似于表格的colspan屬性。2.列偏移：讓列之間產生一些間隙 col-md-offset3.列排序：列排序其實就是改變列的方向，就是改變左右浮動，并且設置浮動的距離。在Bootstrap框架的網格系統中是通過添加類名col-md-push-* 和col-md-pull-* (其中星號代表移動的列組合數)。往前pull，往后push。4.列嵌套：Bootstrap框架的網格系統還支持列的嵌套。你可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列.

• 排版常用樣式

  1.標題Bootstrap和普通的HTML頁面一樣，定義標題都是使用標簽。2.段落通過.lead來突出強調內容(其作用就是增大文本字號，加粗文本，而且對行高和margin也做相應的處理。<p class="lead"><small>以后的</small><b>你</b>會<i>感謝</i>現在<em>努力</em>的<strong>你</strong> </p>3.強調定義了一套類名，這里稱其為強調類名，這些強調類都是通過顏色來表示強調：.text-muted 提示，使用淺灰色（#999）。.text-primary 主要，使用藍色（#428bca）。.text-success 成功，使用淺綠色(#3c763d) 。.text-info 通知信息，使用淺藍色（#31708f） 。.text-warning 警告，使用黃色（#8a6d3b） 。.text-danger 危險，使用褐色（#a94442）。4.對齊效果在CSS中常常使用text-align來實現文本的對齊風格的設置。Bootstrap通過定義四個類名來控制文本的對齊風格：.text-left 左對齊 。.text-center 居中對齊 。.text-right 右對齊 。.text-justify 兩端對齊。5.列表1.去點列表 class="list-unstyled"2.內聯列表 class="list-inline"保持水平顯示。內聯列表就是為制作水平導航而生。3.定義列表 class="dl-horizontal"水平定義列表。當標題寬度超過160px時，將會顯示3個省略號。6.代碼Bootstrap提供了三種代碼風格：1.單行內聯代碼 <code>代碼</code>2.多行塊代碼 <pre>代碼</pre>代碼會保留原本的格式，包括空格和換行。顯示html標簽的代碼需要適應字符實體，小于號（<）要使用硬編碼“&lt;”來替代，大于號(>)使用“&gt;”來替代。pre-scrollable (height,max-height高度固定,為340px,超過會存在滾動條)3.快捷鍵 <p><kbd>快捷鍵</kbd></p>7.表格1.表格樣式：基礎樣式： .table：基礎表格 附加樣式：.table-striped 斑馬線表格 。.table-bordered 帶邊框的表格 。.table-hover 鼠標懸停高亮的表格 。.table-condensed 緊湊型表格，單元格沒內距或者內距較其他表格的內距小。2.tr、th、td樣式：.active 將懸停的顏色應用在行或者單元格上。.success 表示成功的操作。.info 表示信息變化的操作。.warning 表示一個警告的操作。.danger 表示一個危險的操作。

• 表單

  1.表單元素：1.輸入框text .form-control空間大小 .input-lg（較大）.input-sm（較小）2.下拉選擇框select .form-control多行選擇設置 multiple="multiple"3.文本域textarea .form-control行數 row="行數"4.單選框radio 垂直顯示 .radio 水平顯示 .radio-inline5.復選框checkbox 垂直顯示 .checkbox 水平顯示 .checkbox-inline6.按鈕button 基礎樣式 .btn附加樣式 .btn-primary .btn-info .btn-success .btn-warning .btn-danger .btn-link .btn-default多標簽支持 使用 a div 等標簽制作按鈕按鈕大小 .btn-lg（大型）.btn-sm（小型）.btn-xs（超小）按鈕禁用1.在標簽中添加disabled屬性。（disabled="disabled"）2.在元素標簽中添加類名"disabled"。注意：在class屬性中添加disabled只是樣式上禁用了，并不是真正的禁用了此按鈕！2.表單布局創建基本表單的步驟：1.向父元素添加role="form"。 2.把標簽和控件放在一個帶有class="form-horizontal"的中。這是獲取最佳間距所必需的。 3.向所有的文本元素使用<span></span> 和 <select></select> 添加。

• 縮略圖和面板

  1.縮略圖class="thumbnail"2.面板默認的.panel組件所做的只是設置基本的邊框（border）和內補（padding）來包含內容。.panel-default 默認樣式。.panel-heading 面板頭 。.panel-body 面板主體內容。

• 導航
  使用下拉與按鈕組合可以制作導航。

  1.基本樣式: .nav 與 “nav-tabs”、“nav-pills”組合制作導航。2.分類: 1.標簽型 (nav-tabs)導航 。2.膠囊形(nav-pills)導航 。3.堆棧(nav-stacked)導航 。4.自適應(nav-justified)導航。 5.面包屑式(breadcrumb)導航，，單獨使用樣式，不與nav一起使用,直接加入到ol、ul中即可，一般用于導航，主要是起的作用是告 訴用戶現在所處頁面的位置（當前位置） 。3.狀態: 1.選中狀態active樣式 。2.禁用狀態: disable 。4.二級菜單。

分頁導航

1.頁碼導航：ul標簽上加.pagination[.pagination-lg | .pagination-sm] 。 2.翻頁導航：ul標簽上加.pager。

• 下拉菜單

  在使用Bootstrap框架的下拉菜單時，必須使用兩個js<!-- 如果要使用Bootstrap的js插件，必須先調入jQuery --> <script src="js/jquery-3.4.1.js"></script> <!-- 包括所有bootstrap的js插件或者可以根據需要使用的js插件調用 --> <script src="js/bootstrap.min.js"></script>1.使用一個類名為dropdown或btn-group的div包裹整個下拉框：<div class="dropdown"></div> 2.默認向下dropdown，向上彈起加入.dropup即可 。3.使用button作為父菜單，使用類名: dropdown-toggle 和自定義data-toggle屬性：<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>4.在button中使用font制作下拉箭頭：<span class="caret"></span> 5.下拉菜單項使用一個ul列表，并且定義一個類名為“dropdown-menu 。6.分組分割線: <li>添加類名“divider”來實現添加下拉分隔線的功能 。7.分組標題: li 添加類名 “dropdown-header” 來實現分組的功能 。8.對齊方式: 1.dropdown-menu-left 左對齊 默認樣式 。2.dropdown-menu-right 右對齊。9.激活狀態（.active）和禁用狀態（.disabled）。

• 模態框
  模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互 動。子窗體可提供信息、交互等。

  1.通過data屬性：在控制器元素（比如按鈕或者鏈接）上設置屬性data-toggle="modal"，同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態框（帶有 id="identifier"）。 2.通過JavaScript：使用這種技術，可以通過JavaScript來調用帶有 id="identifier" 的模態框：$('#identifier').modal(options);方法：Toggle: .modal('toggle') 手動切換模態框。 $('#identifier').modal('toggle');Show: .modal('show') 手動打開模態框。 $('#identifier').modal('show');Hide: .modal('hide') 手動隱藏模態框。 $('#identifier').modal('hide');

2. LayUI

• LayUI的使用
  ayui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。和Bootstrap有些相似，但該框架有個極大的好處就是定義了很多前后端交互的樣式接口，如分頁表格，只需在前端配置好接口，后端則按照定義好的接口規則返回數據，即可完成頁面的展示，極大減少了后端
  人員的開發成本。

  1.特點：1.layui屬于輕量級框架，簡單美觀。適用于開發后端模式，它在服務端頁面上有非常好的效果。2.layui是提供給后端開發人員的ui框架，基于DOM驅動。2.使用：layui的目錄結構如下：├─css // css目錄 │ │─modules // 模塊css目錄（一般如果模塊相對較大，我們會單獨提取，比如下面三個：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css // 核心樣式文件 ├─font // 字體圖標目錄 ├─images // 圖片資源目錄（目前只有layim和編輯器用到的GIF表情） │─lay // 模塊核心目錄 │ └─modules // 各模塊組件 │─layui.js // 基礎核心庫 └─layui.all.js // 包含layui.js和所有模塊的合并文件引入文件：./layui/css/layui.css ./layui/layui.js // 提示：如果是采用非模塊化方式，此處可換成：./layui/layui.all.js需要聲明需要使用的模塊和回調函數：<script> // 注意：導航 依賴 element 模塊，否則無法進行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>

• 布局容器

  固定寬度 class="layui-container"完整寬度 class="layui-fluid"

• 柵格系統

  1.柵格布局規則：1.采用layui-row來定義行：<div class="layui-row"></div>2.采用類似layui-col-md* 這樣的預設類來定義一組列（column），且放在行（row）內。其中：變量md代表的是不同屏幕下的標記。變量*代表的是該列所占用的12等分數（如6/12），可選值為1 - 12。如果多個列的“等分數值”總和等于12，則剛好滿行排列。如果大于12，多余的列將自動另起一行。3.列可以同時出現最多四種不同的組合，分別是：xs（超小屏幕，如手機）sm（小屏幕，如平板）md（桌面中等屏幕）lg（桌面大型屏幕）4.可對列追加類似layui-col-space5、layui-col-md-offset3這樣的預設類來定義列的間距和偏移。5.可以在列（column）元素中放入你自己的任意元素填充內容。2.響應式規則3.列邊距支持列之間為1px-30px區間的所有雙數間隔，以及1px、5px、15px、25px的單數間隔：layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 layui-col-space8layui-col-space10 layui-col-space12 layui-col-space14 layui-col-space15 layui-col-space16 layui-col-space18 layui-col-space20 layui-col-space22 layui-col-space24 layui-col-space25 layui-col-space26 layui-col-space28 layui-col-space30注意：1.layui-col-space：設置后不起作用主要是因為**設置的是padding**,也就是說是**向內縮**，所以 設置背景色padding也是會添上顏色，看起來好像沒有間距一樣。可以在里面在加一個div，來達到目的。 2.間距一般不高于30px，如果超過30，建議使用列偏移。4.列偏移layui-col-md-offset*其中*號代表的是偏移占據的列數，可選中為1 - 12。注意：列偏移可針對不同屏幕的標準進行設定，在當前設定的屏幕下有效，當低于桌面屏幕的規定的臨界值，就會堆疊排列。5.列嵌套在列元素（layui-col-md*）中插入行元素（layui-row）。

• 按鈕

  1.用法向任意HTML元素設定class="layui-btn"，建立一個基礎按鈕。通過追加格式為layui-btn-{type}的class來定義其它按鈕風格。2.主題原始 class="layui-btn layui-btn-primary"默認 class="layui-btn"百搭 class="layui-btn layui-btn-normal"暖色 class="layui-btn layui-btn-warm"警告 class="layui-btn layui-btn-danger"禁用 class="layui-btn layui-btn-disabled"3.尺寸大型 class="layui-btn layui-btn-lg"默認 class="layui-btn"小型 class="layui-btn layui-btn-sm"迷你 class="layui-btn layui-btn-xs"4.圓角class="layui-btn-radius"5.圖標class="layui-icon"

• 導航

  實現步驟：1.引入的資源：<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script>2.依賴加載模塊：<script type="text/javascript"> // 注意：導航 依賴 element 模塊，否則無法進行功能性操作 layui.use('element', function(){ var element = layui.element; }); </script>3.顯示指定類型的導航。1.水平導航class="layui-nav"2.垂直/側邊導航垂直導航 class="layui-nav layui-nav-tree" 側邊導航: class="layui-nav layui-nav-tree layui-nav-side"3.導航主題水平導航支持的其它背景主題有：.layui-bg-cyan（藏青）.layui-bg-molv（墨綠）.layui-bg-blue（艷藍）垂直導航支持的其它背景主題有：.layui-bg-cyan（藏青）4.面包屑class="layui-breadcrumb"可以通過設置屬性lay-separator="" 來自定義分隔符。

• 選項卡
  導航菜單可應用于頭部和側邊，支持響應式，支持刪除選項卡等功能。

  實現步驟：1.引入的資源：<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script>2.依賴加載模塊：<script type="text/javascript"> // 注意：選項卡 依賴 element 模塊，否則無法進行功能性操作 layui.use('element', function(){ var element = layui.element; }); </script>3.加載HTML。1.選項卡風格默認風格 layui-tab 簡潔風格 追加class：layui-tab-brief 卡片風格 追加class：layui-tab-card2.帶刪除的選項卡對父層容器設置屬性lay-allowClose="true"來允許Tab選項卡被刪除。

• 表格

  1.常規用法<table class="layui-table">2.基礎屬性lay-even 用于開啟隔行背景，可與其它屬性一起使用。lay-skin="屬性值" 若使用默認風格不設置該屬性即可line（行邊框風格）row（列邊框風格）nob（無邊框風格）lay-size="屬性值" 若使用默認尺寸不設置該屬性即可sm（小尺寸）lg（大尺寸）

• 表單
  基本的行區塊結構，它提供了響應式的支持。可以換成其他結構，但必須要在外層容器中定義class=“layui-form”，form模塊才能正常工作。

  1.常規用法<form class="layui-form" action="">2.表單元素1.輸入框text<input type="text" name="title" required lay-verify="required" placeholder="請輸 入標題" autocomplete="off" class="layui-input" />required 注冊瀏覽器所規定的必填字段lay-verify 注冊form模塊需要驗證的類型class="layui-input" layui.css提供的通用CSS類2.下拉選擇框select屬性selected可設定默認項。屬性disabled開啟禁用，select和option標簽都支持。可以通過optgroup標簽給select分組。通過設定屬性 lay-search 來開啟搜索匹配功能。3.復選框checkbox屬性title可自定義文本（溫馨提示：如果只想顯示復選框，可以不用設置title）。屬性checked可設定默認選中。屬性lay-skin可設置復選框的風格 （原始風格：lay-skin="primary"）。設置value="1"可自定義值，否則選中時返回的就是默認的on。4.開關（將復選框checkbox，通過設定lay-skin="switch" 形成了開關風格）屬性title可自定義文本。屬性disabled開啟禁用。設置value="xxx"可自定義值，否則選中時返回的就是默認的on。5.文本域textareaclass="layui-textarea" layui.css提供的通用CSS類。3.組裝行內表單class="layui-inline" 定義外層行內class="layui-input-inline" 定義內層行內4.忽略美化渲染可以對表單元素增加屬性lay-ignore設置后，將不會對該標簽進行美化渲染，即保留系統風格。5.表單方框風格通過追加layui-form-pane的class，來設定表單的方框風格。注意：復選框/開關/單選框 這些組合在該風格下需要額外添加 pane屬性，否則會看起來比較別扭。

• 彈出層

  1.使用場景1.作為獨立組件使用layer<!-- 引入好layer.js后，直接用即可 --> <script src="layer.js"></script> <script> layer.msg('hello'); </script>2.在layui中使用layerlayui.use('layer', function(){ var layer = layui.layer; layer.msg('hello'); });2.基礎參數1.type - 基本層類型類型：Number，默認：0 可傳入的值有：0（信息框，默認） 1（頁面層） 2（iframe層） 3（加載層） 4（tips層）2.title - 標題類型：String/Array/Boolean，默認：'信息' title支持三種類型的值： 若傳入的是普通的字符串，如title :'我是標題'，那么只會改變標題文本； 若需要自定義樣式，可以title: ['文本', 'font-size:18px;']，數組第二項可以寫任意 css樣式； 若你不想顯示標題欄，可以title: false；3.content - 內容類型：String/DOM/Array，默認：' ' content可傳入的值是靈活多變的，不僅可以傳入普通的html內容，還可以指定DOM。4.area - 寬高類型：String/Array，默認：'auto' 在默認狀態下，layer是寬高都自適應的。當定義寬度時，你可以area: '500px'，高度仍然是自適應的。 當寬高都要定義時，你可以area: ['500px', '300px']。5.icon - 圖標類型：Number，默認：-1（信息框）/0（加載層） 信息框默認不顯示圖標。當你想顯示圖標時，默認層可以傳入0-6。如果是加載層，可以傳入0-2。注意：信息框和加載層的私有參數。

• 日期與時間選擇

  1.快速使用1.在layui模塊中使用：下載layui后，引入layui.css和layui.js即可。通過layui.use('laydate', callback)加載模塊后，再調用方法。2.作為獨立組件使用：去layDate獨立版本官網下載組件包，引入laydate.js即可。直接調用方法使用。2.基礎參數1.elem - 綁定元素類型：String/DOM，默認值：無 必填項，用于綁定執行日期渲染的元素，值一般為選擇器，或DOM對象。2.type - 控件選擇類型類型：String，默認值：date 用于單獨提供不同的選擇器類型，可選值如下：year（年選擇器） 只提供年列表選擇month（年月選擇器） 只提供年、月選擇date（日期選擇器） 可選擇：年、月、日。type默認值，一般可不填time（時間選擇器） 只提供時、分、秒選擇datetime（日期時間選擇器） 可選擇：年、月、日、時、分、秒3.format - 自定義格式類型：String，默認值：yyyy-MM-dd 通過日期時間各自的格式符和長度，來設定一個你所需要的日期格式。layDate支持的格式如下：yyyy 年份，至少四位數。如果不足四位，則前面補零y 年份，不限制位數，即不管年份多少位，前面均不補零MM 月份，至少兩位數。如果不足兩位，則前面補零M 月份，允許一位數dd 日期，至少兩位數。如果不足兩位，則前面補零d 日期，允許一位數HH 小時，至少兩位數。如果不足兩位，則前面補零H 小時，允許一位數mm 分鐘，至少兩位數。如果不足兩位，則前面補零m 分鐘，允許一位數ss 秒數，至少兩位數。如果不足兩位，則前面補零s 秒數，允許一位數格式：//自定義日期格式 laydate.render({ elem: '#test' ,format: 'yyyy年MM月dd日' //可任意組合 });4.value - 初始值類型：String，默認值：new Date() 支持傳入符合format參數設定的日期格式字符，或者 new Date()。

• 分頁

  1.快速使用laypage 的使用非常簡單，指向一個用于存放分頁的容器，通過服務端得到一些初始值，即可完成分頁渲染。layui.use('laypage', function(){ var laypage = layui.laypage;}2.jump - 切換分頁的回調當分頁被切換時觸發，函數返回兩個參數：obj（當前分頁的所有選項值）、first（是否首次，一般用于初始加載的判斷）。laypage.render({ elem: 'page' ,count: 100 //數據總數，從服務端得到 ,groups:10 // 連續出現的頁碼個數 ,layout:['prev', 'page', 'next','limit','count'] // 自定義排版 ,limits:[5,10,20] // layout屬性設置了limit值，可會出現條數下拉選擇框 ,jump: function(obj, first){ // obj包含了當前分頁的所有參數，比如： console.log(obj.curr); //得到當前頁，以便向服務端請求對應頁的數據。 console.log(obj.limit); //得到每頁顯示的條數 //首次不執行 if(!first){ //do something } } });

3.基礎參數
通過核心方法：laypage.render(options) 來設置基礎參數。

• 數據表格

  1.快速使用創建一個table實例最簡單的方式是，在頁面放置一個元素，然后通過 table.render() 方法指定該容器。2.三種初始化渲染方式1.方法渲染1.將基礎參數的設定放在了JS代碼中，且原始的 table 標簽只需要一個選擇器。<table id="demo"></table>2.渲染表格layui.use('table', function(){ var table = layui.table; // 執行渲染 table.render({ elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器） ,url: 'user.json' // 數據接口 ,height: 315 // 容器高度 ,page:true // 開啟分頁 ,cols: [[ // 設置表頭 {field: 'id', title: 'ID'} ,{field: 'username', title: '用戶名'} ,{field: 'sex', title: '性別'} ]] }); });注意：table.render()方法返回一個對象：var tableIns = table.render(options)，可用于對當前表格進行“重載”等操作。2.自動渲染在一段table容器中配置好相應的參數，由table模塊內部自動對其完成渲染，而無需你寫初始的渲染方法。1.帶有class="layui-table"的標簽。 2.對標簽設置屬性lay-data=""用于配置一些基礎參數 。3.在標簽中設置屬性lay-data=""用于配置表頭信息。3.頭部工具欄<script type="text/html" id="toolbarDemo">4.行工具欄<script type="text/html" id="barDemo">

總結

以上是生活随笔為你收集整理的BootStrap和LayUI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。