bootstarp

最新推荐文章于 2023-10-11 10:21:17 发布

JUSTHUSKY

最新推荐文章于 2023-10-11 10:21:17 发布

阅读量235

点赞数

文章标签： bootstrap html css

本文链接：https://blog.csdn.net/JUSTHUSKY/article/details/113503283

版权

1.bootstrap简介

Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架。

1. Bootstrap的优势

移动设备优先：框架包含了贯穿于整个库移动设备优先的样式
浏览器支持：所有的主流浏览器都支持 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机

2.Bootstrap的使用

1.表格

引入css：
标签
- table
- caption：表格介绍或总结
- thead：标题行(第一行)、th：居中加粗（用于thead）
- tbody：表格主体
- tr、td
类样式
- .table：基本样式，只有横线
- .table-striped ：主体行中隔行变色
- .table-bordered ：添加边框
- .table-hover ：悬停高亮显示
- .table-condensed ：紧凑表格
- .table-responsive：设置为响应式表格，小于768px，出现边框。
情景色类样式:

适合应用在：th、tr、td中

active：激活效果
info：表示普通的提示信息
.success：绿色，积极颜色
.warning ：警告，黄色
.danger：表示危险，红色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-luUwGXzy-1612149097012)(C:\Users\HUSKY\AppData\Roaming\Typora\typora-user-images\image-20210130165715027.png)]

 <!--定义类样式-->
<table class="table  table-striped table-bordered table-hover ">
   <caption>信息表</caption>  <!--信息介绍-->
        <thead><!--标题行-->
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>  
       </thead>
	<tbody>
  		<tr class="active"><!--主体第一行-->
           <td>active</td>
            <td>123</td>
             <td>男</td>
		</tr>
	</tbody>
</table>

2.表单

.form-inline：让所有表单元素居于一行，小于768px时还有成移动端样式。

<body style="padding:100px">
    <form action="" class="form-inline">
        <!-- <form action="" class="form-inline">内联样式 -->
        <div class="form-group"><!--组-->
            <label>邮箱</label>
            <input type="email" class="form-control" placeholder="请输入邮箱">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" placeholder="请输入密码">
        </div>
        <button class="btn btn-primary">提交</button>
    </form>
</body>

2.5表单控件

1.输入框

   <form>
        <div class="form-group">
            <label for="">输入框</label>
            <input type="text" class="form-control" placeholder="请输入文本...">
        </div>
    </form>

2.文本框

        <div class="form-group">
            <label>文本框</label>
            <textarea cols="30" rows="10" class="form-control"></textarea>
        </div>

3.复选框

checkbox：默认；
checkbox-inline：内联

      <div class="checkbox">
            <label>
                <input type="checkbox">抽烟
            </label>

4.复选按钮

基本不用复选框

        <div class="btn-group" data-toggle="buttons">
               <!-- data-toggle="buttons":隐藏选中框 -->
            <label class="btn btn-primary" >
                <input type="checkbox">音乐
            </label>
            <label class="btn btn-primary">
                <input type="checkbox">篮球
            </label>
            <label class="btn btn-primary">
                <input type="checkbox">游泳
            </label>
      </div>
            <!-- 引入js文件 -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

5.单选框

   <label class="radio" >
                <input type="radio" name="sex">男
   </label>
<label class="radio">
           <input type="radio" name="sex">女
</label>

6.单选按钮

  <div class="btn btn-group" data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="sex">男
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="sex">女
            </label>
 </div>

3.按钮

btn btn-default btn-lg

<body style="padding:100px">
    <!-- 按钮样式与大小 -->
    <button class="btn btn-default">默认按钮（笔记本）</button>
    <button class="btn btn-primary btn-lg">主要超大按钮(大屏台式机)</button>
    <button class="btn btn-success btn-sm">成功小按钮(平板)</button>
    <button class="btn btn-info btn-xs">信息超小按钮(手机)</button>
    <button class="btn btn-warning">警告按钮</button>
    <button class="btn btn-danger">危险按钮</button>
    <button class="btn btn-link">连接按钮</button>
    <!-- 按钮状态 -->
    <button class="btn btn-default">默认按钮</button>
    <!-- 激活状态：呈现为被按压的外观（深色的背景、深色的边框、阴影）-->
    <button class="btn btn-default active">激活按钮</button>
    <button class="btn btn-default" disabled>禁用按钮</button>
</body>

4.图片

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框
.img-responsive:

<img src="../imgs/126.jpg" class="img-rounded">
    <img src="../imgs/126.jpg" class="img-circle" >
    <img src="../imgs/126.jpg" class="img-thumbnail" style="padding:10px">
    <!-- <img src="../imgs/hudei.jpg" class="img-responsive" width="100%">响应式图片，可随窗口变化 -->

5.下拉菜单

