学习Bootstrap知识记录点①

一、如何引入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 alert-dismissible>...</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>
相关文章
相关标签/搜索