BootStrap使用

1. 引用

　　在使用bootstrap的样式和js时要引用css和js文件

<link  rel="stylesheet" href="css/bootstrap.min.css"/>

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8">script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8">script>

2. 布局容器

    <div class="container-fluid" style="background-color: aqua;">
        .container-fluid 类用于100% 宽度，占据全部视口（viewport）的容器
    div>

3. 栅格布局

        <div class="row">
            <div class="col-md-4" style="background-color: blue;">4列div>
            <div class="col-md-8" style="background-color: rgb(180, 52, 127);">8列div>
        div>

 
        <div class="row">
            <div class="col-md-1" style="background-color: blue;">1列div>
            <div class="col-md-1 col-md-push-3" style="background-color: rgb(180, 52, 127);">1列div>
            <div class="col-md-1" style="background-color: rgb(179, 189, 94);">1列div>
            <div class="col-md-1 col-md-pull-2" style="background-color: rgb(75, 18, 51);">1列div>
        div>

 
        <div class="row">
            <div class="col-md-6" style="background-color: blue;">
                <div>
                    <div class="col-md-4" style="background-color: blue;">4列div>
                    <div class="col-md-4" style="background-color: rgb(180, 52, 127);">4列div>
                    <div class="col-md-4" style="background-color: rgb(179, 189, 94);">4列div>
                div>
            div>
            <div class="col-md-6" style="background-color: rgb(180, 52, 127);">6列div>
        div>

 
        <p class="lead">用过.lead来突出<small>强调small>内容p>

       <div class="text-muted"> .text-muted：提示，使用浅灰色 div>

       <div class="text-primary"> .text-primary：主要，使用蓝色div>

       <div class="text-success"> .text-success：成功，使用浅绿色div>

        <div class="text-info"> .text-info：通知信息，使用浅蓝色div>

        <div class="text-warning">.text-warning：警告，使用黄色div>

        <div class="text-danger">.text-danger：危险，使用褐色div>

        
        <code>
            this is a simple code<br>
            this is a simple code
        code>
        
        <p>使用<kbd>ctrlkbd> + <kbd>skbd> 保存内容p>
        
        <pre>
            public class HelloWorld{
                public static void main(){
                    System.out.println("hello world");
                }
            }
        pre>
        
        <pre class="pre-scrollable">
            <ol>
                <li>........li>
                <li>........li>
                <li>........li>
                <li>........li>
                <li>........li>
                <li>........li>
                <li>........li>
                <li>........li>
            ol>
        pre>

        
        
        <table class="table table-bordered table-striped table-hover table-condensed">
            <tr class="info">
               <th>JavaSeth> 
               <th>数据库th> 
               <th>JavaScriptth> 
            tr>
            <tr class="success">
                <th>pythonth> 
                <th>phpth> 
                <th>C++th> 
             tr>
             <tr class="warning">
                <th>rabbitmqth> 
                <th>activemqth> 
                <th>kafakth> 
             tr>
             <tr class="active">
                 <th>数学th>
                 <th>物理th>
                 <th>语文th>
             tr>
             <tr class="danger">
                 <th>数据库th>
                 <th>网络th>
                 <th>原理th>
             tr>
        table>

4. 表单常用

        <div class="row">
            <div class="col-md-3">
                <input type="text" class="form-control"/>
            div>
        div>
        
        <div class="row">
            <div class="col-md-3">
                <select class="form-control">
                    <option>请选择城市option>
                    <option>上海option>
                    <option>北京option>
                select>
            div>
        div>

 
        <div class="row">
            <div class="col-md-3">
                <textarea>文本域textarea>
            div>
        div>

        <div class="row">
            <div class="col-md-3">
                <label class="checkbox">
                    <input type="checkbox" name="hobby">唱歌
                label>
                <label class="checkbox">
                    <input type="checkbox" name="hobby">跳舞
                label>
            div>
        div>
        
        <div class="row">
            <div class="col-md-3">
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby">唱歌
                label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby">跳舞
                label>
            div>
        div>

        <div class="row">
            <div class="col-md-3">
                <label class="radio">
                    <input type="radio" name="hobby">唱歌
                label>
                <label class="radio">
                    <input type="radio" name="hobby">跳舞
                label>
            div>
        div>
        
        <div class="row">
            <div class="col-md-3">
                <label class="radio-inline">
                    <input type="radio" name="hobby">唱歌
                label>
                <label class="radio-inline">
                    <input type="radio" name="hobby">跳舞
                label>
            div>
        div>

        <button class="btn">按钮button>
        <button class="btn btn-danger">按钮button>
        <button class="btn btn-success">按钮button>
        <button class="btn btn-warning">按钮button>
        <button class="btn btn-primary">按钮button>
        <button class="btn btn-info">按钮button>
        <button class="btn btn-default">按钮button>
        <button class="btn btn-link">按钮button>
        br>
        
        <a href="#" class="btn btn-success">a标签a>
        <div class="btn btn-info">div标签div>
        <span class="btn btn-danger">span标签span><br>br>
        
        <button class="btn btn-danger">按钮button>
        <button class="btn btn-success btn-lg">按钮button>
        <button class="btn btn-warning btn-sm">按钮button>
        <button class="btn btn-warning btn-xs">按钮button>br>

        
        <button class="btn btn-info" onclick="alert('hello')" disabled="disabled">按钮button>
        
        <button class="btn btn-primary disabled" onclick="alert('hello')">按钮button>

