BootStrap
关注
分享
扫一扫
lql_h
这个作者很懒，什么都没留下…
展开
-
Bootstrap介绍
一．Bootstrap概述Bootstrap最为重要的部分就是它的响应式布局，通过这种布局可以兼容PC端、PAD以及手机移动端的页面访问。Bootstrap下载及演示：国内文档翻译官网：http://www.bootcss.com二．Bootstrap特点Bootstrap非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：(1).跨设备、跨浏览器可以兼容所有...原创 2019-05-05 17:16:17 · 350 阅读 · 0 评论 -
标签页和工具提示插件
一．标签页标签页也就是通常所说的选项卡功能。//基本用法<ul class="nav nav-pills"><li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li><li><a href="#bootstrap" data...原创 2019-05-27 17:02:55 · 487 阅读 · 0 评论 -
弹出框和警告框插件
一．弹出框弹出框即点击一个元素弹出一个包含标题和内容的容器。//基本用法<button id="b" class="btn btn-danger btn-lg" data-toggle="popover" title="Bootstrap"data-content="Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计...原创 2019-05-27 17:07:16 · 535 阅读 · 0 评论 -
按钮和折叠插件
一．按钮可以通过按钮插件创建不同状态的按钮。//单个切换。<button class="btn btn-primary" data-toggle="button" autocomplete="off">按钮</button>注：在Firefox多次页面加载时，按钮可能保持表单的禁用或选择状态。解决方案是：添加autocomplete="off"。//...原创 2019-05-27 17:11:01 · 390 阅读 · 0 评论 -
轮播插件
一．轮播轮播插件就是将几张同等大小的大图，按照顺序依次播放。//基本实例<div id="myCarousel" class="carousel slide" style="width:900px"> <ol class="carousel-indicators"><li data-target="#myCarousel" data-slide...原创 2019-05-27 17:13:15 · 695 阅读 · 0 评论 -
附加导航插件
一．附加导航附加导航即粘贴在屏幕某处实现锚点功能。//基本实例。<body data-spy="scroll" data-target="#myScrollspy"><div class="container"> <div class="jumbotron" style="height: 150px"> <h2>...原创 2019-05-27 17:14:44 · 292 阅读 · 0 评论 -
项目实战--响应式导航[1]
一．响应式导航.logo { padding:0;}#myCarousel { margin: 50px 0 0 0; //轮播图和导航不会重叠}#navbar-collapse ul { margin-top:0;}.carousel-inner img { margin: 0...转载 2019-05-27 17:18:15 · 303 阅读 · 0 评论 -
项目实战--响应式轮播图[2]
一．响应式轮播图<div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active">&...转载 2019-05-27 17:19:42 · 417 阅读 · 0 评论 -
项目实战--首页内容介绍[上][3]
首页内容介绍[上]body { font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;}//字体设置.tab-h2 { font-s...转载 2019-05-27 17:22:46 · 256 阅读 · 0 评论 -
项目实战--首页内容介绍[下][4]
一．首页内容介绍[下]#footer { background-color: #eee; border-top: 1px solid #ccc; padding: 20px; text-align: center;}<footer id="footer"> <di...转载 2019-05-27 17:27:32 · 313 阅读 · 0 评论 -
项目实战--资讯内容[5,6]
1、资讯内容.jumbotron { background-image: url(../img/bg.jpg); margin: 50px 0 0 0; color: #ccc;}.jumbotron h1 { font-size: 26px; padding: 0 0 0 20px;...转载 2019-05-27 17:33:50 · 124 阅读 · 0 评论 -
下拉菜单和滚动监听插件
一．下拉菜单常规使用中，和组件方法一样，代码如下：//声明式用法<div class="dropdown" id="dropdown"> <button class="btn btn-primary" id="btn" data-toggle="dropdown" data-target="#dropdown"> 下拉菜单 &...原创 2019-05-27 16:54:42 · 903 阅读 · 0 评论 -
模态框插件
一．基本使用使用模态框的弹窗组件需要三层div容器元素，分别为modal(模态声明层)、dialog(窗口声明层)、content(内容层)。在内容层里面，还有三层，分别为header(头部)、body(主体)、footer(注脚)。//基本实例<!-- 模态框声明 --><div class="modal fade" id="myModal" tabindex=...原创 2019-05-27 16:51:28 · 287 阅读 · 0 评论 -
列表组面板和嵌入组件
一．列表组组件列表组组件用于显示一组列表的组件。//列表项带勋章<ul class="list-group"> <li class="list-group-item">1.这是首页</li> <li class="list-group-item">2.这是第二页 <span class="badge"...原创 2019-05-27 16:48:50 · 284 阅读 · 0 评论 -
排版样式
页面排版Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用。1.页面主体Bootstrap将全局font-size设置为14px，line-height行高设置为1.428(即20px)；<p>段落元素被设置等于1/2行高(即10px)；颜色被设置为#333。//创建包含段落突出的文本<p>Bootstrap框架</p>&...原创 2019-05-05 17:22:54 · 306 阅读 · 0 评论 -
表格和按钮
一．表格Bootstrap提供了一些丰富的表格样式供开发者使用。1.基本格式//实现基本的表格样式<table class="table">2.条纹状表格//让<tbody>里的行产生一行隔一行加单色背景效果<table class="table table-striped">注：表格效果需要基于基本格式.table3.带边框...原创 2019-05-05 17:25:21 · 350 阅读 · 0 评论 -
表单和图片
一．表单Bootstrap提供了一些丰富的表单样式供开发者使用。1.基本格式//实现基本的表单样式<form><div class="form-group"><label>电子邮件</label><input type="email"class="form-control"placeholder="请输入邮件">...原创 2019-05-05 17:29:04 · 448 阅读 · 0 评论 -
栅格系统
一．移动设备优先在HTML5的项目中，我们做了移动端的项目。它有一份非常重要的meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放<meta name="viewport"content="width=device-width,initial-scale=1,maximum-scal...原创 2019-05-05 17:32:27 · 2896 阅读 · 0 评论 -
辅组类和响应式工具
一．辅助类Bootstrap在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、显示关闭图标等等。1.情景文本颜色text-muted柔和灰text-primary主要蓝text-success成功绿text-info信息蓝text-warning警告黄text-danger危险红//各种色调的字体<p class="text-muted...原创 2019-05-27 16:23:48 · 806 阅读 · 0 评论 -
图标菜单按钮组件
一．小图标组件Bootstrap提供了免费的263个小图标（数了两次），具体可以参考中文官网的组件链接：http://v3.bootcss.com/components/#glyphicons。部分图标如下：部分图标可以使用<i>或<span>标签来配合使用，具体如下：//使用小图标<i class="glyphicon glyphicon...原创 2019-05-27 16:29:02 · 546 阅读 · 0 评论 -
输入框和导航组件
一、输入框组件文本输入框就是可以在<input>元素前后加上文字或按钮，可以实现对表单控件的扩展。//在左侧添加文字<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="...原创 2019-05-27 16:35:49 · 256 阅读 · 0 评论 -
路径分页标签和徽章组件
一．路径组件路径组件也叫做面包屑导航。//面包屑导航<ol class="breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">产品列表</a></li> <li c...原创 2019-05-27 16:38:41 · 168 阅读 · 0 评论 -
巨幕页头缩略图和警告框组件
一．巨幕组件巨幕组件主要是展示网站的关键性区域。//在固定的范围内，有圆角<div class="container"> <div class="jumbotron"> <h3>网站标题</h3> <p>我是网站的详细简介！</p> <p><a h...原创 2019-05-27 16:40:45 · 175 阅读 · 0 评论 -
进度条媒体对象和Well组件
一．Well组件这个组件可以实现简单的嵌入效果。//嵌入效果<div class="well">Bootstrap</div>//有lg和sm两种可选值<div class="well well-lg">Bootstrap</div><div class="well well-sm"> Bootst...原创 2019-05-27 16:44:42 · 193 阅读 · 0 评论 -
项目实战--案例和关于[7]
一．案例内容#case { padding: 40px 0; background-color: #eee; text-align: center;}#case h4 { color: #666;}#case p { color: #666; line-hei...转载 2019-05-27 17:37:50 · 263 阅读 · 0 评论