前端-bootstrap-长期维护

 ###############    bootstrap简介     ################

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
在使用Bootstrap之后: 各种命名都统一并且规范化。 页面风格统一,画面和谐。
中文地址:http://www.bootcss.com/,下载用于生产环境的 Bootstrap

 

 ###############   bootstrap布局容器和栅格系统     ################

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>bootstrap第一个示例title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        .row div {
            border: 1px solid red;
        }
    style>
head>
<body>



<div class="container">
    

    
    <div class="row">

        
        <div class="col-md-1 col-xs-4">占1列div>
        <div class="col-md-10 col-xs-4">占10列div>
        <div class="col-md-1 col-xs-4">占1列div>
    div>
    <div class="row">
        
        <div class="col-md-5 col-md-offset-2">第二行 左边空两列div>
    div>
    <div class="row">
        <div class="col-md-3">占3列的divdiv>
        <div class="col-md-6">占6列的divdiv>
        
        <div class="col-md-6">占6列的divdiv>
    div>
    <div class="row">
        
        <div class="col-md-3 col-md-push-9">占3列的divdiv>
        <div class="col-md-6">占6列的divdiv>
    div>
div>

<script src="jquery-3.2.1.min.js">script>
<script src="bootstrap/js/bootstrap.min.js">script>

body>
html>

 

 ###############   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>媒体查询title>
    <style>
        .c {
            height: 100px;
            width: 100px;
        }
        .c1 {
            background-color: red;
        }

/*当打开网页的设备是一个显示器设备,并且显示器的宽度小于600px时,使用下面的样式*/
        @media screen and (max-width: 400px) {
            .c1 {
                background-color: green;
            }
        }
    style>

head>
<body>
<div class="c c1">div>
body>
<html>

 

 ###############   bootstrap的常用样式     ################

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
head>
<body>

<div class="container">

    
    <h1>h1. Bootstrap heading
        
        <small>Secondary textsmall>
    h1>
    <h2>h2. Bootstrap heading
        <small>Secondary textsmall>
    h2>
    <h3>h3. Bootstrap heading
        <small>Secondary textsmall>
    h3>
    <h4>h4. Bootstrap heading
        <small>Secondary textsmall>
    h4>
    <h5>h5. Bootstrap heading
        <small>Secondary textsmall>
    h5>
    <h6>h6. Bootstrap heading
        <small>Secondary textsmall>
    h6>

    
    <p>
        世情薄,人情恶,世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶
    p>

    
    <p class="lead">
        世情薄,
        
        <del>人情恶del>
        ,世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶
    p>

    
    <p>高亮坐在我的
        <mark>右边mark>p>

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


    
    <address>
        <strong>luffycity, Inc.strong><br>
        沙河地铁站往南走1500米,路左侧<br>
        赋腾国际创客中心A座2005<br>
        <abbr title="Phone">P:abbr> (123) 456-7890
    address>

    <address>
        <strong>Alex Listrong><br>
        <a href="mailto:#">[email protected]a>
    address>

    
    <blockquote>
        <p>技术的提升只是量的积累,思想的提升才是质的飞跃。p>
        <footer>老男孩思想footer>
    blockquote>

    
    <ul class="list-inline">
        <li>111li>
        <li>222li>
        <li>333li>
    ul>


    
    <dl class="dl-horizontal">
        <dt>Alex Lidt>
        <dd>抽烟 烫头 大马猴dd>
        <dt>Euismoddt>
        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.dd>
        <dd>Donec id elit non mi porta gravida at eget metus.dd>
        <dt>Malesuada portadt>
        <dd>Etiam porta sem malesuada magna mollis euismod.dd>
        <dt>Felis euismod semper eget laciniadt>
        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
            risus.
        dd>
    dl>
div>


<code><div>code>
<code>print("hello world!")code>



<p>按住键盘上的<kbd>ctrlkbd>键,就支持批量操作p>





<table class="table table-bordered table-striped table-hover table-condensed">
    <thead>
    <tr>
        <th>#th>
        <th>姓名th>
        <th>爱好th>
        <th>操作th>
    tr>
    thead>
    <tbody>
    
    
    <tr class="success">
        <td>1td>
        <td>Egontd>
        <td>街舞td>
        <td>
            <button class="edit-btn">编辑button>
            <button class="delete-btn">删除button>
        td>
    tr>
    <tr class="error">
        <td>2td>
        <td>Alextd>
        <td>烫头td>
        <td>
            <button class="edit-btn">编辑button>
            <button class="delete-btn">删除button>
        td>
    tr>
    
    tbody>
table>
<script src="jquery-3.2.1.min.js">script>
<script src="bootstrap/js/bootstrap.min.js">script>
body>
html>

 

 ###############   bootstrap登陆页面实例     ################

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录注册示例title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        body {
            background-color: #eee;
        }

        #login-box {
            margin-top: 100px;
        }
    style>
head>
<body>

<div class="container">
    <div class="row">
        <div id="login-box" class="col-md-4 col-md-offset-4">
            <h3 class="text-center">请登录h3>
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">Emaillabel>
                    <div class="col-sm-9 has-error">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                        <span class="help-block">邮箱不能为空span>
                    div>
                div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-3 control-label">Passwordlabel>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    div>
                div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            label>
                        div>
                    div>
                div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <button type="submit" class="btn btn-primary ">Sign inbutton>
                    div>
                div>
            form>
        div>
    div>
div>

