bootstrap页面效果图

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, i…

Bootstrap页面标题(PageHeader)是个不错功能,它会网页的标题的四周添加适当的间距,当一个网页中有多个标题并且每个标题之间需要添加一定适当的间距,使用页面标题是非常有用的.如果需要使用页面标题,你把标题放到一个class.pageheader类的div中. 实例: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;…

bootstrap 页面标题

页面标题会突出显示,当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题显得特别有用,页面标题会给不是页面标题之间的元素加上横线加以区分,以突出标题显示. 页面标题类显示效果图代码: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 页面标题</title> <link href="/bootstrap/css/bootstrap.min.css"…

Bootstrap~页面的布局

回到目录 Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要说下页面的布局,这是最基础的东西了,当我们设计一个站点时,应该为它设计一个全局性的统一的规范页面,这种页面我们叫它布局页,而在页面上体现出来的东西,就是布局的元素,在bootstrap里当然也是不可缺少的东西. Bootstrap的布局是一种栅格系统,即它由行和列组成,在使用时需要为页面内容和栅格系…

Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar navbar-fixed-top:导航固定显示在顶部,对应的navbar-fixed-bottom:导航固定显示在页面底部 .brand:提示文字或者主题 .active:激活选中 .navbar-search:导航搜索搜索表单: <form class='navbar-search'> &l…

Bootstrap页面布局9 - BS列表

列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编辑器</li> <li>TinyMCE编辑器</li> <li>Kindeditor编辑器</li> </ul> 如图: 有序列表: <ol> <li>Ueditor编辑器</li> <li>…

让你快速搭建一个bootstrap页面

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 360浏览器相关设置:h…

bootstrap页面布局

首先,我们必须明确,在这四种角色登录网站,看到页面是不同,这里不仅涉及到后端的权限控制,还涉及到前端页面的布局,区分好这些角色看的东西哪些是相同的,哪些又是不同的呢,这个必须在这里想明白,所以要做好页面布局页面布局,去到bootstrap中文网,寻找适合自己的布局实例,然后右击保存页面下载代码,copy代码到自己的项目,然后删删改改,当然完全可以自己用boottrap进行页面布局也是可以的,主要看你是否要求对前端精深,时刻明确自己的目的,学会借力打力,这样做才有效率,否则事事亲力亲为,尤其是在…

Bootstrap页面响应式设计

关键词:viewport.栅格布局.媒体查询(Media Queries) 一.关于栅格布局的说明: 1.基本图解 extra small devices phones 超小型设备手机small devices tablets 小型设备平板电脑medium devices desktops 中型设备台式机large devices desktops 大型设备台式机 2.混用案例说明如:HTML代码:<div class="col-xs-12 col-sm-9 col-md-6 col-l…

Bootstrap页面布局24 - BS旋转木马功能

代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> <div class='carousel slide' id='carousel1'> <div class='carousel-inner'> <div class='item active'> <img src='http://placehold.it/1246x360/…

Bootstrap页面布局23 - BS折叠内容

<div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3>  <a href='#collapse1' class='btn btn-primary' data-toggle='collapse'>点击显示内容</a> <!--button标签中指向data-target='#c…

Bootstrap页面布局22 - BS工具提示

当鼠标点击在一个a连接上时,显示提示文字的效果 ---------------- tooltip <div class='container-fluid'> <h3 class='page-header'>Bootstrap 工具提示</h3> <p style='text-align:center;'><a href='#' rel='tooltip' title='http://www.taobao.com'>淘宝网</a>&l…

Bootstrap页面布局20 - BS缩略图

<div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul class='thumbnails'> <li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片1' /></a><…

Bootstrap页面布局19 - BS提示信息

提示信息的设计提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert alert-info: .alert alert-block: .alert alert-heading: 提示信息按钮: <a href='javascript:;' class='close' data-dismiss='alert'></a> 代码块: <div class=…

