bower的安装、Bootstrap的安装及简单使用

时间：2024-04-07 18:21:32

安装：
1.下载引入css和js
2.通过npm去安装
3.通过bower安装

 Bower： 包管理工具 可以通过bower 去搜索、下载安装、卸载所有发布在github里面的插件

在安装bower之前需要安装node 和git
Bower的安装 跟使用npm 安装其他插件 一模一样 cnpm(npm) i bower -g
 
Bower的使用：
1.搜索search
2.下载安装 i
3.卸载 uninstall
 
搜索：
bower search bootstrap
bower search jquery
 
安装：
Bower i bootstrap
Bower i jquery
 
卸载
Bower unistall bootstrap
 
Bower 在安装的时候 如果 有需要安装的 其他插件 会自动安装 需要的插件
安装好了之后会在 当前的工程里面 多了一个文件夹

bower的安装、Bootstrap的安装及简单使用

 手动安装Bootstrap：

bower的安装、Bootstrap的安装及简单使用

或者直接使用cdn的方式
https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js 
https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css 

栅格布局

使用栅格布局：把一行分成了12等份 想让一列占几份 就分几份 如果超出12份 会自动流下来
根据不同屏幕的尺寸 有不同表示12等份的名字

bower的安装、Bootstrap的安装及简单使用

注意：如果想使用栅格布局  使用栅格布局的直接父元素必须是row 
注意：如果希望在某个尺寸的屏幕以上显示一行  需要以最小屏幕为基准
比如：md 已上都是一行6列 md-6   以相同的列数显示lg就不用设置

Bootstrap的使用




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Bootstrap的css文件-->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    
</head>
<body>


<!--最小屏幕xs 显示2个-->
<!--中等屏幕sm显示3个-->
<!--大屏幕md显示4个-->
<!--超大屏幕lg-->
<!--<div class="row">-->
    <!--<div class="col-xs-6 col-sm-4  col-md-3 col-md-3 colorView">ss</div>-->
    <!--<div class="col-xs-6 col-sm-4 col-md-3 colorView">ss</div>-->
    <!--<div class="col-sm-4 col-md-3 hidden-xs colorView">ss</div>-->
    <!--<div class="col-md-3 hidden-xs hidden-sm colorView">ss</div>-->
<!--</div>-->


<!--md以上屏幕均为一行六列，以下屏幕为六列一行-->
<div class="container-fluid">
<div class="row ">
    <div class="col-md-2 colorView">ss</div>
    <div class="col-md-2 colorView">ss</div>
    <div class="col-md-2 colorView">ss</div>
    <div class="col-md-2 colorView">ss</div>
    <div class="col-md-2 colorView">ss</div>
    <div class="col-md-2 colorView">ss</div>
</div>
</div>



<!--列偏移-->
<ul class="row">
    <li class="col-md-4 colorView col-md-offset-2">按钮</li>
    <li class="col-md-4 colorView col-md-offset-2">按钮</li>
</ul>


<!--80%屏-->
<div class="container">
    <!--列表组-->
    <ul class="list-group">
        <li class="list-group-item-danger">张</li>
        <li class="list-group-item-heading">牛</li>
        <li class="list-group-item-success">鸡</li>
        <li class="list-group-item-info">幅</li>
        <li class="list-group-item-warning">丁</li>
    </ul>
</div>

    <!--全屏-->
<div class="container-fluid">
    <!--导航 胶囊式标签页-->
    <ul class="nav nav-pills nav-stacked">
        <li role="presentation" class="active"><a href="#">张</a></li>
        <li role="presentation"><a href="#">牛</a></li>
        <li role="presentation"><a href="#">鸡</a></li>
    </ul>
</div>




<!--<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>-->
</body>
</html>






style.css代码：




*{
    margin: 0;
    padding: 0;
}

.colorView{
    height: 200px;
    background-color: #8d5fff;
    border:2px solid #ff4400;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
ul{
    list-style: none;
}










相关文章