突然領導讓我搭前端頁面，我好方，20分鐘玩轉Bootstrap

著互聯網的發展，人們對網頁的體驗度不斷提升，不僅僅是滿足功能需求，還要追求審美，追求好的體驗度。作為一個后端，寫前端好難，怎么寫好前端？

什么是Bootstrap？

基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。而且它還支持響應式布局。

Bootstrap學習路線

了解

Flat Ui
Bootstrap select2
Bootstrap datetimepicker
Bootstrap datatables
font awesome官網

熟練使用API:https://v3.bootcss.com/
全局CSS樣式
組件
JavaScript插件

Bootstrap菜鳥使用步驟

進入：https://v3.bootcss.com 下載

下載后的文件

如何在項目中引用Bootstrap框架

步驟：

1、在項目中新建一個bootstrap目錄，將提前下載好的文件copy到bootstrap文件目錄中來（css、fonts、js）。并且將jquery的函數庫插件也copy到項目中來。

2、頁面中引入的標簽及文件

<!--第一步：將bootstrap全局css樣式文件引入-->
<!--響應式的開關-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--第一步：將bootstrap全局css樣式文件引入-->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!--第二步：將jquery插件引入，因所有的bootstrap js都需要jquery支持-->
<script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
<!--第三步：將bootstrap中的js插件引入,注意：一定要在引入bootstrap的js文件前引入jquery插件-->
<script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>

接下來打開API文檔跟著操作

重點關注三個模塊：全局css樣式、組件、JavaScript插件

全部看完，實踐跟著操作。

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--響應式的開關-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--第一步：將bootstrap全局css樣式文件引入-->
    <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<table class="table table-bordered table-hover">
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
</table>
   <!--第二步：將jquery插件引入，因所有的bootstrap js都需要jquery支持-->
   <script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
   <!--第三步：將bootstrap中的js插件引入,注意：一定要在引入bootstrap的js文件前引入jquery插件-->
   <script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

重點難點-柵格布局