5. 表单布局

    
    <form action="#" class="form-horizontal" role="form">
        
        <div class="form-group">
            <label for="uname" class="control-label col-md-2">姓名label>
            <div class="col-md-8">
                <input type="text" id="uname" class="form-control" placeholder="请输入用户名">
            div>
        div>
        <div class="form-group">
            <label for="upwd" class="control-label col-md-2">密码label>
            <div class="col-md-8">
                <input type="text" id="upwd" class="form-control" placeholder="请输入用户名">
            div>
        div>
        <div class="form-group">
            <label class="control-label col-md-2">爱好label>
            <div class="col-md-8">
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby">爱好
                label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby">跳舞
                label>
            div>
        div>
        <div class="form-group">
            <label class="control-label col-md-2">城市label>
            <div class="col-md-8">
                <select class="form-control">
                    <option>请选择城市option>
                    <option>上海option>
                    <option>北京option>
                select>
            div>
        div>
        <div class="form-group">
            <label for="remark" class="control-label col-md-2">简介label>
            <div class="col-md-8">
                <textarea id="remark" class="form-control">文本域textarea>
            div>
        div>
    form>
    <hr>

    <form class="form-inline">
        <div class="form-group">
            <label for="userName">姓名label>
            <input type="text" id="username" class="form-control" placeholder="请输入姓名">
        div>
        <div class="form-group">
            <label for="password">密码label>
            <input type="text" id="password" class="form-control" placeholder="请输入密码">
        div>
    form>

6. 缩略图

 <div class="panel panel-warning">
        <div class="panel-heading">
            <h2>电视合集h2>
        div>
        <div class="panel-body">
            <div class="row">
                
                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="imags/xmTV4-65.jpg" style="width: 240px;height: 360px;">
                        <h3>电视机h3>
                        <p>xmTV4-65p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart">span> 喜欢
                        button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil">span> 评论
                        button>
                    div>
                div>

                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="imags/xmTV4A-43.jpg" style="width: 240px;height: 360px;">
                        <h3>电视机h3>
                        <p>xmTV4-43p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart">span> 喜欢
                        button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil">span> 评论
                        button>
                    div>
                div>

                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="imags/xmTV4A-49.jpg" style="width: 240px;height: 360px;">
                        <h3>电视机h3>
                        <p>xmTV4-49p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart">span> 喜欢
                        button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil">span> 评论
                        button>
                    div>
                div>

                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="imags/xmTV4-55.jpg" style="width: 240px;height: 360px;">
                        <h3>电视机h3>
                        <p>xmTV4-55p>
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-heart">span> 喜欢
                        button>
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil">span> 评论
                        button>
                    div>
                div>
            div>
        div>
    div>

7. 模态框

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        打开模态框
    button>

    
    <button class="btn btn-primary" id="btn">
        模态框
    button>
    
    
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
   
        
        <div class="modal-header">
          <h4 class="modal-title">模态框头部h4>
          <button type="button" class="close" data-dismiss="modal">×button>
        div>
   
        
        <div class="modal-body">
          模态框内容..
        div>
   
        
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭button>
          <button type="button" class="btn btn-primary" id="submit">提交更改button>
        div>
   
      div>
    div>
  div>  
  <script type="text/javascript">
        $("#btn").click(function(){
            $("#myModal").modal("show");
        });

        $("#submit").click(function(){
            $("#myModal").modal("hide");
        })
  script>