使用 Bootstrap

2018-12-31  本文已影响0人  索伦x

引言

  1. 掌握Boostrap的基本用法
  2. 学会前端的快速制作
  3. 学会页面渲染思想

Bootstrap 简介

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目。

为什么使用 Bootstrap？

Bootstrap 环境安装

Bootstrap 网格系统

基本的网格结构
<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>

媒体查询的用法

@media screen and (max-width: 800px) {
 body {
 background-color:lightblue;
 }
}

语法：@media [not] 媒体类型 and (媒体特性…) {你的样式}
EX : @media screen and (min-width:600px) and (max-width:900px){…..}

1. 最大宽度max-width @media screen and (max-width:480px)
2. 最小宽度min-width @media screen and (min-width:900px)
3. 多个媒体特性使用 @media screen and (min-width:600px) and (max-width:900px)
4. 设备屏幕的输出宽度Device Width
 <link rel="stylesheet" media="screen and (max-device-width:480px)"
href="iphone.css" />
5. not关键词 使用关键词“not”是用来排除某种制定的媒体类型 @media not print and (max-width: 1200px){样式代码}
6. only关键词, only用来指定某种特定的媒体类型
/*在不支持媒体查询的浏览器中解析到带only的媒体查询时，会将only视为媒体类型。（由于没有only这种媒体类型，因此将不会被应用）*/
media="only"

Bootstrap 表格

有了Bootstrap，只需写好html内容结构，加上Bootstrap写好的专用于表格的类样式即可实现精美的效果

表格样式
行列样式<tr><th><td> 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 精简表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-striped">
    <thead>
        <tr>
            <th>名称</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sachin</td>
        </tr>
    </tbody>
</table>
</body>
</html>

Bootstrap 字体图标

Bootstrap 捆绑了 200 多种字体格式的字形。

字体图标使用示例：
<span class="glyphicon glyphicon-user"></span> User

附A: 如何学习Bootstrap

基本样式 组件 插件
按钮 字体 模态窗口
表单 下拉菜单 可切换导航栏
表格 导航栏 提示工具
图片 分页 折叠
文本 标签 轮播
背景 徽章
布局 超大屏幕
. 副标题
. 缩略图
. 警告
. 进度条
. 面板
. 嵌入效果

附B: 特效

面包屑导航
<ul class="breadcrumb">
  <li><a href="#">First</a><li>
  <li><a href="#">Second</a><li>
  <li><a href="#">Third</a><li>
</ul>
进度条
<div class="container" style="margin-top: 50px">
    <div class="progress">
        <div class="progress-bar progress-bar-danger" style="width: 10%;">
            <span class="sr-only">10% 完成（危险）</span>
        </div>
    </div>
</div>
轮播图
<div id="myCarousel" class="carousel slide" style="width: 50%;margin:auto">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="https://www.runoob.com/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="https://www.runoob.com/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
        </div>
        <div class="item">
            <img src="https://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
模态框
<!-- 按钮触发模态框 -->
<button class="btn btn-success" style="margin-top: 50px;margin-left: 50px" data-toggle="modal" data-target="#myModal">
    测试模态框
</button>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">
                在这里添加一些文本
            </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><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
上一篇 下一篇

猜你喜欢

热点阅读