外部容器绑定：dropdown；按钮添加事件源：data-toggle=“dropdown”；ul绑定：dropdown-menu

<body>
   <div class="dropdown">
       <button class="btn btn-primary" data-toggle="dropdown">拉钩教育<span class="caret"></span></button>
       <ul class="dropdown-menu">
           <li><a href="#">java</a></li>
           <li><a href="#">html</a></li>
           <li><a href="#">c++</a></li>
       </ul>
   </div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

6.分页组件

pagination

<ul class="pagination " ><!--pager-->
   <li class="previous"><a href="#">&laquo</a></li>
    <li class="active"><a href="#" >1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li  class="next"><a href="#">&raquo</a></li>
</ul>

7.栅格系统

container、row
bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子
当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果

    <div class="container">
        <div class="row">
            <!-- col-lg-3 当大屏幕时，一个div占3份，一行显示4个div -->
			<!--依次类推-->
                <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
                <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
                <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
                <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
                <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
                <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
                <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
                <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
                <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
                <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
                <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
                <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
                
        </div>
    </div>

8.缩略图组件

thumbnail
配合响应式的栅格系统。

    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="../imgs/126.jpg" alt="">
                </div>
          </div>
       </div>
</div>

在此基础删实现定义内容

    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="../imgs/126.jpg" alt="">
                    <div class="caption"><!--介绍，让文字不在紧贴边框-->
                        <h3>图文并茂</h3>
                        <p>这是图文的介绍区</p>
                        <p>
                            <a href="#" class="btn btn-primary">试看</a>
                            <a href="#" class="btn btn-warning">购买</a>
                        </p>
                    </div>
                </div>
            </div>
         </div>
     </div>

9.模态框组件

触发按钮绑定：
1. 触发类型data-toggle=“modal” ；
2. 触发节点:data-target="#myModal"
data-backdrop=“static” 点击黑灰色背景，不会关闭模态框
定义模态框组件（modal）、声明窗口（modal-dialog）、声明内容（modal-content）、标题（modal-title）、信息（modal-body、尾部（modal-footer）
取消按钮绑定:data-dismiss=“modal”

<body>
    <button class="btn btn-warning" data-toggle="modal" data-target="#mymodal">弹窗</button>
    <!-- 声明定义模态框组件 -->
    <div class="modal" id="mymodal" data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">友情提示</h4>
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-body">
                    服务器错误，请稍后再试！
                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-footer">
                    <button class="btn btn-info">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

3.案例

1.首页轮播大图

data-ride=“carousel”：自动轮播5s一次
data-slide-to：向轮播底部创建一个原始滑动索引，滑动特定索引
data-slide：接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。图标样式在官网查阅

<body>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- 滚动圆点区 -->
        <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#myCarousel"></li>
            <li data-slide-to="1" data-target="#myCarousel"></li>
            <li data-slide-to="2" data-target="#myCarousel"></li>
        </ol>
        <!-- 图片区 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../imgs/w1.jpg">
            </div>
            <div class="item">
                <img src="../imgs/早坂爱.png">
            </div>
            <div class="item">
                <img src="../imgs/w2.jpg">
            </div> 
        </div> 
        <!-- 左右切换按钮 -->
        <a href="#myCarousel" data-slide="prev" class="carousel-control left">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#myCarousel" data-slide="next" class="carousel-control right">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
    <!-- 左右切换 -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

2.响应式导航条

<body>
    <!-- 默认导航条样式 -->
    <div class="navbar navbar-default">
        <!-- 响应式容器 -->
        <div class="container">
            <!-- 导航栏头部 -->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">XX管理系统</a>
                <!-- data-toggle="collapse" 数据切换的事件，特效是折叠-->
                <!-- data-target="#nav" 折叠效果的目标是下面的#nav容器-->
                <button class="navbar-toggle" data-toggle="collapse" data-target="#nav">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- 导航项 -->
            <div id="nav" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#"> <span class="glyphicon glyphicon-home">
                            </span>主页</a> </li>
                    <li> <a href="#"> <span class="glyphicon glyphicon-camera">
                            </span> 产品</a> </li>
                    <li> <a href="#"> <span class="glyphicon glyphicon-tint">
                            </span>竞争</a> </li>
                    <li> <a href="#"> <span class="glyphicon glyphicon-earphone">
                            </span> 联系我们</a> </li>
                </ul>
            </div>
        </div>
    </div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

产品

JUSTHUSKY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstarp

1.bootstrap简介Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架。1. Bootstrap的优势移动设备优先：框架包含了贯穿于整个库移动设备优先的样式浏览器支持：所有的主流浏览器都支持 Bootstrap。响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机2.Bootstrap的使用1.表格引入css：标签tablecaption：表格介绍或总结thead：标题行(第一行)、th：居中加粗（用于th
复制链接

扫一扫