认识Bootstrap框架

最新推荐文章于 2021-06-04 01:05:20 发布

weixin_30314631

最新推荐文章于 2021-06-04 01:05:20 发布

阅读量93

点赞数

原文链接：http://www.cnblogs.com/WeWeZhang/p/5862139.html

版权

/**
 * 不失真
 */
方法1：矢量图
方法2：字体图标，特点是纯色显示

/**
 *Bootstrap
 */
Bootstrap，中文意思是“引导程序”
时下最流行的响应式布局的开源框架，设计目的是方便程序员开发

/**
 * Bootstrap的优势
 */
响应式布局，自动显示或隐藏控件
自动切换大图和小图，节省用户流量
国内最流行，不断地更新完善
界面组件美观大方

 /**
  * Bootstrap官方网站
  */
 http://getbootstrap.com/

 /**
  * Bootstrap中文网站
  */
http://v3.bootcss.com/

/**
 * Bootstrap版本历史
 */
2.3.2 目前停止维护，优点是支持更多浏览器，缺点是代码繁冗，功能较弱,目前基本没人用
3.x.x 最新稳定版，缺点是不支持IE7前的IE和早期的火狐，IE8效果未完善

/**
 * 项目结构
 */

<!doctype html>
<html lang="zh-CN">
    <head>
        <!--设置字符集-->
        <meta charset="UTF-8">
        <!--设置视口，声明在移动端的展示方式，-->
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
       <!--设置浏览器的引擎版本，edge表示最新版-->
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!--引入bootstrap核心CSS-->
        <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        <!--条件注释，满足条件时注释自动失效-->
        <!--[if lt IE 9]>
        <!--引入html5shiv，使浏览器识别H5标签-->
        <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <!--引入respond，使浏览器支持媒体查询-->
        <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <!--引入自定义CSS-->
        <link href="css/index.css" rel="stylesheet">
        <title>WeWeZhang</title>
    </head>
    <body>

        <!--引入jquery核心JS-->
        <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
        <!--引入bootstrap核心JS-->
        <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
        <!--引入自定义JS-->
        <script src="js/index.js"></script>
    </body>
</html>

/**
 * reset.css去哪了？
 */
Bootstrap.css内部使用Normalize.css，专业的css重置样式库

/**
 * 两种布局容器
 */
Bootstrap内部提供了两种布局容器:
<div class="container"></div>
<div class="container-fluid"></div>
container容器，宽高固定，支持响应式
container-fluid容器，占满视口，不支持响应式

/**
 * 媒体查询 mediaquery
 */
@media (max-width:0px) {
    .container {
        width：100%;
    }
}
@media (max-width:750px) {
    .container {
        width：62px;
    }
}
@media (max-width:970px) {
    .container {
        width：81px;
    }
}
@media (max-width:1170px) {
    .container {
        width：97px;
    }
}

body {
    font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;
}

/**
 * 开发约定
 */
防止样式冲突：加前缀，像“adobe”这种肯定经常发生样式冲突，建议写成“weAdobe”
边线：统一使用盒子的bottom线
防止样式覆盖：统一使用id限定，尽可能使用直接子代选择器

字体图标

优点：放大不会出现锯齿，不会失真

使用方法

1.所有图标都需要一个基类和对应每个图标的类

2.为了设置正确的内补（padding），务必在图标和文本之间添加一个空格

3.创建一个嵌套的 <i> 标签，并将图标类应用到这个 <i> 标签上 

4.图标类只能应用在不包含任何文本内容或子元素的元素上

/**
 * 字体图标CSS
 */
@font-face {
    font-family: 'weFont';
    src:
            url('../font/xxx.eot') format('embedded-opentype'),
            url('../font/xxx.svg') format('svg'),
            url('../font/xxx.ttf') format('truetype'),
            url('../font/xxx.woff') format('woff');
}
[class^="we-"],[class*=" we-"] {
    font-family: 'weFont';
    font-style: normal;
}
.we-laughing::before {
    content: '\e345';
    font-size: 16px;
}

<i class="glyphicon glyphicon-fire"></i>

<!--顶部通栏-->
        <header id="weHeader">
            <div class="weTopbar">
                <div class="container">
                    <div class="row">
                        <div class="col-md-2">
                            <a href="#" class="weStantLink">
                                <i class="glyphicon glyphicon-fire"></i>
                                <span>幻剑书盟</span>
                                <i class="glyphicon glyphicon-chevron-down"></i>
                                <img src="http://wx4.sinaimg.cn/mw690/005N4zdUgy1fctfhay8ozj30g40hpadd.jpg" alt="美眉" width="100px" />
                            </a>
                        </div>
                        <div class="col-md-5">
                            <a class="weStantLink" href="#">
                                <i class="zw-icon-telephone"></i>
                                <span>4006-89-4006（服务时间：9:00~21:00） 联系在线客服</span>
                            </a>
                        </div>
                        <div class="col-md-2">
                            <a class="weStantLink" href="#">财富登录</a>
                            <a class="weStantLink" href="#">常见问题</a>
                        </div>
                        <div class="col-md-3">
                            <a class="btn btn-danger btn-sm " href="#">免费注册</a>
                            <a class="btn btn-danger btn-sm " href="#">立即登录</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weNav"></div>
        </header>

.weStantLink {
   color: #2afffa;
}
.weStantLink:hover {
    text-decoration: none;
    color: #2afffa;
}

#weHeader {
    height: 100px;
    background-color: #ff5cec;
}
#weHeader > .weTopbar {
    background-color: #35fffa;
    border-bottom: 1px solid #e5e8ff;
}
#weHeader > .weTopbar >.container {
    background-color: #56ff41;
}
#weHeader > .weTopbar >.container >.row > div {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #ff525e;
}
#weHeader > .weTopbar >.container >.row > div:nth-of-type(2n) {
    background-color: #ffcd4d;
}
#weHeader > .weTopbar >.container >.row > div+div {
    border-left: 1px solid #4644ff;
}

#weHeader > .weTopbar >.container >.row > div > .weStantLink > img {
    display: none;
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -50px;
}
#weHeader > .weTopbar >.container >.row > div > .weStantLink:hover > img {
    display: block;
}

/**
 * 字体图标的制作
 * 境外网站iCOMOON　　 https://icomoon.io
 * 点击icoMoon App  点击import icons选择svg文件 选择需要的图标 点击generate font
 * Preferences设置字体名字类前缀 输入特殊的编码 下载zip解压到项目中的font文件夹下
 **/

            /**
             * Bootstrap静态导航条组件
             */
            <nav class="navbar navbar-default navbar-static-top">
                <div class="container">
                    <div class="navbar-header">
                        <a href="#" class="navbar-brand">幻剑书盟</a>
                    </div>
                    <ul class="nav navbar-nav">
                        <li><a href="#">玄幻</a></li>
                        <li><a href="#">穿越</a></li>
                        <li><a href="#">言情</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">我的</a></li>
                    </ul>
                </div>
            </nav>

转载于:https://www.cnblogs.com/WeWeZhang/p/5862139.html

weixin_30314631

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识Bootstrap框架

/** * 不失真 */方法1：矢量图方法2：字体图标，特点是纯色显示　　/** *Bootstrap */Bootstrap，中文意思是“引导程序”时下最流行的响应式布局的开源框架，设计目的是方便程序员开发　　/** * Bootstrap的优势 */响应式布局，自动显示或隐藏控件自动切换大图和小图，节省...
复制链接

扫一扫