bootstrap bootstrap用什么软件

   2023-03-08 学习力0
核心提示:bootstrap:简易模版:meta http-equiv='X-UA-Compatible' content='IE=edge' //让IE浏览器运行最新的渲染模式//meta name='renderer' content='webkit'让部分国产浏览器默认采用高速模式渲染页面meta name='viewport' content='width=device-width,initail-

bootstrap:简易模版:

<meta http-equiv='X-UA-Compatible' content='IE=edge'>   //让IE浏览器运行最新的渲染模式
//<meta name='renderer' content='webkit'>让部分国产浏览器默认采用高速模式渲染页面
<meta name='viewport' content='width=device-width,initail-scale=1'> //为确保适当的绘制和触屏缩放 <link href='bootstrap.min.css' ref='stylesheet'> <!--[if lt IE9]> //ie9以下浏览器引入 html5shiv.js 和 respond.js 以支持媒体查询media query和html5 <script src='http:cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js> <script src='http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js'> <![endif]--> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>

禁用响应式布局:1 移除viewport标签,2 设置.container的width值覆盖默认值 3栅格布局,替换掉.col-md-*

支持情况:IE8-11;Android、IOS

bootstrap3.是移动设备优先

1.bootstrap需要为页面内容和栅格系统包裹一个 .container容器。

    A类:.container用于固定宽度并支持响应式布局的容器。

 B类: .container-fluid 用于100%宽度,占据全部适口的viewport 的容器

2 栅格系统中,媒体查询media query 创建的关键的分界点阈值。

  超小屏幕,.col-xs-手机 小与768px   ,bootstrap默认

  小屏幕,.col-sm-平板 大于768px      @media (min-width:@screen-sm-min){}

  中等屏幕,.col-md-桌面显示器,大于992px  @media (min-width:@screen-md-min){}

  大屏幕,.col-lg-大桌面显示器,大于等于1200px  @media(min-width:@screen-lg-min){}

       @media (min-width:@screen-md-min) and @media (max-width:@screen-md-max){}

.col-md-offset-4将.col-md-4向右偏移了4个列

.col-md-push-3:将col-md-3推到前面,

.col-md-pull-9:将col-md-9拉到后面,

预定义样式:.h1 .h2  .small   .lead让段落更突出  .text-left .text-center .text-right .text-justify .text-nowrap 文本对其类  .text-lowercase .text-uppercase  .text-capitalize首字母大写  文本大小写  <abbr title="'>文本缩略语    <blockquote>默认引用   .list-unstyle   .list-inline

表格:.table   .table-striped条纹样式  .table-hover  .table-bordered .table-condensed padding减半   单元格设置颜色.active .success .info .warning .danger

    响应式表格:table要包裹在.table-responsive中。<div class="table-responsive"><table class="table">

表单

role='form'  .form-group  .form-control  .form-inline内连样式表单中label要设置.sr-only   .form-horizontal水平排列表单

表单类型:type= text  password datetime  datetime-local date month time week number email url search tel color

多选框  .checkbox .radio .disabled禁止  .checkbox-inline  .radio-inline     

    .multiple 允许同时选多个

   .disabled  禁止用

   .readonly 只读属性

按钮<button>、链接<a>   .btn .btn-default  .btn-primary  .btn-success  .btn-info  .btn-warning  .btn-danger  .btn-link  .btn-lg  .btn-sm  .btn-xs   .active 激活状态  

图片 支持响应式:.img-responsive

<img src="..." class="img-responsive" alt="Responsive image">

.img-rounded  圆角图片  .img-circle圆形图片   .img-thumbnail边框图片

关闭按钮  .close  <button type='button' class='close' ><span aria-hidden='true'>&times;</span>

三角符号  .caret  <span class='caret'></span>

快速浮动:.pull-left  .pull-right

清除浮动:  .clearfix

.show  .hidden

.visible-xs-block/inline/inline-block

.hidden-md-block

 

app典型弹性布局:关键元素高度和位置不变,只有容器元素在做伸缩变换。开发原则:文字流式fluid,控件弹性flexible,图片等比缩放scale

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Bootstrap基础:选择器
    1.CSS属性选择器[arrt=value]   该属性有指定的确切值[arrt~=value]  该属性值必须是多个空格隔开的值,比如,class=“title featured home”,而且这些值中的一个必须是指定的值“value”[arrt|=value]  属性的值就是“value”或者以“value”开始并立即
    03-16
  • bootstrap模态框手动开启关闭与设置点击外部不关闭
    bootstrap模态框手动开启关闭与设置点击外部不
    完整的参考菜鸟教程:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html1.手动开启与关闭模态框的方法  按钮开启与JS函数开启(2种)!DOCTYPE htmlhtmlheadmeta charset="utf-8"titleBootstrap 实例 - 模态框(Modal)插件/titlelink rel="styleshe
    03-16
  • Bootstrap.css 中请求googleapis.com/css?famil
    问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");     国内访问不稳定,页面反应慢解决:将请求结果保存下来,放到本地,重新声明请求1.请求http:
    03-16
  • 基于.NET6、FreeSql、若依UI、LayUI、Bootstrap
    近几年,.net生态日益强大,特别是跨平台技术,性能提升,那真的是强大无比。为了日常能够快速开发,笔者基于基于.NET6、FreeSql、若依UI、LayUI、Bootstrap构建插件式的CMS,请大家多提意见建议。在此,要感谢若依CMS的作者,借用了皮肤框架。懒的发文字描述
    03-16
  • elasticsearch bootstrap.memory_lock
    检查bootstrap.memory_lock设置是否生效get http://10.127.0.1:9200/_nodes?filter_path=**.mlockall响应:{"nodes": {"9giihmDNRdS136KT52Gl5g": {"process": {"mlockall": true}},"X0zQESeeT8uJ9kVXvHpl-w": {"process":
    03-08
  • day 57 Bootstrap 第一天
    day 57 Bootstrap 第一天
    一 、bootstrap是什么 http://v3.bootcss.com/css/#grid-options(参考博客)是一个前端开发的框架.HTMLCSSJS下载地址:https://v3.bootcss.com/ (当前版本3.3.7)目录结构 bootstrap-3.3.7-dist/├── css// CSS文件│ ├── bootstrap-theme.css// Boo
    03-08
  • 基于bootstrap_网站汇总页面 bootstrap网站案例
    基于bootstrap_网站汇总页面 bootstrap网站案例
    !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"title我的网页/titlelink rel="stylesheet" href="css/bootstrap.min.css"/headbody!--头部信息--nav class="navbar navbar-inverse navbar-fixed-top"div class="conta
    03-08
  • 50 个 Bootstrap 插件
    Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。本文向你推荐 50 个 Bootstrap 的插件,可以考虑在你下一个项目中使用它们。1. Boots
    03-08
  • Bootstrap资源 bootstrap官方文档
    官方网站:http://getbootstrap.com/http://twitter.github.com/bootstrap/index.html 官方博客:http://blog.getbootstrap.com/  中文文档:http://wrongwaycn.github.com/bootstrap/docs/index.html  图标:Font Awesomehttp://fortawesome.github.com
    03-08
  • bootstrap bootstrap检验
    bootstrap是简洁灵活的用于搭建web页面的Html,Css工具集。---是一组简洁强大的前端开发框架。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML框架。bootstrap中的js框架依赖于jquery,因此jquery要在bootstrap之前引进一般要把CS
    03-08
点击排行