基于Bootstrap快速搭建响应式网站

1.Bootstrap是什么

Bootstrap框架其实就是底层被写入了无数的Css样式和js交互效果的前端样式组件。

2.Bootstrap组成

基于Bootstrap快速搭建响应式网站_第1张图片

3.快速上手实例

注意:引用bootstrap的js 是基于jQuery实现的,首先要在前面引入jQuery;
bootstrap提供了强大的css内置样式:比如在小屏幕下隐藏hidden-x ,图片响应式:img-responsive .pull-left等一系列的内置样式。

	
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap-headertitle>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous">script>
    <style>
        .navbar {
      
            height: 70px;
        }

        .navbar-nav li a {
      
            width: 86px;
            height: 70px;
            text-align: center;
            line-height: 40px;
            transition: all .5s;
        }

        .navbar-nav li a:hover {
      

            background-color: transparent;
            border-bottom: 5px solid #f7d40a;
        }

        .navbar-toggle {
      
            margin-top: 20px;
        }

        .navbar-brand {
      
            line-height: 40PX;
        }

        .navbar-form {
      
            line-height: 50px;
        }

        .dropdown a {
      
            height: 70px;
            line-height: 50px;
        }

        .item-box li {
      
            border: 1px solid darkmagenta;
        }
    style>
head>

<body>
    <header id=header>
        <nav class="navbar navbar-inverse navbar-static-top ">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigationspan>
                        <span class="icon-bar">span>
                        <span class="icon-bar">span>
                        <span class="icon-bar">span>
                    button>
                    <a class="navbar-brand" href="#">loga>
                div>

                
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">主页 <span class="sr-only">(current)span>a>li>
                        <li class=""><a href="#">产品a>li>
                        <li><a href="#">文档a>li>
                        <li><a href="#">联系我们a>li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">选择城市 <span class="caret">span>a>
                            <ul class="dropdown-menu">
                                <li><a href="#">重庆a>li>
                                <li><a href="#">成都a>li>
                                <li><a href="#">广州a>li>
                                <li role="separator" class="divider">li>
                                <li><a href="#">北京a>li>
                                <li role="separator" class="divider">li>
                                <li><a href="#">武汉a>li>
                            ul>
                        li>
                    ul>
                    <form class="navbar-form navbar-right hidden-xs">
                        <div class="form-group ">
                            <input type="text" class="form-control" placeholder="Search">
                        div>
                        <button type="submit" class="btn btn-default">Submitbutton>
                    form>
                    <ul class="nav navbar-nav navbar-right  hidden-xs">
                        <li><a href="#">Linka>li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">个人中心span> <span class="caret">span>a>
                            <ul class="dropdown-menu">
                                <li><a href="#">退出登录a>li>
                                <li><a href="#">修改密码a>li>
                                <li><a href="#">Something else herea>li>
                                <li role="separator" class="divider">li>
                                <li><a href="#">Separated linka>li>
                            ul>
                        li>
                    ul>
                div>
            div>
        nav>
    header>
    <main class="container">
        <div class="row">
            <div class="col-md-5">
                 <h3>五、栅格系统(核心)*h3>
                <p>Bootstrap包含了一个强大的移动优先的网格系统,它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)
                    缩写 | 描述 | 范围
                    -------- | ----- | -----
                    xs |超小屏幕 |<576px sm | 小屏幕|576px ~768px md | 中等屏幕 | 768px~992px lg |大屏幕|992px~1200px xl | 超大屏幕 |>1200pxp> 
            div>
            <div class="col-md-7">
                <img class="img-responsive" src="./shange.png" alt="">
            div>
        div>
    main>

body>

html>

你可能感兴趣的:(Bootstrap)