Bootstrap全局css样式-按钮、图片和表格、表单

Bootstrap全局css样式-按钮、图片

按钮:class="btn btn-default

图片

  • class="img-responsive":图片在任意尺寸都占100%
  • 图片形状
    • <img src="..." class="img-responsive img-rounded">
    • <img src="..." class="img-responsive img-circle">
    • <img src="..." class="img-responsive img-thumbnail">

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <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标签*必须*放在最前面 任何其他内容都*必须*跟随其后-->
        <title>Bootstrap Helloworld</title>
        
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
            
         <!-- jQuery(Bootstrap的所有javaScrpt插件都依赖) -->
         <script src="js/bootstrap.min.js"></script>
         <!-- 加载Bootstrap 的所有 javaScript插件 你也可以根据需要只加载单个插件 -->
         <script src="./js/bootstrap.js"></script>
    </head>
    <body>
        <a class="btn btn-default" href="#">Link</a>
        <button class="btn btn-default" type="submit">Button</button>
        <input class="btn btn-default" type="button" value="Input">
        <input class="btn btn-default" type="submit" value="Submit">
        <br>
        <button type="button" class="btn btn-primary">(首选项)Primary</button>
        
        <button type="button" class="btn btn-success">(成功)success</button>
        
        <button type="button" class="btn btn-info">(一般信息)Info</button>
        
        <button type="button" class="btn btn-warning">(警告)Warning</button>
        
        <button type="button" class="btn btn-danger">(危险)Danger</button>
        
        <button type="button" class="btn btn-link">(链接)Link</button>
        <br>
        <img src="img/QQ截图20220802162029.png" class="img-responsive img-rounded">
        <img src="img/QQ截图20220802162029.png" class="img-responsive img-circle">
        <img src="img/QQ截图20220802162029.png" class="img-responsive img-thumbnail">
    </body>
</html>
复制代码

运行结果

 

 

Bootstrap全局css样式-表格、表单

表格

  • table
  • table-bordered
  • table-hover

表单

  • 给表单项添加：class="form-control";

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <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标签*必须*放在最前面 任何其他内容都*必须*跟随其后-->
        <title>Bootstrap Helloworld</title>
        
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
            
         <!-- jQuery(Bootstrap的所有javaScrpt插件都依赖) -->
         <script src="js/bootstrap.min.js"></script>
         <!-- 加载Bootstrap 的所有 javaScript插件 你也可以根据需要只加载单个插件 -->
         <script src="./js/bootstrap.js"></script>
    </head>
    <body>
        <table class="table table-bordered table-hover">
            
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>23</td>
            </tr>
            
            <tr>
                <td>002</td>
                <td>张三</td>
                <td>23</td>
            </tr>
            
            <tr>
                <td>003</td>
                <td>张三</td>
                <td>23</td>
            </tr>
        </table>
        <br><br><br>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">check me out
                </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        
    </body>
</html>
复制代码

运行结果

posted @   baimingze  阅读(89)  评论(0)  编辑  收藏  举报
相关博文：
· Bootatrap组件_导航条、分页条和轮播图
· HTML-表单标签概述和表单项
· Bootstrap_全局CSS样式_按钮&图片和表格&表单
· Bootstrap_全局CSS样式_按钮&图片以及表格&表单
· Bootstrap_全局CSS样式——按钮&图片、表格&表单
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示