<script src="jquery-3.2.1.min.js">script>
<script src="bootstrap/js/bootstrap.min.js">script>
body>
html>

 

 ###############    bootstrap组件-fontawesome图标     ################

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Font-awesometitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
head>
<body>

<div class="container">
    
    <i class="fa fa-weixin" style="color: green">i>
    <i class="fa fa-weibo" aria-hidden="true">i>
    <i class="fa fa-weibo fa-lg" aria-hidden="true">i>
    <i class="fa fa-weibo fa-2x" aria-hidden="true">i>
    <i class="fa fa-weibo fa-3x" aria-hidden="true">i>
    <i class="fa fa-weibo fa-5x" aria-hidden="true">i>
    <i class="fa fa-weibo fa-5x fa-rotate-90" aria-hidden="true">i>
    <i class="fa fa-weibo fa-5x fa-rotate-180" aria-hidden="true">i>
    <i class="fa fa-weibo fa-5x fa-rotate-270" aria-hidden="true">i>
    <i class="fa fa-weibo fa-5x fa-flip-horizontal" aria-hidden="true">i>
    <i class="fa fa-weibo fa-5x fa-flip-vertical" aria-hidden="true">i>

    <span class="fa-stack fa-5x">
        <i class="fa fa-weibo fa-stack-1x">i>
      <i class="fa fa-ban fa-stack-2x text-danger">i>
    span>


    <button class="btn btn-danger"><i class="fa fa-trash-o">i> 删除button>


    <div class="list-group">
        <a class="list-group-item" href="#"><i class="fa fa-home fa-fw">i>  主页a>
        <a class="list-group-item" href="#"><i class="fa fa-book fa-fw">i>  分类a>
        <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true">i>  应用a>
        <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true">i>  设置a>
    div>

    <i class="fa fa-spinner fa-spin fa-3x fa-fw">i>
    <span class="sr-only">Loading...span>

    <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw">i>
    <span class="sr-only">Loading...span>

    <i class="fa fa-refresh fa-spin fa-3x fa-fw">i>
    <span class="sr-only">Loading...span>

    <i class="fa fa-cog fa-spin fa-3x fa-fw">i>
    <span class="sr-only">Loading...span>

    <i class="fa fa-spinner fa-pulse fa-3x fa-fw">i>
    <span class="sr-only">Loading...span>
div>
<script src="jquery-3.2.1.min.js">script>
<script src="bootstrap/js/bootstrap.min.js">script>
body>
html>

 

 ###############    bootstrap组件-常用组件     ################

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        #d1 {
            background-color: red;
        }
        #d2 {
            background-color: yellow;
        }
        #d3 {
            background-color: deeppink;
        }
    style>
    

head>
<body>
<div class="container">
    <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Leftbutton>
  <button type="button" class="btn btn-default">Middlebutton>
  <button type="button" class="btn btn-default">Middle2button>
  <button type="button" class="btn btn-default">Rightbutton>
div>


    
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#d1" data-toggle="tab">个人主页a>li>
      <li role="presentation"><a href="#d2" data-toggle="tab">个人详情页a>li>
      <li role="presentation"><a href="#d3" data-toggle="tab">消息页面a>li>
    ul>

    <div class="tab-content">
        <div role="tabpanel" id="d1" class="tab-pane active">这是个人主页div>
        <div role="tabpanel" id="d2" class="tab-pane">这是一个详情页div>
        <div role="tabpanel" id="d3" class="tab-pane">消息页面div>
    div>


    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#">Homea>li>
      <li role="presentation"><a href="#">Helpa>li>
      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret">span>
        a>
        <ul class="dropdown-menu">
          <li><a href="#">Actiona>li>
          <li><a href="#">Another actiona>li>
          <li><a href="#">Something else herea>li>
          <li role="separator" class="divider">li>
          <li><a href="#">Separated linka>li>
        ul>
      li>
    ul>
div>

<script src="jquery-3.2.1.min.js">script>
<script src="bootstrap/js/bootstrap.min.js">script>
body>
html>

 

 ###############    bootstrap的js插件     ################

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
head>
<body>



<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
        <li data-target="#carousel-example-generic" data-slide-to="1">li>
        <li data-target="#carousel-example-generic" data-slide-to="2">li>
    ol>

    
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="./imgs/banner_1.jpg" alt="...">
            <div class="carousel-caption">
                <h1>第一页介绍h1>
                <p>老实人的恶毒,像...p>
            div>
        div>
        <div class="item">
            <img src="./imgs/banner_2.jpg" alt="...">
            <div class="carousel-caption">

            div>
        div>
        <div class="item">
            <img src="./imgs/banner_3.jpg" alt="...">
            <div class="carousel-caption">
            div>
        div>
    div>

    
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
        <span class="sr-only">Previousspan>
    a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
        <span class="sr-only">Nextspan>
    a>
div>


<hr>
<button class="btn btn-success" data-toggle="modal" data-target="#i1">点我弹出button>


<div id="i1" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×span>
                button>
                <h4 class="modal-title">模态框h4>
            div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Emaillabel>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                        div>
                    div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Passwordlabel>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        div>
                    div>
                form>
            div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消button>
                <button type="button" class="btn btn-primary">保存button>
            div>
        div>
    div>
div>
<script src="jquery-3.2.1.min.js">script>

<script src="bootstrap/js/bootstrap.min.js">script>
<script>
    $('.carousel').carousel({
        interval: 2000
    });
script>
body>
html>

 

 ###############     结束线    ################

你可能感兴趣的:(前端-bootstrap-长期维护)