學習Bootstrap知識記錄點①

時間 2019-12-06

原文原文鏈接

一、如何引入bootstrap到htmlcss

解決辦法：bootstrap官方提供了連接服務，永久免費，即便你不下載bootstrap框架文件到本地，也能夠直接在html中使用，使用下面這段代碼html

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

***********************************華麗分割線***********************************jquery

2,編寫一個表單bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% extends "base.html" %}
{% block body %}
    <button type="button" class="btn btn-primary btn-lg btn-block">
        Page NotFound
    </button>
    <form>
        <div class="form-group">
            <label>用戶名:</label>
            <input type="text" class="form-control" id="username" placeholder="Username" style="width: auto">
            <lable>密碼:</lable>
            <input type="password" class="form-control" id="password" placeholder="Password" style="width:auto">

        </div>
        <div>
            <input type="submit" class="btn btn-success" value="提交" id="sumbitBtn">
            <input type="submit" class="btn btn-success" value="取消" id="exitBtn">
        </div>
    </form>
{% endblock %}
</body>
</html>

***********************************華麗分割線***********************************api

3.給表格設置背景色:class=wrining. class=success等等框架

<table class="table table-bordered">
    <tr class="">
        <td class="warning">覃光林001</td>
        <td class="success">覃光林002</td>
        <td class="default">覃光林003</td>
    </tr>
    <tr class="danger">
        <td class="active">覃光林004</td>
        <td class="info">覃光林005</td>
        <td class="danger">覃光林006</td>
    </tr>
</table>

***********************************華麗分割線***********************************ide

4.分列式下拉菜單學習

{#    分裂式下拉菜單#}
<div class="btn-group">
    <button type="button" class="btn btn-danger">覃光林,來測試學習</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

***********************************華麗分割線***********************************測試

5.警告框ui

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

可關閉的警告框

警告框中的連接

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

***********************************華麗分割線***********************************

6.文本右對齊

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

***********************************華麗分割線***********************************

7.改變大小寫

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

***********************************華麗分割線***********************************

8.表格

<table class="table">
  ...
</table>

帶邊框的表格

<table class="table table-bordered"></table>

狀態類

Class	描述
`.active`	鼠標懸停在行或單元格上時所設置的顏色
`.success`	標識成功或積極的動做
`.info`	標識普通的提示信息或動做
`.warning`	標識警告或須要用戶注意
`.danger`	標識危險或潛在的帶來負面影響的動做

***********************************華麗分割線***********************************

9.多選框與單選框(單選框設置name一致便是單選,name不一樣就是多選)

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 多選框1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2">多選框2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 多選框3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="option1"> 單選框1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="option2"> 單選框2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="option3"> 單選框3
</label>

***********************************華麗分割線***********************************

10.設置表格邊框（class="table table-bordered"）

<table class="table table-bordered">
    <thead>
    <tr  class="text-center" >
        <td class="alert-success">我無論</td>
        <td class="alert-warning">我最帥</td>
        <td class="alert-info">大家都是小可愛</td>
    </tr>
    </thead>
    <thead>
    <tr  class="text-center">
        <td class="alert-warning">我無論</td>
        <td class="alert-danger">我最帥</td>
        <td class="text-success">大家都是小可愛</td>
    </tr>
    </thead>
     <thead>
    <tr  class="text-center">
        <td >我無論</td>
        <td >我最帥</td>
        <td >大家都是小可愛</td>
    </tr>
    </thead>
</table>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。