Bootstrap页面布局18 - BS导航路径以及分页器

导航路径:又叫“面包屑”,功能是让用户知道所处的位置.  <ul class='breadcrumb'> <li><a href='#'>首页</a> <span class='divider'>></span></li> <li><a href='#'>餐厅列表</a> <span class='divider'>></sp…

Bootstrap页面布局17 - BS选项卡

代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2>  <ul class='nav ?'> <li class='active'><a…

Bootstrap页面布局14 - BS按钮群组

首先看看这个代码: <div class='btn-group'> <button type='button' class='btn'>计算机</button> <button type='button' class='btn'>网络</button> <button type='button' class='btn'>桌面项目</button> </div> 将功能相近的按钮分成一组,bootstrap 为我…

Bootstrap页面布局13 - BS按钮

bootstrap中的按钮类一般可以作为按钮的标签有:<a></a> <button></button> <input type='button' />上面如图: 如果要改变按钮的尺寸: .btn-large:尺寸最大: .btn-small:尺寸中等: .btn-mini:尺寸最小为按钮添加小图标: i标签表示添加的小图标: icon-comment 图标的颜色:默认是黑色,还可以设定白色为 .icon-white <butto…

Bootstrap页面布局10 - BS表格

①了解需要怎样的表格标签结构 ②bootstrap为我们提供了一些类来变换表格样式 1.table中添加 <table class='table'></table> 如图: 2.table中添加 <table class='table table-striped'></table> -- 奇偶行背景色区别如图: 3.table中添加<table class='table table-bordered'></table> -- 表格显…

Bootstrap页面布局10 - BS代码

网页中标记代码内容使用code和pre标签要在HTML中显示标签本来的样子需要转化为实体在此附上百度的实体字符:http://baike.baidu.com/view/4757776.htm#3 code标签标注行内的代码内容我要在代码中显示如下效果: 需要这么使用code标签在前面几节中有是否还是记得:我们在 <code><div></div></code>标签中添加了一个类<code>.page-header</code>…

Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局

首先引入文件bootstrap-responsive.css <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> bootstrap-responsive.css这个样式表已经为我们针对常用的上网设备做好了相应的响应式设计: 比如: 分辨率宽度1200像素以上的屏幕上,网格的宽度会由60px变为70px,且网格与网格之间的距离由20px变为30px 在平板电脑的垂直状…

Bootstrap页面布局5 - 响应式布局(格式)

旨在优化不同上网设备中页面显示的优化响应式布局:就是根据浏览窗口的尺寸,改变页面的变化原理:利用css的media-queries判断浏览窗口的尺寸,在CSS样式表中设置一些规则! 例如: 在<style></style>标签中输入如下css3的格式实现: <style> body {background:green;} //注意这里不能写成行内样式,使用CSS样式定制样式 @media (max-width:767px) {body{background:red}…

Bootstrap页面布局3 - BS布局以及流动布局

1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示: 2.给需要的元素添加一个容器,使其居中显示 <div class='container'> <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> </div&g…

Bootstrap页面布局2 - 包含BS文件

如图所示: bootstrap布局基于HTML5,为了使IE8以下也能使用某些HTML5的标签,必须要引入文件:http://html5shiv.googlecode.com/svn/trunk/html5.js,但是国情的原因,使用不了,所以使用以下代码直接插入到html的head标签中,一定要写入head标签中使浏览器先“看到”这句: <!--[if IE]> <script> (function(){if(e = "abbr,article,aside,audio,…

Bootstrap页面布局1 - 下载BS(bootstrap简称)

1.bootstrap 官方网站:http://wrongwaycn.github.io/bootstrap/docs/index.html 2.如图: 3.下载后得到如下目录结构 bootstrap v2.0.2 css(含4个文件) bootstrap.css bootstrap.min.css(这个文件只是bootstrap.css的格式化文件) bootstrap-responsive.css bootstrap-responsive.min.css(这个文件只是bootstrap-re…