一定先理解12個格子

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--響應式的開關-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--第一步：將bootstrap全局css樣式文件引入-->
    <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        div{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
     <!--  設置柵欄式布局-->
  <div  class="container"><!--或者container-fluid-->
      <div class="row">                                   -- col-xs-4 : 指小于768px的小設備
          <div class="col-xs-4">11</div>     -- col-sm-4 ：指>=768px的設備
          <div class="col-xs-4">22</div>     -- col-md-4 ：指>=992px設備
          <div class="col-xs-4">33</div>     -- col-lg-4 ：值1200px設備
        </div>
      <div class="row">
          <div class="col-md-4">11</div>
          <div class="col-md-4">22</div>
          <div class="col-md-4">33</div>
      </div>
      <div  class="row">
           <div  class="col-sm-4">11</div>
           <div  class="col-sm-4">22</div>
           <div  class="col-sm-4">33</div>
       </div>
       <div  class="row">
           <div  class="col-lg-4">11</div>
           <div  class="col-lg-4">22</div>
           <div  class="col-lg-4">33</div>
       </div>
    </div>
   <!--第二步：將jquery插件引入，因所有的bootstrap js都需要jquery支持-->
   <script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
   <!--第三步：將bootstrap中的js插件引入,注意：一定要在引入bootstrap的js文件前引入jquery插件-->
   <script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

誰在最需要的時候輕輕拍著我肩膀，誰在最快樂的時候愿意和我分享。今天我的分享就到這里，大家有沒有什么好的學習方法呢？歡迎來留言評論，和我們一起交流。如果喜歡我的文章，也歡迎大家關注、點贊、轉發。我是丫丫，一個專注分享項目實戰技能的IT從業者。

ootstrap Tags Input

當前的穩定版本為：v0.8.0

GitHub地址：https://github.com/bootstrap-tagsinput/bootstrap-tagsinput

在線示例：http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Bootstrap Tags Input是一個提供給使用Twitter開源框架Bootstrap用戶，用來管理標簽的jQuery插件。

首先我們點擊上面提到的GitHub地址來對源碼進行下載。

下載下來的是個zip壓縮包，我們進行解壓。

解壓完成后，將其中的dist目錄放置在我們的前端demo目錄內，并將其重新命名為bootstrap-tagsinput。

我們在頁面引入css和js文件。

首先看下目錄結構

demo
|---style
|------lib
|------public
|------static
|------------bootstrap-tagsinput
|------temp
|---views
|------card
|---------card-add.html

頁面內引入css文件

<link rel="stylesheet" type="text/css" href="../../style/static/bootstrap-tagsinput/bootstrap-tagsinput.css" />

頁面內引入js文件

<script type="text/javascript" src="../../style/static/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>

需要注意的是 css 文件需要在Bootstrap的css文件下，js文件需要在jQuery，popper（Bootstrap 4.x新增），Bootstrap的js文件之下。

接下來我們使用該插件。

<!-- 方法1 -->
<input type="text" class="input-text" id="my-tags">
<script type="text/javascript">
 $(document).ready(function(){
 // 初始化Tags Input
 $('#my-tags').tagsinput({
 // 設定單個標簽字符串最大長度為11
 maxChars: 11
 });
 });
</script>
<!-- 方法2 -->
<input type="text" class="input-text" data-role="tagsinput">

方法1比方法2要更“麻煩”一些，主要原因在于我們需要使用js代碼告訴前端服務器說這是一個使用BootstrapTagsInput插件的標簽，但是當需要對該插件進行一些個性化設置的時候，就必須使用js代碼來對其進行配置。就像上面代碼里的

maxChars: 11

一樣，它的意思是單個標簽的最大長度為11個字符。還有更多好玩好用的自定義配置在【在線示例】的鏈接里可以看到。

PS：

1. 當前版本基于Bootrap 3.x，使用Bootstrap 4.x 的用戶可能需要重新確認樣式。

2. 本文沒有使用bootstrap進行樣式構建，使用的為H-UI框架。

現代網站開發中，使用框架可以大大提高開發效率和代碼質量。Bootstrap是一個非常流行的前端框架，它提供了豐富的CSS樣式和JavaScript組件，使得網站開發變得簡單而高效。本文將介紹如何在網站開發中使用Bootstrap框架，并提供一些實用的技巧和建議。

步驟一：下載和導入Bootstrap

1、打開Bootstrap官方網站并點擊"Download"按鈕。

2、在下載頁面選擇合適的版本（可以選擇已編譯的CSS和JavaScript文件，也可以選擇源代碼）并下載。

3、將下載的文件解壓到你的項目目錄中，并在HTML文件中引入Bootstrap的CSS和JavaScript文件。

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>
<body>
<!-- Your website content here -->
<script src="path/to/bootstrap.min.js"></script>
</body>
</html>

步驟二：使用Bootstrap的CSS樣式

Bootstrap提供了大量的CSS樣式，可以輕松地為網站添加各種樣式效果，其柵格系統是一個特色亮點，非常的好用，這里就不做介紹了，后面會單獨開一篇講解。以下是一些常用的CSS類和用法：

container類用于創建一個固定寬度的容器，可以用于包裹網站的內容。

row類用于創建一個行，可以將內容劃分為多個列。

col-*-*類用于創建一個列，并指定列的寬度。

text-*類用于設置文本的對齊方式（如text-center將文本居中顯示）。

btn類用于創建一個按鈕樣式。

alert類用于創建一個警告框樣式。

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h1 class="text-center">Welcome to My Website</h1>
      <p>測試文本.</p>
      <button class="btn btn-primary">Click Me</button>
    </div>
    <div class="col-md-6">
      <div class="alert alert-success">
        <strong>Success!</strong> 
      </div>
    </div>
  </div>
</div>

步驟三：使用Bootstrap的JavaScript組件

除了CSS樣式，Bootstrap還提供了許多實用的JavaScript組件，可以為網站添加交互和動態效果。以下是一些常用的JavaScript組件和用法：

collapse組件用于創建可折疊的內容區域。

carousel組件用于創建圖片輪播效果。

modal組件用于創建模態框（彈出窗口）。

dropdown組件用于創建下拉菜單。

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample">
  Toggle Content
</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This is a collapsible content area.
  </div>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="path/to/image1.jpg" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="path/to/image2.jpg" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="path/to/image3.jpg" alt="Slide 3">
    </div>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        This is the modal content.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
    Dropdown Menu
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Item 1</a>
    <a class="dropdown-item" href="#">Item 2</a>
    <a class="dropdown-item" href="#">Item 3</a>
  </div>
</div>

結論

使用Bootstrap框架可以使網站開發變得簡單而高效。本文介紹了如何下載和導入Bootstrap，使用其CSS樣式和JavaScript組件。希望這些步驟和示例能夠幫助你在網站開發中使用Bootstrap，提高開發效率和網站質量。至于Bootstrap框架的具體說明請查閱官方的中文文檔，里面有詳細的使用方法和使用實例。

在線咨詢

上一篇：WINDOWS下通過BAT文件執行SQL示例-jsustchenjin
下一篇：報表界面開發：如何設計對表格工作簿的權限控制

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商