⑧bootstrap组件 文字图片 下拉菜单 按钮组 使用基础案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>bootstraptitle>
    
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script>
    <style>
    style>
head>
<body>
<div class="container">
    <span class="glyphicon glyphicon-plus">span>
    <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-heart">span>a>
    <button type="button" class="btn btn-danger">
        <span class="glyphicon glyphicon-home">span> 注册
    button>
    <hr />

    <div class="btn-toolbar">
        <div class="btn-group">
            <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-education">span>a>
            <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-ice-lolly-tasted">span>a>
            <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-text-size">span>a>
            <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-education">span>a>
        div>
    div>
    <hr/>
    <button type="button" class="btn btn-default btn-sx">
        <span class="glyphicon glyphicon-star" aria-hidden="true">span> Star
    button>
    <hr />
    <div class="col-sm-3 col-sm-offset-2">
        <div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-education">span>
        span>
            <input type="text" class="form-control" />
        div>

    div>
div>
body>
html>
View Code

⑧bootstrap组件 文字图片 下拉菜单 按钮组 使用基础案例_第1张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>bootstraptitle>
    
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">script>
    
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script>
    <style>
    style>
head>
<body>
<div class="container">
    <div class="dropdown col-sm-3 col-sm-offset-2">
        <button type="button" class="btn btn-danger" data-toggle="dropdown" >
            <span class="glyphicon glyphicon-user">span>
            用户
            <span class="caret">span>
        button>
        <ul class="dropdown-menu dropdown-menu-left">
            <li class="dropdown-header">文件管理li>
            
            <li class="active"><a href="#">
                
                <span class="glyphicon glyphicon-off">span>
                文件a>li>
            <li class="disabled"><a  href="#">Disabled linka>li>
            <li><a href="#">文件a>li>
            <li class="divider">li>
            <li><a href="#">文件a>li>
        ul>

    div>
div>
body>
html>
View Code

⑧bootstrap组件 文字图片 下拉菜单 按钮组 使用基础案例_第2张图片⑧bootstrap组件 文字图片 下拉菜单 按钮组 使用基础案例_第3张图片

 

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>bootstraptitle>
    
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">script>
    
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script>
    <style>
    style>
head>
<body>
<div class="container">
    <hr />
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮组button>
        <button type="button" class="btn btn-default">按钮组button>
        <button type="button" class="btn btn-default">按钮组button>

    div>
    <hr />
    <div class="btn-group">
        <a href="#" class="btn btn-default">按钮组1a>
        <a href="#" class="btn btn-default">按钮组1a>
        <a href="#" class="btn btn-default">按钮组1a>

    div>
    <hr/>
    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-default">按钮组button>
            <button type="button" class="btn btn-default">按钮组button>
            <button type="button" class="btn btn-default">按钮组button>

        div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">按钮组button>
            <button type="button" class="btn btn-default">按钮组button>
            <button type="button" class="btn btn-default">按钮组button>

        div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">按钮组button>
            <button type="button" class="btn btn-default">按钮组button>
            <button type="button" class="btn btn-default">按钮组button>

        div>
        <hr/>
        <div class="btn-group btn-group-xs">
            
            <button type="button" class="btn btn-default btn-lg">按钮组button>
            <button type="button" class="btn btn-default btn-sm">按钮组button>
            <button type="button" class="btn btn-default">按钮组button>

        div>
    div>
    <hr/>
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮组button>
        <button type="button" class="btn btn-default">按钮组button>
        <button type="button" class="btn btn-default">按钮组button>
        <div class="btn-group dropdown">
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                下拉
                <span class="caret">span>
            button>
            <ul class="dropdown-menu">
                <li><a href="#">项目a>li>
                <li><a href="#">项目a>li>
                <li><a href="#">项目a>li>
                <li><a href="#">项目a>li>
            ul>

        div>

    div>
    <hr />
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-default">按钮组button>
        <button type="button" class="btn btn-default">按钮组button>
        <button type="button" class="btn btn-default">按钮组button>
    div>
    <div class="row">
        
        <div class="col-sm-6">
            <div class=" btn-group btn-group-justified">
                <div class="btn-group">
                    <button type="button" class="btn btn-default">按钮组1button>
                div>
                <div class="btn-group">
                    <button type="button" class="btn btn-default">按钮组2button>
                div>
                <div class="btn-group">
                    <button type="button" class="btn btn-default">按钮组3button>
                div>
            div>

        div>
    div>
div>
body>
html>
View Code

⑧bootstrap组件 文字图片 下拉菜单 按钮组 使用基础案例_第4张图片

转载于:https://www.cnblogs.com/ttzzyy/p/7620096.html

你可能感兴趣的:(javascript)